如何基于Cannon.js与Three.js实现FPS跑酷移动脚本？

核心问题拆解 #

新手开发这类脚本时，常见问题集中在：物理刚体参数配置不合理、移动逻辑与物理引擎同步脱节、跑酷动作缺少物理反馈、视角与移动耦合混乱。以下是针对性的优化方案和完整实现示例。

关键优化点 #

• 刚体配置优化：使用胶囊体（Capsule）作为玩家碰撞形状，贴合FPS角色体型；开启固定旋转避免物理碰撞导致角色失控；调整阻尼参数平衡移动流畅度与真实感。
• 移动输入处理：通过施加速度而非直接修改位置的方式驱动移动，结合地面检测（Raycast）限制跳跃/加速仅在地面生效，避免空中漂移。
• 跑酷动作实现：跳跃用冲量（Impulse）触发，滑墙时检测墙面碰撞并施加横向力，冲刺时临时提升速度并添加阻尼恢复。
• 视角同步：将相机挂载在玩家模型节点上，用四元数（Quaternion）同步刚体旋转，确保视角与移动完全匹配。

完整实现示例 #

1. 物理世界与玩家刚体初始化

// 初始化Cannon.js物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.SAPBroadphase(world);
world.solver.iterations = 10; // 提高物理精度，减少穿模

// 玩家刚体配置（胶囊体更适合FPS角色）
const playerBody = new CANNON.Body({
  mass: 80,
  shape: new CANNON.Capsule(1, 1.5), // 半径1，高度1.5
  position: new CANNON.Vec3(0, 5, 0),
  linearDamping: 0.9, // 地面移动阻尼，避免无限滑动
  angularDamping: 0.99,
  fixedRotation: true, // 锁定旋转，用相机控制视角
});
world.addBody(playerBody);

2. 输入处理与移动逻辑

// 跟踪键盘输入状态
const keys = { w: false, a: false, s: false, d: false, space: false, shift: false };

document.addEventListener('keydown', e => {
  const key = e.key.toLowerCase();
  if (keys.hasOwnProperty(key)) keys[key] = true;
});
document.addEventListener('keyup', e => {
  const key = e.key.toLowerCase();
  if (keys.hasOwnProperty(key)) keys[key] = false;
});

// 每一帧更新玩家移动
function updatePlayerMovement() {
  const normalSpeed = 6;
  const sprintSpeed = 12;
  const jumpForce = 500;

  // 地面检测：从玩家底部发射射线
  const rayOrigin = playerBody.position.clone();
  rayOrigin.y -= 1.5; // 胶囊体底部位置
  const ray = new CANNON.Ray(rayOrigin, new CANNON.Vec3(0, -1, 0));
  const rayResult = ray.intersectWorld(world);
  const isGrounded = rayResult && rayResult.distance <= 0.1;

  // 基于相机视角计算移动方向
  const cameraDir = new THREE.Vector3();
  camera.getWorldDirection(cameraDir);
  cameraDir.y = 0;
  cameraDir.normalize();

  const cameraRight = new THREE.Vector3();
  cameraRight.copy(cameraDir).cross(new THREE.Vector3(0, 1, 0)).normalize();

  const moveDir = new THREE.Vector3();
  if (keys.w) moveDir.add(cameraDir);
  if (keys.s) moveDir.sub(cameraDir);
  if (keys.a) moveDir.sub(cameraRight);
  if (keys.d) moveDir.add(cameraRight);
  moveDir.normalize();

  // 应用移动速度
  const currentSpeed = keys.shift ? sprintSpeed : normalSpeed;
  if (moveDir.length() > 0 && isGrounded) {
    playerBody.velocity.x = moveDir.x * currentSpeed;
    playerBody.velocity.z = moveDir.z * currentSpeed;
  }

  // 跳跃逻辑
  if (keys.space && isGrounded) {
    playerBody.applyImpulse(new CANNON.Vec3(0, jumpForce, 0), playerBody.position);
    keys.space = false; // 防止连续跳跃
  }
}

3. Three.js与Cannon.js同步

// 每一帧同步刚体位置到Three.js模型
function syncPhysicsToMesh() {
  playerMesh.position.copy(playerBody.position);
  playerMesh.quaternion.copy(playerBody.quaternion);
}

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  world.step(1/60); // 固定60帧物理步长
  updatePlayerMovement();
  syncPhysicsToMesh();
  renderer.render(scene, camera);
}
animate();

常见坑规避 #

• 禁止直接修改playerBody.position，会破坏物理引擎的模拟逻辑，必须通过velocity或applyImpulse控制移动。
• 开启fixedRotation: true避免角色因碰撞旋转，视角控制完全交给相机。
• 调整solver.iterations参数（建议8-12），减少角色穿模、卡顿等问题。
• 地面检测的射线起点和距离要匹配胶囊体尺寸，避免误判落地状态。

内容的提问来源于stack exchange，提问作者Insert Name Here