在three.js中将box2d矩形渲染为3d矩形答案

【问题标题】：Rendering box2d rectangle as a 3d rectangle in three.js在three.js中将box2d矩形渲染为3d矩形
【发布时间】：2012-04-11 18:13:05
【问题描述】：

当用画布渲染 box2d 物体时，有个很大的问题是 box2d 只能给我们物体的中心和它的角度（而画布从左上角绘制矩形等形状）。通过查看 Seth Land 的一些教程，我绕过了这个问题，现在工作正常（我自己永远无法弄清楚这样的事情）：

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 是画布像素/box2d-meters 转换器，60 和 10 是矩形的尺寸（因此 30 和 5 是一半尺寸）。

问题

现在，我想在three.js 上渲染它。第一个反对意见是 three.js 在 3d 中工作，而 box2d 则不行。没问题：我只想在 2d 矩形之上构建一个 3d 矩形。 2d 轴维度必须来自 box2d，而我希望最后一个维度是完全任意的。

我的工作不需要 3d 物理，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 的运动，我遇到了几乎相同的问题在使用上下文翻译和上下文旋转之前使用标准画布。

我希望任何人有时间解释一个可能的解决方案。提前非常感谢！ :)

编辑：看起来有人已经这样做了（需要 chrome 上的 webgl）：http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

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

【问题讨论】：

标签： javascript canvas box2d three.js

【解决方案1】：

您使用的是什么类型的相机？

要获得“2d”效果，您需要使用正交相机，否则您将获得透视投影的东西，并且与您在 2D 中看到的不匹配。

【讨论】：

感谢您的帮助。我使用的是透视相机：我现在尝试使用正射相机。