javascript - Three.js 使用 Ray 检测 2 个移动物体之间的碰撞

Question

我正在使用 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);

我试过删除 subSelf和 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 坐标，如果它在任一方向上走得太远，则反转该量以使其返回。

Answer 1

经过一番玩耍后，我解决了。

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;

};

基本上，这样我总是从球直接向下转换光线，如果平台直接在它下方并且与平台的距离足够近，我会反转球的方向。