3

THREE.js と WebGL レンダリングを使用して 3D でブレークアウト ゲームを作成しています。THREE.Ray を使用して、バウンドするボールと、ユーザーが制御できる下部のプラットフォームとの衝突を検出したいのですが、うまくいきません。

プラットフォームからボール (またはその逆) にレイをキャストすることはできましたが、これを行うと、ボールが画面の中央で動かなくなり、アニメーション化できなくなります。

var ray = new THREE.Ray( platform.position, ball.position.subSelf( platform.position ).normalize() );
var intersects = ray.intersectObject( ball );

if ( intersects.length > 0 ) console.log(intersects[0].distance);

subSelfand を削除しようとしましnormalize()たが、検出が壊れます。

これがゲームで、コードは script.js にあります。

http://dl.dropbox.com/u/4531743/WebGL/Breakout-3D/index.html

コンソールを開いて見ると、パネルを動かすと距離の値が変化することがわかるので、いいですね。ただし、すべてのフレームでその位置に設定されているため、ボールをアニメートすることはできません。

http://dl.dropbox.com/u/4531743/WebGL/Breakout-3D/index.html#disableRay

上記は、ボールとパネルの Z 位置を計算し、それがより大きく、パネルの幅 (x) 座標内にあるかどうかを確認し、そうである場合は跳ね返すことによって、私が最初に行った方法です。

ボールの跳ね返りは、フレームごとに X 座標と Z 座標を固定量だけ変更するだけで、いずれかの方向に行き過ぎた場合は、その量を逆にして元に戻ります。

4

2 に答える 2

6

いくつか遊んだ後、私はそれを解決しました。

var ray = new THREE.Ray( ball.position, new THREE.Vector3(ball.position.x, ball.position.y, platform.position.z).subSelf( ball.position ).normalize() );

var intersects = ray.intersectObject( platform );

if ( intersects.length > 0 ) {

    var face = intersects[0].face.d,
    dist = intersects[0].distance;

    if(face == 4 && dist <= 7) sizes.ball.velocityZ = -sizes.ball.velocityZ;

};

基本的には、常にボールから真下に光線を投射し、プラットフォームがその真下にあり、プラットフォームまでの距離が十分に近い場合は、ボールの方向を逆にします。

于 2012-10-20T21:51:10.163 に答える
5

http://stemkoski.github.com/Three.js/Collision-Detection.htmlに衝突検出の例があります。

キューブの移動方法については、 http ://stemkoski.github.com/Three.js/#collision-detection を参照してください。

于 2012-10-21T14:13:05.503 に答える