检测three.js中球体和三角形之间的碰撞

时间:2015-12-02 13:28:24

标签: javascript three.js collision-detection

我希望找到一个三角形是否与一个球体碰撞,在three.js

我已经使用raycaster和球体的顶点实现了一个方法,但是它总是不起作用,因为三角形可能位于球体顶点的“2”之间,因此无法被检测到。

我想要一个完美的数学算法。

2 个答案:

答案 0 :(得分:3)

嘿,我找到了解决方案:

该算法适用于 2阶段

阶段1

我使用三角形中的3个点创建3条线:

 var line1 = new THREE.Line3(a,b);
 var line2 = new THREE.Line3(a,c);
 var line3 = new THREE.Line3(b,c);

 then I find the closest point from each of these 3 lines, to the center of the sphere :

 var closestPoint1 = line1.closestPointToPoint(center, true);
 var closestPoint2 = line2.closestPointToPoint(center, true);
 var closestPoint3 = line3.closestPointToPoint(center, true);

 then I calculate the distance of that point to the center :

 // code for 1 line only

 var distToCenter = closestPoint.distanceTo(center);
 if(distToCenter <= radius){ 
   // we have a collision
 }

这就是三角形的线条。如果没有线与球体相交,我会检查&#34;身体&#34;阶段2中的三角形:

第2阶段

我使用三角形三角形创建一个THREE.Triangle,然后使用该三角形创建一个平面,最后我找到距离球体中心的平面的最近点。如果这一点&#34;属于&#34;在三角形中,我们发生了碰撞:

 var triangle = new THREE.Triangle( a,b,c );
 var plane = triangle.plane();
 var pp, cp;

 var dp = Math.abs(plane.distanceToPoint(center)); 

 if(dp <= radius){ 
   pp = plane.projectPoint(center);
   cp = triangle.containsPoint(pp);

   if(cp === true){
       // collision
   }
 } 

如果在阶段1或阶段2中未检测到碰撞,则三角形不会与球体发生碰撞。

我的解决方案完美地适用于我的项目。

请告知您可能遇到的问题。

答案 1 :(得分:-1)

我可以建议您查看以下页面,而不是完美的数学算法,根据我的理解,它完全涵盖您的问题:Three.js - Accurate ray casting for collision detection