在Three.js中使用导入模型时，如何运用物理学？

Question

我正在学习Three.js。我试图使用Cannon-es将一个圆柱体附加到我在Blender中创建的玫瑰网格上，让它掉入花瓶中。我的问题是，当我尝试更新玫瑰的位置以使其等于物体的位置时，它会说玫瑰没有位置元素，但是我在用gltf-loader加载后记录它时它确实有一个位置，所以我认为我的代码只是写得不正确。这是我尝试过的，谢谢您的帮助！

从dat.gui按钮调用createRose函数，当底部tick函数中的代码被注释时，玫瑰和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, 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
      }
   })
}

这是在名为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无法实现，我完全可以使用其他格式或插件来完成这个项目。

- Cody Luketic

---

请问您能分享一下您的 Rose.glb 模型吗？ - Bilal

Answer 1

问题在于 gltfLoader 函数是异步的，当你尝试将 rose 对象添加到 objectsToUpdate 数组时，rose 对象还没有被创建，因此是 undefined。

你应该将 Cannon.js body 的创建移动到 gltfLoader 的回调函数中，在 rose 对象被创建之后。像这样：

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
            }
         })
      })
}

- Raghav Kukreti