Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
68
rated 0 times [  71] [ 3]  / answers: 1 / hits: 79797  / 12 Years ago, fri, july 13, 2012, 12:00:00

I am using three.js.



I have two mesh geometries in my scene.



If these geometries are intersected (or would intersect if translated) I want to detect this as a collision.



How do I go about performing collision detection with three.js? If three.js does not have collision detection facilities, are there other libraries I might use in conjuction with three.js?


More From » three.js

 Answers
107

In Three.js, the utilities CollisionUtils.js and Collisions.js no longer seem to be supported, and mrdoob (creator of three.js) himself recommends updating to the most recent version of three.js and use the Ray class for this purpose instead. What follows is one way to go about it.



The idea is this: let's say that we want to check if a given mesh, called Player, intersects any meshes contained in an array called collidableMeshList. What we can do is create a set of rays which start at the coordinates of the Player mesh (Player.position), and extend towards each vertex in the geometry of the Player mesh. Each Ray has a method called intersectObjects which returns an array of objects that the Ray intersected with, and the distance to each of these objects (as measured from the origin of the Ray). If the distance to an intersection is less than the distance between the Player's position and the geometry's vertex, then the collision occurred on the interior of the player's mesh -- what we would probably call an actual collision.



I have posted a working example at:



http://stemkoski.github.io/Three.js/Collision-Detection.html



You can move the red wireframe cube with the arrow keys and rotate it with W/A/S/D. When it intersects one of the blue cubes, the word Hit will appear at the top of the screen once for every intersection as described above. The important part of the code is below.



for (var vertexIndex = 0; vertexIndex < Player.geometry.vertices.length; vertexIndex++)
{
var localVertex = Player.geometry.vertices[vertexIndex].clone();
var globalVertex = Player.matrix.multiplyVector3(localVertex);
var directionVector = globalVertex.subSelf( Player.position );

var ray = new THREE.Ray( Player.position, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )
{
// a collision occurred... do something...
}
}


There are two potential problems with this particular approach.



(1) When the origin of the ray is within a mesh M, no collision results between the ray and M will be returned.



(2) It is possible for an object that is small (in relation to the Player mesh) to slip between the various rays and thus no collision will be registered. Two possible approaches to reduce the chances of this problem are to write code so that the small objects create the rays and do the collision detection effort from their perspective, or include more vertices on the mesh (e.g. using CubeGeometry(100, 100, 100, 20, 20, 20) rather than CubeGeometry(100, 100, 100, 1, 1, 1).) The latter approach will probably cause a performance hit, so I recommend using it sparingly.



I hope that others will contribute to this question with their solutions to this question. I struggled with it for quite a while myself before developing the solution described here.


[#84270] Thursday, July 12, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
stephonkeandrer

Total Points: 392
Total Questions: 94
Total Answers: 100

Location: Tajikistan
Member since Sun, Aug 29, 2021
3 Years ago
;