Collision Detection with 3D Models

Questions
,
1

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
2

you can use physics libs for very convenient impact collision. i would suggest cannon-es: https://github.com/react-spring/cannon-es

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

3

Here are some Cannonjs examples.

Vanilla : Threejs Boilerplate : Cannon Physics - JSFiddle - Code Playground
React Three Fiber : React Three Fiber Boilerplate - Cannon - CodeSandbox
TypeScript : Cannon-ES Example - CodeSandbox

image
image1916×981 419 KB

4

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.

3 Likes
5

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
							 objects.push(child);
					
						 }						
					}  );

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

6

Dear Seanwasere, the given example when I use for GLB file containing a collection of children as group, mesh and object 3D the code is not helping me to build for it. Please any solutions you can provide help with a lot. Thanks.