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

使用canvas渲染box2d物体时，存在box2d只能提供身体中心和角度的大问题（而画布从第左上角）。通过观察从塞特土地一些教程，我绕过这个问题，现在工作得很好（我从来没有能够找出这样的事情由我自己）：将box2d矩形渲染为three.js中的3d矩形

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是canvas-pixel/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 debug draw。 -1.5不是正确的数值来打开完美的90度角度的照相机（有谁知道确切的值？），甚至最糟糕的是，three.js矩形不遵循box2d运动，几乎具有相同的问题I在使用上下文翻译和上下文旋转之前使用标准画布。

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

编辑：它看起来有人做它已经（需要在Chrome中的WebGL）：http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

第二个是刚刚球体所以没问题在box2d和threejs之间进行旋转映射。第一个也包括立方体和矩形：我正在尝试做什么。

来源

2012-04-09 Saturnix

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

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

来源

2012-04-11 10:13:05 sole

感谢您的帮助。我正在使用透视照相机：我现在尝试使用直接照相机。 – Saturnix 2012-04-11 10:34:45

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

回答

相关问题