如何使用three.js来处理用户的交互事件？

Three.js 提供了名为 OrbitControls 的交互控制器，可以处理用户的交互事件，例如鼠标点击、拖动等。以下是一个使用 OrbitControls 处理用户交互事件的示例代码：

// 创建场景、相机和渲染器  
let scene = new THREE.Scene();  
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
let renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  
  
// 创建交互控制器  
let controls = new THREE.OrbitControls(camera, renderer.domElement);  
controls.addEventListener('change', function() { renderer.render(scene, camera); }); // 每次交互事件后重绘场景  
  
// 创建几何体  
let geometry = new THREE.BoxGeometry(1, 1, 1);  
let material = new THREE.MeshBasicMaterial({color: 0x00ff00});  
let cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  
  
// 将相机放置在几何体的位置  
camera.position.z = 2;  
camera.position.y = 1;  
camera.lookAt(cube.position);  
  
// 渲染场景  
function animate() {  
  requestAnimationFrame(animate);  
  controls.update(); // 更新交互控制器状态  
  renderer.render(scene, camera); // 渲染场景  
}  
animate();

在上述代码中，我们首先创建了一个场景、相机和渲染器，并将渲染器的 DOM 元素传递给 OrbitControls 的构造函数。然后，我们创建了一个立方体，并将其添加到场景中。接着，我们将相机放置在立方体的上方，使其朝向立方体的位置。最后，我们定义了一个 animate 函数，在其中更新交互控制器状态并渲染场景。在每次渲染时，我们都会调用 controls.update() 来更新交互控制器状态，以便响应用户的交互事件。