Three.js+Cannon.js调整球体大小后重力失效问题求助

问题现象 #

调整Cannon物理球体半径到1及以上时，所有球体停止运动，且视觉尺寸未正确匹配物理尺寸。

核心问题根源 #

1. 视觉与物理尺寸未统一：Three.js球体几何半径与Cannon物理球体半径未同步，导致碰撞检测逻辑与视觉表现脱节。
2. 球体初始位置过度重叠：100个球体集中在极小范围内，半径增大后完全重叠，物理引擎处理极端重叠时会触发物体休眠，停止运动。
3. 物理边界位置错误：边界位置与相机视口范围不匹配，导致碰撞区域偏离可视范围，同时加剧了重叠问题的影响。
4. 物理步长不稳定：未使用固定时间步长，帧率波动时易引发物理计算异常。

分步修复方案 #

1. 统一视觉与物理球体尺寸 #

确保Three.js的球体几何半径和Cannon的物理球体半径一致：

// Three.js球体半径设为1
const ballGeometry = new THREE.SphereGeometry(1, 32, 32);
// Cannon物理球体同步设为1
const ballBody = new CANNON.Body({
    mass: 1,
    position: new CANNON.Vec3(ballMesh.position.x, ballMesh.position.y, 0),
    shape: new CANNON.Sphere(1),
});

2. 扩大初始位置范围，避免球体重叠 #

将球体初始生成的坐标范围扩大，减少重叠概率：

// 从原有的[-5,5]扩大到[-25,25]，分散球体位置
ballMesh.position.set(Math.random() * 50 - 25, Math.random() * 50 - 25, 0);

3. 修正物理边界位置，匹配相机视口 #

边界位置需与OrthographicCamera的视口范围一致，避免碰撞区域偏移：

// 左边界：匹配相机左视口
createPlane(-window.innerWidth/2, 0, 0, 0, Math.PI / 2, 0);
// 右边界：匹配相机右视口
createPlane(window.innerWidth/2, 0, 0, 0, -Math.PI / 2, 0);

4. 使用固定时间步长稳定物理模拟 #

替换原有的step调用，加入固定步长计算，避免帧率波动影响：

let lastTime = 0;
const animate = (time) => {
  requestAnimationFrame(animate);
  const deltaTime = (time - lastTime) / 1000;
  lastTime = time;
  // 固定步长1/60秒，最多补3帧防止卡顿
  physicsWorld.step(1 / 60, deltaTime, 3);

  balls.forEach((ball, index) => {
    const body = ballBodies[index];
    ball.position.copy(body.position);
  });

  renderer.render(scene, camera);
};
animate();

可选优化：添加光照提升视觉效果 #

将MeshBasicMaterial替换为受光照影响的材质，同时添加光源：

// 在useEffect内、创建球体前添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

// 球体材质替换
const ballMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });

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