Three.js 使用 Ray 检测 2 个移动对象之间的碰撞答案

【问题标题】：Three.js detect collision between 2 moving objects using a RayThree.js 使用 Ray 检测 2 个移动对象之间的碰撞
【发布时间】：2012-10-20 13:41:08
【问题描述】：

我正在使用 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 坐标改变一个固定的量，如果它在任一方向上走得太远，则反转该量使其返回。

【问题讨论】：

调试太多了。你能用相关代码做一个更简单的例子吗？您能否让您的简单示例在 jsfiddle 中运行，以便更容易被黑客入侵？
当然，这里：jsfiddle.net/g9Djn 我需要一条射线来检测平台和球之间的碰撞，然后如果它们接触，将球弹开。
如何使用THREE.Ray检测红球与绿台的碰撞？
尝试自己将碰撞代码添加到小提琴中。到目前为止，你做得很好。 :-) 如果仍有问题，请重新发布。
jsfiddle.net/g9Djn/1 这是我所能得到的。我可以检测到它们之间的距离，但现在你不能移动绿色平台，它会移动到中间。

标签： javascript collision-detection three.js

【解决方案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;

};

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

【讨论】：

这很有帮助。但是现在是2019年，所以threejs已经改了。我们可以用这个var ray = new THREE.Raycaster(ball.position, new THREE.Vector3(ball.position.x, ball.position.y, platform.position.z).sub(ball.position).normalize());用Raycaster代替Ray，用sub代替subSelf。

【解决方案2】：

在以下位置有一个碰撞检测示例： http://stemkoski.github.com/Three.js/Collision-Detection.html

有关如何移动立方体的说明，请参阅： http://stemkoski.github.com/Three.js/#collision-detection

【讨论】：