将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之间进行旋转映射。第一个也包括立方体和矩形:我正在尝试做什么。
您使用的是哪种类型的相机?
要获得“2d”效果,您需要使用Orthographic相机,否则您将获得透视投影的东西,并且与您在2D中看到的内容不匹配。
感谢您的帮助。我正在使用透视照相机:我现在尝试使用直接照相机。 – Saturnix 2012-04-11 10:34:45