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，否则修改这个例子比从头开始编写要容易得多。

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

1 个答案: