在box2d中将three.js矩形呈现为三维矩形

Question

当用画布呈现box2d体时，有一个大问题，就是box2d只能给出身体的中心和角度(而画布从左上角绘制形状像矩形)。通过查看Seth的一些教程，我绕过了这个问题，现在工作得很好(我自己永远也找不出这样的东西)：

g.ctx.save();
g.ctx.translate(b.GetPosition().x*SCALE, b.GetPosition().y*SCALE);
g.ctx.rotate(b.GetAngle());
g.ctx.translate(-(b.GetPosition().x)*SCALE, -(b.GetPosition().y)*SCALE);
g.ctx.strokeRect(b.GetPosition().x*SCALE-30,b.GetPosition().y*SCALE-5,60,10);
g.ctx.restore();

其中b是主体，SCALE是画布像素/盒2d-米转换器，60和10是矩形的尺寸(所以30和5是半维)。

_

问题

现在，我想在three.js上呈现这个。第一个反对意见是，three.js在3d环境中工作，而box2d不工作。没问题:我只想在2d矩形的基础上构建一个三维矩形。2d轴尺寸必须来自box2d，而我希望最后一个维度是完全任意的。

我的工作不需要三维物理，2d就足够了，但是我想给这些2d物体一个三维的厚度。我怎么能这么做？！到目前为止，我一直在尝试这样做：

   // look from above
    camera.position.set(0,1000,0);
    camera.rotation.set(-1.5,0,0);

    geometry = new THREE.CubeGeometry( 200, 60, 10 , 1,1,1);

    // get b as box2d rectangle
    loop(){
    mesh.rotation.y = -b.GetAngle();
    mesh.position.x = b.GetPosition().x*SCALE;
    mesh.position.y = -b.GetPosition().y*SCALE;
    }

不幸的是，这看起来一点也不像box2d调试绘图。-1.5不是正确的值，以一个完美的90度角度(有人知道确切的数值吗？)而且，甚至最糟糕的是，three.js矩形不遵循box2d运动，在使用上下文转换和上下文旋转之前，我在使用标准画布时遇到了几乎相同的问题。

我希望任何人都有时间解释一个可能的解决办法。提前谢谢！)

编辑:它看起来已经有人做过了(在铬上需要webgl )：http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

第二个是球面，所以box2d和3ejs之间的旋转映射没有问题。第一种方法还包括立方体和矩形:这是我想要做的。

Answer 1

你用的是什么类型的照相机？

为了获得一个" 2D“效果，你需要使用一个正交相机，否则你将得到透视投影的东西，事情将与你在2D中看到的东西不匹配。