three.js 鼠标交互

在 three.js 中实现鼠标交互需要借助于鼠标事件，例如鼠标移动、鼠标点击等。下面是一个简单的示例，展示如何在 three.js 场景中实现鼠标交互：

1. 创建场景、相机、渲染器等 three.js 常规组件。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

2. 创建一个立方体模型。

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

3. 监听鼠标移动事件，根据鼠标位置计算相机旋转角度。

let isDragging = false;
let previousMousePosition = {
  x: 0,
  y: 0
};

renderer.domElement.addEventListener('mousedown', e => {
  isDragging = true;
});

renderer.domElement.addEventListener('mousemove', e => {
  if (isDragging) {
    const { x, y } = e;
    const deltaMove = {
      x: x - previousMousePosition.x,
      y: y - previousMousePosition.y
    };
    const deltaRotationQuaternion = new THREE.Quaternion()
      .setFromEuler(new THREE.Euler(
        toRadians(deltaMove.y * 1),
        toRadians(deltaMove.x * 1),
        0,
        'XYZ'
      ));
    cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
  }
  previousMousePosition = { x: e.x, y: e.y };
});

renderer.domElement.addEventListener('mouseup', e => {
  isDragging = false;
});

4. 渲染场景。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

需要注意的是，这只是一个简单的示例，实际应用中可能需要更复杂的鼠标交互逻辑，例如拖拽、点击、双击等。可以根据实际需求来添加相应的鼠标事件监听器，并编写相应的交互逻辑。