在 Three.js 中将物理与导入的模型结合使用

如何解决在 Three.js 中将物理与导入的模型结合使用

我正在学习 Three.js。我正在尝试使用 Cannon-es 将圆柱体连接到我在搅拌机中创建的玫瑰网格上，使其落入花瓶中。我的问题是当我尝试更新玫瑰的位置以等于身体的位置时，它指出玫瑰没有位置元素，但我在用 gltf-loader 加载它后记录它并且它有一个位置，所以我想我只是没有正确编码。这是我试过的，谢谢你的帮助！

createRose 函数是从 dat.gui 按钮调用的，当底部的刻度函数中的代码被注释时，玫瑰和 Cannon 主体被创建得很好。

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,pz)
      rose.rotation.set(rx,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
      }
   })
}

这是一个叫做tick的函数，它被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)
 }

有关更多信息，我正在关注 Bruno SIMON 的付费教程，并且从他的物理课中修改了许多代码，我正在为此努力。我完全可以使用不同的格式或其他附加组件而不是 Cannon.js，无论如何都可以！