Javascript 从用户输入创建三维形状？

我正在尝试建立一个简单的三维形状生成器（它将始终是一个矩形/正方形，需要建立），我想要的是用户能够输入高度，宽度和深度，形状是实时为他们建立一个线条图。我一直在网上寻找，发现这个JSFIDLE非常棒，但是我需要它在3d（不仅仅是2d）中工作，而且要沿着这些路线工作。然而，我完全被卡住了，在这件事上留下了我的挠头

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var width=2;
var height=35;
var $width=document.getElementById('width');
var $height=document.getElementById('height')

$width.value=width;
$height.value=height;

draw();

$width.addEventListener("keyup", function(){
    width=this.value;
    draw();
}, false);

$height.addEventListener("keyup", function(){
    height=this.value;
    draw();
}, false);


function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(40,40,width,height);
}

---

有什么想法吗？

使用库处理3D要容易得多。Three.js是一个流行的。他们还提供了您所描述内容的演示：

---

右上角的控件将允许您实时调整对象的尺寸。修改此示例将比从头开始编写要容易得多，除非您想学习vanilla WebGL。

好吧，从使用3D上下文和3D形状开始，如立方体。如果您想使用3D对象，我将研究CSS3变换，如skew，它将涉及一些计算