2012-04-09 16 views
1

box2dボディをキャンバスでレンダリングすると、body2dはボディの中心とその角度を与えることができます(カンバスは、左上の角度)。セス土地からいくつかのチュートリアルを見て、私は(私は自分自身でこのような何かを把握することができたことがないでしょう)この問題をバイパスし、現在は正常に動作しました:three.jsのレンダリングbox2d矩形

bが体である
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(); 

SCALEですcanvas-pixel/box2d-metersコンバーター、60と10は長方形の寸法です(したがって、30と5は半分の寸法です)。

_

問題今

、私はthree.jsでこれをレンダリングしたいと思います。最初の異論は、box2dは3d内でthree.jsが動作するということです。問題はありません:私はちょうど2次元の上に3次元矩形を構築したいです。最後の次元を完全に恣意的にしたい場合、2次元の軸の次元はbox2dでなければなりません。

私の作品は3d物理学を必要としません.2dで十分ですが、これらの2次元オブジェクトに3次元の厚みを与えたいと思います。どうやってやるの?!これまでのところ私はこのようにしようとしてきた:

// 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の動きに従わず、ほとんど同じ問題を抱えます。コンテキスト変換とコンテキストローテーションを使用する前に、標準のキャンバスを使用していました。

誰でも可能な解決策を説明する時間があることを願っています。ありがとうございます! :)

EDITは:http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

もう一つはちょうどそう問題はないが球体である:それは誰かがすでに それをやった(クローム上でWebGLが必要)になりますbox2dとthreejsの間の回転マッピングで最初のものにはキューブと長方形も含まれています。つまり、私がやろうとしていることです。

答えて

1

どのようなタイプのカメラを使用していますか?

「2D」エフェクトを取得するには、正射影カメラを使用する必要があります。そうしないと、透視投影されたものが得られ、2Dで見ているものとは一致しません。

+0

ご協力いただきありがとうございます。私は遠近法カメラを使用していました。私は今、ortographicカメラを使用しようとします。 – Saturnix