Using loaded gltf geometries as shape for cannon.js

How can use a loaded gltf geometries as a shape for the physics body?

Depending on your physics engine, maybe three-to-cannon or three-to-ammo? Note that it’s usually best to represent models with some simpler geometry like a box, cylinder, a convex hull, or a combination of these shapes. A full concave shape is difficult to simulate in a physics engine, and may run into bugs.

Thank you. Is there a way to this without using a library. so basically i have 2 gltf, one is the actual 3d object and the other one is just a geometry that kinda much the shape of other gltf. i just want to use the other gltf to be the shape.

What physics engine are you using? I’m most familiar with Cannon.js, and it can’t load models from a file like three.js does. You’ll need to either use one of these libraries, or inspect their code to see how they do the conversion from a three.js Mesh to a shape for the physics engine.

I’m sorry for the confusion i’m actually using three.js + cannon.js

basically i have a object.glb and collision.glb

i’m using cannon.js and i was able to load a gltf file. the only thing i’m struggling with is using a the collision.glb as the shape of new CANNON.Body(). Is that make sense?

Turning an arbitrary mesh into a performant physics object is not always easy. I’ve linked above to a project (three-to-cannon) that includes code for several different ways of doing so — i think you’ll need to inspect that code and attempt to implement what you need. If you get stuck you can always share code or a demo here for help.

Here is something similar.


It is loading an OBJ, with a collision shape in it as one of its children. The model was created in blender. It is conceptually the same as creating a separate mesh to be used as the collision shape in cannonjs.
See lines 71-79 in client.ts where I traverse the loaded object.

In the client.ts, look at line 89 where I convert the mesh into a convex polyhedron. Then go to its definition and you can see what it does. There is a fair amount of reverse engineering for you to do.

My conclusion was, this is a slow approach. It is easy to create collision meshes, but when used in cannonjs, it is very slow. There is only 10 monkey heads on this demo, my collision shape only has a few vertices. Also, you need to make sure you have no faces facing inwards. You will get loads of console errors telling you this. There is lots of trial of error to solve during your creation phase.

Now look at this,
https://sbcode.net/threejs/compounds-versus-convex-polyhedrons/
In this demo, I use compound shapes, consisting of spheres. It is way better performance than trying to convert a mesh to a convex shape to be used in cannonjs.