Collision Detection with 3D Models

Hi all!,

I’m new to THREE.JS and figuring out a way to implement Collision Detection on 3D Models with Raycaster. raycaster is working fine with ThreeJS objects i.e Box Geometry etc, but when it comes to GLTF loaded objects, collision is not being detected. Is there any way I can implement collision detection for Blender imported models where I do not have to create a separate mesh to collide. If any tutorial or guide available, kindly help.

Thank you.

1 Like

you can use physics libs for very convenient impact collision. i would suggest cannon-es:

it also handles convex shapes, so you can use random gltf imports like in this demo: it uses a react wrapper around cannon-es here, but you can do the same thing in plain three.

You can also try out the cannonjs branch of my Threejs TypeScript boilerplate.

Example :

You can also implement basic collision detection with simple bounding volumes like bounding spheres, AABB or even OBBs and the respective intersection tests. In this way, you can perform fast tests without the overhead of a physics engine. three.js provides for all three bounding volumes respective classes.

BTW: A very good book about related techniques is Real-Time Collision Detection from Christer Ericson.


The pointer lock controls example passes any objects that should be collide-able to a group (array? i’m still a noob) called ‘objects’. Then in it’s animate function checks for a raycaster intersection length greater than a certain amount which then creates an onObject true/false value. It uses onObject being true to then set some instruction… like not moving below a certain point or having 0 velocity. Read that example because it’s quite easy to follow how it’s built in collision detection is working.

Using pointerlockcontrols type setup as a starting point - this worked for my project when passing any GLTF loaded model to ‘objects’ just like in the example. But I don’t think it’s the best/recommended method for anything other than basic needs.

I pushed the ‘gltf mesh’ to ‘objects’ with something like this inside the loader:

gltf.scene.traverse( function ( child ) {
						if ( child.isMesh ) {
                             ////other material settings
					}  );

Like I said - I’m still learning so take other peoples advice over mine where possible :slight_smile: