在 Three.js 这个强大的 JavaScript 3D 库中，Raycaster是一个非常有用的工具，它允许我们通过光线投射来检测场景中的物体，这在许多交互性的 3D 应用中至关重要，比如点击选中 3D 物体、实现碰撞检测等功能。接下来，让我们深入探讨Raycaster的使用方法。
Raycaster 原理简介
Raycaster本质上是定义了一条从相机出发的射线。在 Three.js 场景中，我们可以利用这条射线去检测与场景中物体的相交情况。当我们在网页上执行点击操作时，Raycaster可以将屏幕上的二维坐标转化为三维空间中的射线，然后判断这条射线与哪些物体发生了碰撞。
Raycaster API 使用示例
假设我们已经创建了一个包含多个物体的 Three.js 场景，现在我们要实现点击选中物体的功能。
首先，我们需要引入 Three.js 库。可以通过 CDN 链接在 HTML 文件中引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
然后，在 JavaScript 文件中初始化场景、相机和渲染器：
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
接下来，创建一些物体并添加到场景中，这里以创建几个立方体为例：
// 创建几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
// 创建多个立方体并添加到场景
for (let i = 0; i < 5; i++) {
const cube = new THREE.Mesh(geometry, material);
cube.position.x = Math.random() * 4 - 2;
cube.position.y = Math.random() * 4 - 2;
cube.position.z = Math.random() * 4 - 2;
scene.add(cube);
}
关键的部分来了，使用Raycaster实现点击选中功能。我们需要监听鼠标点击事件，并在事件回调中使用Raycaster：
// 监听鼠标点击事件
document.addEventListener('click', onDocumentClick, false);
function onDocumentClick(event) {
// 创建Raycaster对象
const raycaster = new THREE.Raycaster();
// 将鼠标点击位置的屏幕坐标转换为Raycaster所需的标准化设备坐标
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// 设置Raycaster从相机发出的射线方向
raycaster.setFromCamera(mouse, camera);
// 检测射线与场景中物体的相交情况
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
const selectedObject = intersects[0].object;
console.log('选中的物体:', selectedObject);
// 这里可以对选中的物体进行一些操作，比如改变颜色
selectedObject.material.color.set(0xff0000);
}
}
在上述代码中，Raycaster通过setFromCamera方法设置了从相机出发，方向由鼠标点击位置确定的射线。然后，使用intersectObjects方法检测这条射线与场景中所有物体的相交情况。如果检测到相交，intersects数组会包含相交的信息，我们可以从中获取到被选中的物体，并对其进行相应的操作。
总结
通过Raycaster这个 API，我们能够为 Three.js 场景添加强大的交互功能。无论是简单的物体选中，还是复杂的碰撞检测，Raycaster都提供了高效且便捷的解决方案。希望通过本文的介绍和示例代码，大家能够熟练掌握Raycaster的使用，为自己的 3D 项目增添更多的交互性和趣味性。在实际应用中，还可以根据具体需求对代码进行优化和扩展，例如对不同类型的物体进行不同的处理，或者优化射线检测的性能等。
