探索 three.js 的鼠标交互：使用 Raycaster 拾取物体

前端

2023-09-07 23:27:17

three.js 鼠标交互指南：Raycaster 拾取物体

简介

three.js 鼠标交互是增强 3D 场景用户体验的关键。Raycaster 类是实现此交互的关键。本文将提供一个分步指南，说明如何使用 Raycaster 拾取场景中的物体。

理解 Raycaster 原理

Raycaster 是一种光线投射工具，可以投射一条射线，从相机位置到鼠标点击的屏幕位置。如果射线与任何场景物体相交，则 Raycaster 会返回相交点的信息。

设置 Raycaster

首先，创建一个 Raycaster 对象：

const raycaster = new THREE.Raycaster();

然后，将鼠标位置作为参数传递给 Raycaster 的 setFromCamera 方法。这将设置射线的起点和方向：

raycaster.setFromCamera(mousePosition, camera);

拾取物体

现在，我们可以使用 Raycaster 的 intersectObjects 方法来检测与射线相交的物体：

const intersects = raycaster.intersectObjects(scene.children, true);

该方法返回一个相交对象数组，每个对象包含相交点、相交面和其他有关相交的信息。

处理相交事件

一旦你确定了相交对象，就可以触发事件或执行其他操作。例如，你可以更改对象的材质颜色或位置：

if (intersects.length > 0) {
  const intersectedObject = intersects[0].object;
  intersectedObject.material.color.set(0xff0000);
}

示例代码

以下是一个完整的示例代码，演示如何使用 Raycaster 拾取物体：

const canvas = document.querySelector('canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({canvas});

const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({color: 0x00ff00}));
scene.add(cube);

camera.position.z = 5;

renderer.setSize(window.innerWidth, window.innerHeight);

const raycaster = new THREE.Raycaster();

function animate() {
  requestAnimationFrame(animate);

  raycaster.setFromCamera(mousePosition, camera);

  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    const intersectedObject = intersects[0].object;
    intersectedObject.material.color.set(0xff0000);
  }

  renderer.render(scene, camera);
}

animate();