javascript - 从用户输入创建 3D 形状？

Question

我正在尝试构建一个简单的 3d 形状生成器(它总是需要构建的矩形/正方形)我想要的只是让用户能够输入高度、宽度和深度，并且形状是内置的实时为他们绘制线条图。我一直在网上寻找并发现这个 jsfiddle 很棒，但是我需要它在 3d(不仅仅是 2d)中工作 http://jsfiddle.net/m1erickson/f6E6Y/但沿着这些路线。然而，我完全卡住了，在这个问题上摸不着头脑……

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);
}

有什么想法吗？

Answer 1

使用库处理 3D 会容易得多。 Three.js 是一个流行的。他们还有一个针对您所描述内容的演示:http://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry

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