將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矩形

回答

相關問題