Three.js光线投射(Raycaster)原理与3D交互实现

1. ThreeJS光线投射(Raycaster)核心原理剖析

光线投射(Raycasting)是3D图形学中一项基础而重要的技术，它通过模拟光线在虚拟空间中的传播路径，来检测与场景中物体的交点。在Three.js中，Raycaster类封装了这一功能，使其成为实现3D交互的核心工具。

1.1 数学基础与工作原理

光线投射的数学本质是射线与几何体的求交计算。在Three.js中，这个过程主要涉及三个关键坐标系转换：

1. 屏幕坐标系：鼠标事件的clientX/clientY值，原点在左上角
2. 标准化设备坐标(NDC)：通过公式转换到[-1,1]范围
3. 世界坐标系：通过相机参数将2D坐标转换为3D空间中的射线

转换公式详解：

javascript复制mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -((event.clientY / window.innerHeight) * 2 - 1); 

这个转换过程将像素坐标映射到WebGL的裁剪空间，为后续的射线计算奠定基础。

1.2 Raycaster的核心方法

javascript复制const raycaster = new THREE.Raycaster();

创建Raycaster实例后，有两个关键方法需要掌握：

1. setFromCamera()：根据相机和鼠标位置构建射线

   • 内部实现：通过相机投影矩阵逆变换得到射线方向
   • 性能提示：避免在动画循环中重复创建新实例

2. intersectObjects()：检测射线与物体的交点

   • 参数优化：第一个参数应传入需要检测的物体数组，而非整个场景
   • 返回结构：包含distance、point、face等关键信息的数组

重要提示：相交检测的性能与场景复杂度直接相关，对于大型场景需要特别优化

2. 完整交互实现流程

2.1 基础场景搭建

在实现交互前，需要建立完整的Three.js场景体系：

javascript复制// 场景图结构
Scene
├─ Camera (PerspectiveCamera)
├─ Lights (可选)
└─ Interactive Objects (如Mesh数组)

相机设置要点：

javascript复制const camera = new THREE.PerspectiveCamera(
  75, // 视野角度(FOV)
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);
camera.position.z = 5;

2.2 交互物体准备

创建可交互物体的最佳实践：

javascript复制const cubes = [];
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMa