Three.js 入门之旅（39）：拾取——如何通过鼠标选中物体？

2024-02-15 21:09:40

Three.js 是一个流行的 JavaScript 库，用于创建和显示 3D 图形。它可以轻松地用于创建交互式 3D 场景，并允许用户通过鼠标或其他输入设备与场景进行交互。

在本文中，我们将介绍如何使用 Three.js 实现鼠标选中物体功能。我们将首先创建一个简单的场景，然后添加一个立方体对象。接下来，我们将添加一个事件监听器，以监听鼠标移动事件。当鼠标悬停在立方体对象上时，我们将改变立方体的颜色，以示选中。

创建场景

首先，我们需要创建一个场景。场景是 Three.js 中用于保存所有对象和灯光的位置。我们可以使用 THREE.Scene() 函数来创建一个场景：

const scene = new THREE.Scene();

添加对象

接下来，我们需要将一个对象添加到场景中。在本例中，我们将添加一个立方体对象。我们可以使用 THREE.BoxGeometry() 函数来创建一个立方体几何体，并使用 THREE.Mesh() 函数来创建一个立方体对象：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

添加相机

为了能够看到场景，我们需要添加一个相机。相机是 Three.js 中用于查看场景的位置。我们可以使用 THREE.PerspectiveCamera() 函数来创建一个透视相机：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

添加渲染器

接下来，我们需要添加一个渲染器。渲染器是 Three.js 中用于将场景渲染到画布上的组件。我们可以使用 THREE.WebGLRenderer() 函数来创建一个 WebGL 渲染器：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加事件监听器

现在，我们需要添加一个事件监听器，以监听鼠标移动事件。当鼠标悬停在立方体对象上时，我们将改变立方体的颜色，以示选中。我们可以使用 addEventListener() 函数来添加事件监听器：

renderer.domElement.addEventListener('mousemove', (event) => {
  // 获取鼠标在画布上的位置
  const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

  // 创建一个射线投射器
  const raycaster = new THREE.Raycaster();

  // 设置射线投射器的起点和方向
  const raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);

  // 执行射线投射
  const intersects = raycaster.intersectObjects(scene.children);

  // 如果射线投射器击中了立方体对象，则改变立方体的颜色
  if (intersects.length > 0) {
    cube.material.color.set(0xff0000);
  } else {
    cube.material.color.set(0x00ff00);
  }
});