THREE.js碰撞检测问题：球体触边界后无法反向移动

云上老周

2026-8-14

问题解决：Three.js球体触边界后无法反向移动

问题原因

当前代码以ground_bounding.intersectsSphere(ball_bounding)作为移动的判断条件，当球体触碰到边界并部分超出后，intersectsSphere会返回false，此时即使姿态反向，也不会执行移动逻辑，导致球体无法回到边界内。

修复方案

我们需要先计算球体移动后的目标位置，再判断该位置是否在地面边界范围内，允许球体往边界内的方向移动（即使当前球体已经部分超出）。

修改后的render函数如下：

function render() {
  const x = posX.value / 20;
  const y = posY.value / 20;

  // 计算移动后的目标位置
  const targetX = ball.position.x + x;
  const targetY = ball.position.y - y;

  // 创建临时球体，模拟移动后的边界球
  const tempBallBounding = new THREE.Sphere(
    new THREE.Vector3(targetX, targetY, ball.position.z),
    ball_bounding.radius
  );

  // 判断目标位置的边界球是否与地面边界球相交（包含从外往内移动的情况）
  if (ground_bounding.intersectsSphere(tempBallBounding)) {
    ball.position.x = targetX;
    ball.position.y = targetY;
  } else {
    // 可选：将球体吸附到边界上，避免完全脱离地面
    const direction = new THREE.Vector3(targetX, targetY, 0).normalize();
    const maxPos = direction.multiplyScalar(ground_bounding.radius - ball_bounding.radius);
    ball.position.x = maxPos.x;
    ball.position.y = maxPos.y;
  }

  // 更新当前球体的边界球
  if (ball.geometry.boundingSphere !== null) {
    ball.geometry.computeBoundingSphere();
    ball_bounding.copy(ball.geometry.boundingSphere).applyMatrix4(ball.matrixWorld);
  }

  renderer.render(scene, camera);
}