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

我正在使用THREE.js和WebGL渲染器在3D中制作突破游戏。我想用THREE.Ray来检测弹跳球和底部可以控制的平台之间的碰撞，但我遇到了麻烦。Three.js使用Ray检测2个移动物体之间的碰撞

我已经设法从平台投射光线到球（或其他方式），但一旦我这样做，球就卡在屏幕中间，不能动画。

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

来源

2012-10-20 fncombo

这实在是太多了调试。你可以用相关的代码做一个简单的例子吗？你可以让你的简单例子在jsfiddle中运行，这样它可以更容易被黑客攻击？ – WestLangley

当然，在这里：http://jsfiddle.net/g9Djn/ 我需要的是一束射线来检测平台和球之间的碰撞，然后如果他们触摸，则将球弹出。 – fncombo

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

在玩了一段时间之后，我解决了它。

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-20 21:51:10 fncombo

有碰撞检测的例子： http://stemkoski.github.com/Three.js/Collision-Detection.html

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

来源

2012-10-21 14:13:05

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

回答

相关问题