Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解

// 引入Three.js的核心文件
import * as THREE from 'three';
 
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个3D对象，例如一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建一个raycaster实例并设置光线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
 
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(scene.children);
 
  for (const intersect of intersects) {
    // 对交集的物体进行操作，例如改变颜色
    intersect.object.material.color.set(0xff0000);
    // 渲染场景
    renderer.render(scene, camera);
  }
}
 
// 监听鼠标点击事件
window.addEventListener('click', onMouseClick, false);
 
// 渲染初始场景
renderer.render(scene, camera);

这段代码展示了如何在Three.js中使用Raycaster来处理鼠标点击事件。当用户点击屏幕时，代码会计算出从摄像机发出的光线，并检查这条光线与场景中的哪些物体相交。如果发生了碰撞，代码会改变碰撞的物体的颜色。这是一个基本的示例，但在实际应用中，可以在intersects数组中找到的物体信息可以用来触发更复杂的交互效果。