Make a physics shape wherever the gltf model

Hey there , i try to make a physics animation of gltf model , but how i can make it physics shape if there is a different model ?

i see this example cannon.js - bunny demo put don’t know how they do it, then i think is just a box , i make a familiar physic shape

you best make a compound shape of boxes/spheres, that is the fastest. there is also a convex polyhedron shape which can be used for complex shapes, but i believe it still has performance issues. i only have a react + cannon demo but it shows you how to make the convex hull in threejs: Physics with convex-polyhedrons - CodeSandbox

definitively use cannon-es, cannon is not maintained any longer and has longstanding bugs especially for the kind of thing you’re after: GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript.

1 Like

here’s some more examples.
This demos a combination of trimesh, convexpolyhedron and primitive shapes
Example 1 : Three.js TypeScript Tutorials by Sean Bradley

This uses a compound shape of 3 spheres for the finger.
Example 2 : Finger Physics - Three.js Tutorials


First thing thank you for replay , then i agree with you but how i can estimate the spheres/boxes to make the shape, maybe there is some tool ?

Thank you i think you are the Mr of cannon :slight_smile:
can i show the code of first example ?

oh wow there is so cool thank you i will try, but you add a three sphere for a finger how we can know the right way for estimation ?

I’m not the Mr, that would be schteppe (Stefan Hedman) · GitHub
I just have lots of experience with it.

see instructions here : Cannon - Three.js Tutorials

trial and error

1 Like

yes, there is. the cannon debugger. GitHub - pmndrs/cannon-es-debugger: Wireframe debugger for use with cannon-es

demo: Simple physics demo with debug bounds - CodeSandbox again this is cannon-es + react + cannon-debugger but you get the point, it allows you to figure out complex shapes visually

1 Like

THank you this is a solution , but i compile the ts file to js file and get it to my project (cannon utils ) get this error

You see that error if you try to create a ConvexPolyhedron from a geometry with inward facing faces. So what ever model you are trying to create a ConvexPolyhedron from, try using a Trimesh instead.

But still ConvexPolyhedron and Trimesh’s are slow, and have there collision limitations.
I have lots of info on this and the following pages.
Physics with Cannon : Physics with Cannon - Three.js Tutorials

You can improve on trimesh performance, by converting a complicated geometry to a convex hull first, and then converting the convexhull to a Trimesh or ConvexPolyhedron (whichever gives you best performance - you decide). This works better if the resulting convex hull has less faces.

Example : Convex Geometry to CANNON.Trimesh - Three.js Tutorials

More sophisticated example at : ConvexObjectBreaker - Three.js Tutorials

That very kind of you to help me , but i try all ways you tell me,then the performance are too bad when i add bit big count of model even i create a prem shape of it in blender , so i think the best way is make cannon shape body by trail

when two diamond collision,my browser stuck,is there any way to make it behave smoothly