Question

当使用画布渲染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-米转换器，60和10是矩形的尺寸（因此30和5是半尺寸）。 / p>

_

问题

现在，我想在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之间的旋转映射没有问题。第一个还包括立方体和矩形：我正在尝试做的事情。

Answer 1

您使用的是哪种类型的相机？

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

将box2d矩形渲染为three.js中的3d矩形

1 个答案: