I've been diving into the world of Three.js and I'm currently grappling with incorporating Cannon-es to attach a cylinder body to a rose mesh created in Blender, allowing it to gracefully fall into a vase. The challenge arises when attempting to update the position of the rose to match that of the body - an error claims that the rose lacks a position element, despite confirming its existence through logging after loading with gltf-loader. It seems like a coding oversight on my end. Here's what I've attempted so far. Any assistance would be greatly appreciated!
The createRose function is triggered by a dat.gui button, successfully creating both the rose and Cannon body, as long as the code within the tick function at the end is disabled.
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 section resides within a function named tick, which is called using 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)
}
To provide context, I am following Bruno SIMON's paid tutorial and have customized a lot of the code based on his physics lesson. I'm open to exploring alternative formats or add-ons besides Cannon.js, anything that can help me achieve the desired outcome!