Three.js使用射线检测两个移动物体之间的碰撞

Question

Three.js使用射线检测两个移动物体之间的碰撞

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);

我曾尝试移除 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坐标的量，如果向任一方向走得太远，则反转该量使其返回。

- fncombo

这是太难调试了。你能否提供一个更简单的例子，只包括相关的代码？你能把你的简单示例放到jsfiddle上运行，这样它就可以更容易地被修改了吗？ - WestLangley

当然，这里是代码：http://jsfiddle.net/g9Djn/ 我需要的是一条射线来检测平台和球之间的碰撞，如果它们接触到了，就让球弹开。 - fncombo

如何使用THREE.Ray来检测红色球和绿色平台之间的碰撞？ - fncombo

尝试自己将碰撞代码添加到fiddle中。你做得很好。 :-) 如果仍然有问题，请重新发布。 - WestLangley

这是我能做到的最远程度。我可以检测它们之间的距离，但现在你不能移动绿色平台，它会移动到中间。 - fncombo

哈哈！http://jsfiddle.net/g9Djn/2/ 我想我已经做到了。不过，如果球从侧面撞击面板而不是从顶部直接撞击，它的行为会非常奇怪... - fncombo

2个回答

5

这里有一个关于碰撞检测的例子: http://stemkoski.github.com/Three.js/Collision-Detection.html

如果需要移动方块的说明，请查看： http://stemkoski.github.com/Three.js/#collision-detection

- Stemkoski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fncombo · Accepted Answer

一番尝试后，我搞明白了。

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;

};

基本上，我一直在从球体下方投射一束光线，如果平台正好在球体正下方且距离足够近，我就会改变球的方向。