Matarialize中文社区-Three.js 的 Raycaster

Three.js 的 Raycaster

少陵野老 2024-10-20 13:42:13

126 Raycaster 专栏

在三维场景中，光线投射（Raycasting）是用于检测鼠标与三维物体交互的重要技术。Three.js 提供了 Raycaster 类来处理光线投射，使得我们可以检测到光线与物体的碰撞，并实现诸如鼠标拾取、物体选择、碰撞检测等功能。

本文将详细介绍 Raycaster 的使用方法，涵盖其所有的属性和方法，并通过实例结合其他组件展示如何使用 Raycaster 进行复杂的交互操作。

1. 什么是 `Raycaster`

Raycaster 是一种工具，用于投射一条射线（Ray）并检测与三维空间中的物体的交互。它通常用于以下场景：

鼠标点击或悬停在三维物体上时，检测哪个物体被选中了。
物体之间的碰撞检测。

2. `Raycaster` 的核心属性

2.1 `Raycaster.ray`

ray 属性表示射线，它由 THREE.Ray 对象表示，包含射线的起点和方向。

const raycaster = new THREE.Raycaster();
console.log(raycaster.ray); // 查看射线的起点和方向

2.2 `Raycaster.near` 和 `Raycaster.far`

near 和 far 定义了射线的投射范围。任何位于 near 和 far 之外的物体都不会被检测到。

raycaster.near = 1;
raycaster.far = 100;

3. `Raycaster` 的方法

3.1 `set()`

set() 方法用于定义射线的起点和方向。

raycaster.set(origin, direction);

origin 是射线的起点，通常是鼠标点击的平面位置投影到 3D 空间中的点。
direction 是射线的方向，通常通过鼠标点击的平面坐标和相机的位置计算得出。

3.2 `intersectObject()`

intersectObject() 方法用于检测光线与一个物体的交互。它返回与该物体的所有相交信息（如果有）。

const intersects = raycaster.intersectObject(object);
if (intersects.length > 0) {
  console.log('Object was intersected');
}

3.3 `intersectObjects()`

intersectObjects() 方法用于检测光线与多个物体的交互，返回所有相交的信息。

const intersects = raycaster.intersectObjects(objectsArray);
intersects.forEach((intersect) => {
  console.log(intersect.object.name); // 打印与射线相交的物体名称
});

4. 实例：通过鼠标点击选择立方体

接下来，我们通过一个具体的示例展示如何使用 Raycaster 实现鼠标点击选择三维物体的功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Raycaster Example</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
  <script>
    // 场景
    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();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.name = 'Green Cube';
    scene.add(cube);
  
    // 光线投射器
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
  
    // 监听鼠标点击事件
    window.addEventListener('click', onMouseClick, false);
  
    function onMouseClick(event) {
      // 将鼠标坐标转换为 -1 到 1 的范围
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    
      // 通过相机和鼠标位置更新射线
      raycaster.setFromCamera(mouse, camera);
    
      // 计算物体与射线的交集
      const intersects = raycaster.intersectObject(cube);
    
      if (intersects.length > 0) {
        console.log('Cube clicked:', intersects[0].object.name);
        intersects[0].object.material.color.set(0xff0000); // 将立方体变为红色
      }
    }
  
    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
  
    animate();
  </script>
</body>
</html>

在这个例子中，我们创建了一个立方体，并监听鼠标点击事件。通过 Raycaster 计算射线与物体的交集，当点击到立方体时，立方体的颜色将变为红色。

5. 高级用法：多个物体的交互

Raycaster 不仅能与单个物体交互，还可以检测多个物体。下面我们展示如何在多个物体之间进行光线投射并对不同的物体做出不同的响应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Multiple Raycaster Example</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
  <script>
    // 场景
    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 cubes = [];
    const geometry = new THREE.BoxGeometry();
  
    for (let i = 0; i < 5; i++) {
      const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
      const cube = new THREE.Mesh(geometry, material);
      cube.position.set(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
      cube.name = `Cube ${i + 1}`;
      cubes.push(cube);
      scene.add(cube);
    }
  
    // 光线投射器
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
  
    // 监听鼠标点击事件
    window.addEventListener('click', onMouseClick, false);
  
    function onMouseClick(event) {
      // 将鼠标坐标转换为 -1 到 1 的范围
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    
      // 通过相机和鼠标位置更新射线
      raycaster.setFromCamera(mouse, camera);
    
      // 计算物体与射线的交集
      const intersects = raycaster.intersectObjects(cubes);
    
      // 如果有物体被点击
      if (intersects.length > 0) {
        const clickedCube = intersects[0].object;
        clickedCube.material.color.set(0xff0000); // 将被点击的立方体变为红色
        console.log('Clicked on:', clickedCube.name);
      }
    }
  
    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
  
    animate();
  </script>
</body>
</html>

在这个例子中，我们创建了多个立方体，并通过 Raycaster 检测鼠标点击时与哪个立方体相交。如果相交，则将该立方体的颜色设置为红色。

6. 与其他组件结合使用

Raycaster 通

常与 OrbitControls 等控件配合使用，以实现复杂的用户交互。下面是一个结合 OrbitControls 的示例。

// 创建OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 在animate函数中更新controls
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新相机控制
  renderer.render(scene, camera);
}

animate();