three.js 射线碰撞检测

在 Three.js 中，你可以使用射线（Raycaster）来进行碰撞检测。射线是一个具有起点和方向的线段，你可以投射它来检测它与场景中的物体是否相交。下面是一个实现射线碰撞检测的简单示例代码：

首先，你需要创建一个射线对象，指定其起点和方向。例如：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 设置鼠标的坐标范围为[-1, 1]
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

// 在每一帧中更新射线的起点和方向
function animate() {
  raycaster.setFromCamera(mouse, camera);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

接下来，在场景中的物体上添加可选的碰撞检测标记（例如，设置物体的 `userData` 属性或添加自定义属性）。例如，你可以给立方体对象添加 `userData` 属性：

const cube = new THREE.Mesh(geometry, material);
cube.userData.isInteractable = true;
scene.add(cube);

然后，在适当的时机（例如鼠标点击事件）调用射线的 `intersectObjects` 方法来检测射线与场景中的物体是否相交。例如：

function onMouseClick() {
  // 计算射线与场景中的所有物体的相交点
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 获取第一个相交物体
    const targetObject = intersects[0].object;

    if (targetObject.userData.isInteractable) {
      // 针对相交物体进行操作
      // 例如，你可以改变物体的颜色或执行其他交互操作
      targetObject.material.color.set(0xff0000);
    }
  }
}

这只是一个简单的示例，你可以根据自己的需求进行适当的修改和扩展。射线碰撞检测在 Three.js 中非常强大且灵活，你可以使用它来实现各种交互和游戏功能。