three.js导入模型与cannon.js物理联动移动幅度小且反向问题求助

核心排查方向 #

1. 模型与物理体缩放不匹配 #

Cannon.js的物理形状（Shape）没有独立缩放属性，必须在创建时直接指定对应尺寸。如果Three.js模型做了缩放（比如mesh.scale.set(0.1,0.1,0.1)），但物理体仍用原始尺寸创建，会导致同步后模型移动幅度被缩放抵消，甚至出现反向偏移。

修复示例：

// 假设导入模型的缩放比例为0.1
const modelScale = 0.1;
// 创建物理形状时直接应用模型缩放
const vehicleShape = new Cannon.Box(new Cannon.Vec3(1 * modelScale, 0.5 * modelScale, 2 * modelScale));
const vehicleBody = new Cannon.Body({ mass: 100, shape: vehicleShape });
world.addBody(vehicleBody);

// 模型保持固定缩放，物理体尺寸提前匹配
modelMesh.scale.set(modelScale, modelScale, modelScale);

2. 坐标系方向冲突 #

Three.js与Cannon.js默认都是Y轴向上，但部分导入模型可能采用Z轴向上的建模坐标系，直接同步会导致移动方向反向。

修复示例：

• 方法1：修正模型坐标系

// 加载模型后旋转，将Z轴向上转为Y轴向上
modelMesh.rotation.x = Math.PI / 2;

• 方法2：同步时转换坐标轴

function syncModelAndBody() {
  modelMesh.position.x = vehicleBody.position.x;
  modelMesh.position.y = vehicleBody.position.z; // 交换Y/Z轴
  modelMesh.position.z = -vehicleBody.position.y;
  // 同步旋转同理
  modelMesh.quaternion.copy(vehicleBody.quaternion);
  modelMesh.rotation.x += Math.PI / 2;
}

3. 物理体参数错误 #

• 若物理体mass设为0（静态物体），施加的力不会产生位移；mass过大则需要更大的力才能移动，导致幅度小。
• 施加力的方向与预期相反，比如用body.applyForce(new Cannon.Vec3(-100,0,0))导致反向移动。

修复示例：

// 给载具设置合适质量
vehicleBody.mass = 100;
// 施加正确方向的力（比如沿Z轴向前）
vehicleBody.applyForce(new Cannon.Vec3(0, 0, 500));

4. 同步逻辑顺序错误 #

必须在物理世界更新后同步模型位置，且是将物理体的状态赋值给模型，而非反过来。如果先同步再更新物理世界，会导致位置滞后或异常。

正确同步时机：

function animate() {
  requestAnimationFrame(animate);
  // 先更新物理世界
  world.step(1/60);
  // 再同步模型与物理体
  syncModelAndBody();
  renderer.render(scene, camera);
}

简化验证代码 #

如果问题仍存在，可通过以下最小代码排查：

// 初始化物理世界
const world = new Cannon.World();
world.gravity.set(0, -9.82, 0);

// 创建简单立方体模型（代替导入模型）
const geometry = new THREE.BoxGeometry(2,1,4);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const modelMesh = new THREE.Mesh(geometry, material);
scene.add(modelMesh);

// 创建匹配尺寸的物理体
const vehicleShape = new Cannon.Box(new Cannon.Vec3(1,0.5,2));
const vehicleBody = new Cannon.Body({mass:100, shape:vehicleShape});
world.addBody(vehicleBody);

// 同步函数
function syncModelAndBody() {
  modelMesh.position.copy(vehicleBody.position);
  modelMesh.quaternion.copy(vehicleBody.quaternion);
}

// 施加测试力
setInterval(() => {
  vehicleBody.applyForce(new Cannon.Vec3(0,0,1000));
}, 1000);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  world.step(1/60);
  syncModelAndBody();
  renderer.render(scene, camera);
}
animate();

如果这段代码正常运行，说明问题出在你导入的模型缩放/坐标系，或是自定义物理参数上。

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