Collision detection in three.js

three.js does not provide a system for collision detection or colliders. You have basically two options: You can implement collision detection with some math and coarse bounding volumes like THREE.Sphere or THREE.Box3 or you try to integrate a physics engine in your app. Check out the following examples to get an impression of this approach:

https://threejs.org/examples/physics_ammo_rope

For most apps, a real physics engine is actually an overkill. Like mentioned above, you can implement a basic collision detection with more or less simple math like in the following example. Check out the code section in the render function which ensures the balls are kept inside the room and collide against each other.

https://threejs.org/examples/webxr_vr_ballshooter

6 Likes