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.
2 Likes
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.
You can use threejs threeverse engine to load gltf assets with gltf collision this would be easier to accomplish creating an open world or any threejs virtual experience or games.
The threeverse three-to-cannon automatically takes the gltf collision model shape in a cannon physics collider.
cannon.js has not been maintained for like 10 years. take a look at cannon-es GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript. this is the semi-maintained version with critical bugfixes, especially for convex polyhedrons or hulls which you will need.
then again, cannon is awfully slow handling convex. the original cannon.js doesn’t handle it imo at all, cannon-es does somewhat support it but it’s aching and performance will be bottom tier. here’s one such example turning a gltf model into a convex hull Physics with convex-polyhedrons - CodeSandbox (the example uses cannon-es + rt/cannon)
i think it would help if you can still re-consider, something like rapier handles convex with good performance. and imo pairing three to react would also make sense because you get things like this GitHub - pmndrs/react-three-rapier: 🤺 Rapier physics in React where you can effortlessly drop entire models into physics rigid bodies. see:
1 Like
Cannon was updated 2 years ago not 10 years. Cannon is the fastest and reliable in all available JavaScript physics. There is just one imperfection in Cannon, the trimesh and polyhedron. The trimesh collides only with sphere and plane and polyhedron collides with all body types but it’s too taxing for the CPU specially when polyhedron is made from complex glft mesh and in numbers. So its a trade off between speed and collisions.
Threejs Threeverse allows you to create both trimesh and polyhedron from glft mesh.
Check out ThreeJs + Cannon and Threeverse Project showcasing the usage of cannon-es for an threejs open world 3d browser gamings.
i mean the original cannon.js by schteppe, GitHub - schteppe/cannon.js: A lightweight 3D physics engine written in JavaScript.
cannon-es is maintained by us (pmndrs) GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript. (i’m a core maintainer). all we can do is keep it on life support, merge critical bugfixes, but the library isn’t moving forward. cannon remains the slowest and oldest physics engine around, there are better alternatives out there now. rapier feels like a thousand times faster, especially pushing convex objects.
rapier also handles trimesh effortlessly, the tube in this example for instance is a trimesh, i don’t think this is even possible in cannon, or at least i’ve never seen it do that:
(rapier is just a suggestion ofc)
1 Like