AFrame与ThreeJS快速移动点与盒子帧间碰撞检测实现问题

你遇到的帧间穿模问题是典型的离散碰撞检测缺陷，直接用基于路径段的连续碰撞检测即可解决，全程不需要引入物理引擎，仅需一次射线检测，性能开销极低。

核心逻辑 #

不再只检测单帧结束的子弹位置，而是将子弹两帧之间的完整移动路径作为检测范围：

• 每一帧开始时先记录子弹当前位置（上一帧结束的位置）
• 计算出本帧结束时的子弹目标位置
• 以起始位置为射线起点、移动方向为射线方向、帧移动距离为射线长度，对目标盒子做相交检测
• 若存在相交结果，第一个交点就是精准的碰撞位置

修改后的代码示例 #

// 新增临时变量存储上一帧位置，建议放在组件初始化位置，不要每次tick重复创建
_lastBulletPosition: THREE.Vector3 = new THREE.Vector3();
_ray: THREE.Raycaster = new THREE.Raycaster();

tick(time: number, delta: number): void {
  // 记录当前帧开始时的子弹位置
  this._lastBulletPosition.copy(this.el.object3D.position);

  // 原有速度计算逻辑不变
  this.speed = this.currentAcceleration * .01 * delta;
  if (this.speed > this.data.maxSpeed) {
    this.speed = this.data.maxSpeed;
  }
  const moveDistance = this.speed;
  const newBulletPosition = this._lastBulletPosition.clone().add(this.direction.clone().multiplyScalar(moveDistance));

  // 碰撞检测：覆盖整段移动路径
  const collisionPoint = this._detectCollision(this._lastBulletPosition, this.direction, moveDistance, this.targets);
  if (collisionPoint) {
    console.log("found!");
    this.resetBullet();
    this.el.emit("collide", {
      coordinates: collisionPoint // 直接用射线检测返回的精准碰撞点
    });
    return;
  }

  // 无碰撞则更新子弹位置
  this.el.object3D.position.copy(newBulletPosition);
}

// 重构后的碰撞检测方法
_detectCollision(startPos: THREE.Vector3, direction: THREE.Vector3, maxDistance: number, targets: THREE.Object3D[]): THREE.Vector3 | null {
  // 复用Raycaster实例，避免重复创建开销
  this._ray.set(startPos, direction.normalize());
  // 限制射线最大长度为帧移动距离，避免检测到路径外的物体
  const intersects = this._ray.intersectObjects(targets, true, false);
  
  // 只要有相交结果，第一个就是最近的碰撞点
  return intersects.length > 0 ? intersects[0].point : null;
}

优化说明 #

• 复用Raycaster、Vector3等实例，避免每一帧创建新对象触发GC
• 射线增加maxDistance限制，既保证不会检测到帧移动路径外的无关物体，也减少了射线检测的计算量
• 直接使用射线返回的交点坐标作为爆炸位置，和物理引擎返回的碰撞位置精度一致
• 如果子弹本身有体积，只需要给射线检测增加一个和子弹半径匹配的偏移量即可，不需要额外逻辑

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