Hello , i try to get like this result on threejs without r3f
so i follow a tutorial for that , thank’s for @seanwasere
but when i add the mouse movement , the meshes move together without physics , is there some tips i have to fallow it ? thank you
the result : Threejs Cannonjs Convex Polyhedrons from Collision Mesh (forked) - CodeSandbox
@react-three/cannon is based on GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript. there are many vanilla examples in there. it’s really just five walls (planes), an invisible sphere steered by the mouse and a bunch of visible spheres. you best start with a simple plane catching a sphere. cannon.js - events demo then add the other walls, add interaction and you’re almost done.
Yah i know thank you for replay ,but i start to do t with threejs without react
cannon-es is just a physics library, it’s not related to react. the demo i linked is plain vanilla threejs. in principle it’s the same thing, you register a threejs mesh as a physics object and cannon takes care of controlling it afterwards. vanilla is more complex and takes a lot more code, so making sense of these demos will be a bit harder but they contain everything you need.
I presume you want to move each monkey head independently using the mouse.
Here is another example that uses the drag controls with cannonjs.
Also, note that you are using quite an old version of my boilerplate so I’ve recreated a similar example to what you forked that uses a newer version of threejs, webpack, and cannon-es.
Also note that ConvexPolyhedrons are CPU intensive and never work vey well if you want performant collisions. Instead you will get better performance if you manually create a collision shape from simple primitives such as CANNON.sphere’s. My version linked above uses a compound shape of spheres.
This means that many more monkeys can be loaded into the scene.
hey Mr , thank you for replay i will try to add mouse move controle on it , i am thankful for your effort
hey Mr , thank you for replay i will try to add mouse move controle on it , i am thankful for your effort
@seanwasere Hey Mr , how did you know the right values on
monkeyBody.addShape(new CANNON.Sphere(0.3), new CANNON.Vec3(0, 0, 0)) // head,
monkeyBody.addShape(new CANNON.Sphere(0.01), new CANNON.Vec3(0, -0.97, 0.46)) // chin,
monkeyBody.addShape(new CANNON.Sphere(0.05), new CANNON.Vec3(-1.36, 0.29, -0.5)) //left ear
monkeyBody.addShape(new CANNON.Sphere(0.05), new CANNON.Vec3(1.36, 0.29, -0.5)) //right ear
if i have another glb model how i can draw the physic shape like you do ??
i will be thankful if i can know
I estimated using blender. Note how each sphere shape I added to the main monkeyBody has a size, and a position.
For your model, its much simpler. I got something quite close by using trial and error
edited example : blue-waterfall-fsmhs - CodeSandbox
thank you so much
@seanwasere Hey Mr , sorry if i asking a lot but there is some thing i stuck on it. as i mentioned before i try to make a gltf model move with mouse with physics animation and i get your example as a reference but there is a strange behave happen here
why the performance was very bad ?
is there some thing wrong , i think i work in right way
sorry if i asking a lot but there is some thing i stuck on it. as i mentioned before i try to make a gltf model move with mouse with physics animation and i get your example as a reference but there is a strange behave happen here
why the performance was very bad ?
is there some thing wrong , i think i work in right way
if any one have an idea i will be so thankful
you’ve added intersects to the example I edited for you. My example allowed you to move the objects with your mouse. This worked and performance was ok.
working example : blue-waterfall-fsmhs - CodeSandbox
Now you’ve added some intersect logic in the animation loop, but you are applying it indiscriminately to all the objects in the scene and hoping that it will do what you want. Its as if you don’t really know what intersects actually does but hoping it reads your mind.
Try to recreate a new demo from scratch, containing one object only that does what you want. Delete everything in the code that you don’t need. Then try to achieve it using two objects, and then add more objects gradually until you have what you need. It seems you are editing my example without yet understanding what it was doing.
You are alright , i did it but there is some lag (animation is not smooth)
https://codesandbox.io/s/youthful-hooks-gp1y2?file=/src/client/client.ts i recreate every thing thank you for your advice but there is some lag