1

当使用画布渲染 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之间的旋转映射没有问题。第一个还包括立方体和矩形：这就是我想要做的。

4

1 回答 1

1

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

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

于 2012-04-11T10:13:05.400 回答