How To Detect Collision Between Two Objects In Javascript With Three.js?

There a lot of nice things for collision detection like threex.colliders or code snippets here on questions, but acutally the most stuff is old (some functions like multiplyVector3

Solution 1:

You can detect collisions by using bounding boxes of objects. Bounding boxes are of type THREE.Box3 and have useful methods as isIntersectionBox, containsBox or containsPoint which will suit all your needs when you want to detect collisions.

Using them is as simple as this:

var firstObject = ...your first object...

var secondObject = ...your second object...

firstBB = new THREE.Box3().setFromObject(firstObject);

secondBB = new THREE.Box3().setFromObject(secondObject);

var collision = firstBB.isIntersectionBox(secondBB);

collision will be true if the boxes are colliding/hitting each-other. This gives you an impression on how you can use bounding boxes.

You can also check this example out. I think it will be very useful for you.

EDIT:

You should maybe also checkout the Physijs library which is a plugin to three.js.

There is someone with a similar question on Stackoverflow that you might want to keep track of.