Sunday, 19 February 2023

Using Physics with an Imported Model in Three.js

I am learning Three.js. I am trying to use Cannon-es to attach a cylinder body to a rose mesh I created in blender allowing it to fall into a vase. My issue is when I try to update the rose's position to equal the body's position it states that the rose does not have a position element, but I log it after loading it with gltf-loader and it has a position so I think I am just not coding it correctly. Here is what I tried, Thank you for any help!

The createRose function is called from a dat.gui button, the rose and Cannon body are created fine when the code in the tick function at the bottom is commented.

const objectsToUpdate = []

const createRose = (px, py, pz, rx, ry, rz) =>{
   gltfLoader.load('/models/pieces/Rose.glb',
      (gltf) =>{
      let rose = gltf.scene.children[0]
      rose.position.set(px, py, pz)
      rose.rotation.set(rx, ry, rz)
      scene.add(rose)
   })

   // Cannon.js body
   const shape = new CANNON.Cylinder(2, 1, 5, 20)
   const body = new CANNON.Body({
      mass: 1,
      position: new CANNON.Vec3(0, 3, 0),
      shape: shape,
      material: defaultMaterial
   })
   world.addBody(body)

   // Save in objects to update
   objectsToUpdate.push({ 
      roseAndBody:{
         rose: rose,
         body: body
      }
   })
}

This is inside a function called tick that is updated with window.requestAnimationFrame(tick)

for(const object of objectsToUpdate){
    object.roseAndBody.rose.position.copy(object.roseAndBody.body.position)
    object.roseAndBody.rose.quaternion.copy(object.roseAndBody.body.quaternion)
 }

For more information, I am following the paid tutorial by Bruno SIMON and a lot of the code is modified from his physics lesson that I am trying to make work for this. I am perfectly okay with using a different format or another add-on instead of Cannon.js, whatever will make this work!



from Using Physics with an Imported Model in Three.js

No comments:

Post a Comment