在A-Frame中如何用Three.js DragControls与Ammo同步拖拽物体的物理与线框？

你的核心问题是：拖拽时直接修改了物体的Three.js变换属性，但未同步更新Ammo物理体的状态，且代码中错误引用了dynamic-body组件（实际使用的是ammo-body）。以下是修正方案：

关键修正点 #

• 替换组件引用：将代码中的components['dynamic-body']改为components['ammo-body']
• 拖拽过程同步物理体：实时将物体的位置/旋转同步给Ammo刚体，避免物理体停留在原地
• 正确传递拖拽速度：将拖拽结束时的局部速度转换为世界空间速度，再设置给物理体

完整修正代码 #

const draggable = document.querySelector('[click-drag]');
let isDragging = false;

draggable.addEventListener('dragstart', () => {
  // 暂停物理模拟
  draggable.components['ammo-body'].pause();
  isDragging = true;
});

// 监听拖拽过程，同步物理体位置与旋转
draggable.addEventListener('dragmove', () => {
  if (!isDragging) return;
  const mesh = draggable.object3D;
  const body = draggable.body;
  if (!body) return;
  
  // 获取物体世界空间的位置和旋转
  const worldPos = new THREE.Vector3();
  const worldQuat = new THREE.Quaternion();
  mesh.getWorldPosition(worldPos);
  mesh.getWorldQuaternion(worldQuat);
  
  // 同步到Ammo刚体
  const transform = new Ammo.btTransform();
  transform.setIdentity();
  transform.setOrigin(new Ammo.btVector3(worldPos.x, worldPos.y, worldPos.z));
  transform.setRotation(new Ammo.btQuaternion(worldQuat.x, worldQuat.y, worldQuat.z, worldQuat.w));
  body.setWorldTransform(transform);
});

draggable.addEventListener('dragend', (dragInfo) => {
  isDragging = false;
  const body = draggable.body;
  if (!body) return;
  
  // 恢复物理模拟
  draggable.components['ammo-body'].play();
  
  // 转换拖拽速度为世界空间速度并设置给刚体
  const velocity = dragInfo.detail.velocity;
  const mesh = draggable.object3D;
  const worldVel = new THREE.Vector3(velocity.x, velocity.y, velocity.z);
  worldVel.applyQuaternion(mesh.quaternion);
  
  body.setLinearVelocity(new Ammo.btVector3(worldVel.x, worldVel.y, worldVel.z));
});

额外注意事项 #

• 确认使用的click-drag组件支持dragmove事件，若使用第三方组件需验证事件触发逻辑
• 若拖拽无需旋转，可省略旋转同步代码，仅保留位置同步
• 测试时打开浏览器控制台，排查body为null的报错，确保ammo-body组件已正确初始化

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