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は canvas-pixel/box2d-meters コンバーター、60 と 10 は長方形の寸法です (つまり、30 と 5 は半分の寸法です)。

_

問題

これをthree.jsでレンダリングしたいと思います。最初の反論は、three.js は 3d で動作するが、box2d は動作しないということです。問題ありません。2 次元の長方形の上に 3 次元の長方形を作成したいだけです。最後の次元を完全に任意にしたいのですが、2d 軸の次元は box2d からのものでなければなりません。

私の仕事は 3D 物理学を必要としません。2D で十分ですが、これらの 2D オブジェクトに 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 の動きに追従せず、ほぼ同じ問題が発生します。コンテキストの翻訳とコンテキストの回転を使用する前に、標準のキャンバスを使用していました。

可能な解決策を説明する時間があれば幸いです。よろしくお願いします！:)

編集: 誰かが既にそれを行っているようです (Chrome で webgl が必要です): http://game.2x.io/ http://serv1.aelag.com:8082/threeBox

2 つ目は単なる球なので、box2d と threejs の間の回転マッピングに問題はありません。最初のものには立方体と長方形も含まれています。それが私がやろうとしていることです。

4

1 に答える 1

1

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

「2D」効果を得るには、正投影カメラを使用する必要があります。そうしないと、透視投影されたものが得られ、2D で見ているものと一致しなくなります。

于 2012-04-11T10:13:05.400 に答える