如何让Cannon.js刚体复制相机组中Three.js Object3D的位置与四元数？

为什么cubeBody2.addBody(swordBody)会崩溃？ #

用addBody给刚体添加子刚体时，若子刚体质量配置不当（比如动态父刚体搭配非零质量子刚体却无约束）、重复添加刚体，或是物理引擎计算出现循环引用，都可能导致NaN值或无限循环，最终引发画布崩溃。

可行实现方案 #

方案一：帧同步模型变换到刚体（适合完全跟随相机的场景）

不需要父子刚体，直接在渲染循环中把剑模型的世界空间位置和四元数同步给剑刚体：

// 确保在渲染循环内执行
function update() {
  // 更新剑模型的世界矩阵，获取最新变换
  sword.updateMatrixWorld();
  const worldPos = sword.getWorldPosition(new THREE.Vector3());
  const worldQuat = sword.getWorldQuaternion(new THREE.Quaternion());

  // 同步到Cannon刚体
  swordBody.position.copy(worldPos);
  swordBody.quaternion.copy(worldQuat);

  // 若不需要剑刚体受物理驱动，设置为静态
  swordBody.type = CANNON.Body.STATIC;

  // 执行物理步进与渲染
  world.step(1/60);
  renderer.render(scene, camera);
  requestAnimationFrame(update);
}

方案二：用约束绑定刚体（保留物理交互特性）

如果希望剑刚体能响应碰撞（比如被格挡时轻微晃动），可以用约束替代addBody，将剑刚体绑定到玩家刚体：

// 创建点对点约束，绑定玩家刚体与剑刚体
const constraint = new CANNON.PointToPointConstraint(
  cubeBody2, // 玩家碰撞盒刚体
  new CANNON.Vec3(0.5, -0.3, 0), // 玩家刚体上的绑定点（相对位置，需根据实际调整）
  swordBody, // 剑刚体
  new CANNON.Vec3(0, 0, -0.5) // 剑刚体上的绑定点（相对位置，需根据实际调整）
);
world.addConstraint(constraint);

// 渲染循环中同步相机旋转到剑刚体，保证视角跟随
function update() {
  swordBody.quaternion.copy(camera.quaternion);
  world.step(1/60);
  renderer.render(scene, camera);
  requestAnimationFrame(update);
}

内容的提问来源于stack exchange，提问作者Blaze Branham