three.js视角跟随鼠标

在three.js中，实现视角跟随鼠标的功能通常涉及到处理用户的输入事件和调整摄像机的位置。以下是一个简单的步骤：

1. 首先，你需要创建一个`OrbitControls`实例，它允许你控制场景的视角，包括平移、旋转和缩放。你可以通过以下代码引入并初始化它：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);

2. 接下来，将相机的`target`属性设置为场景中心或其他固定的点，以便初始位置不会随鼠标移动。

camera.position.set(0, 0, 5); // 设置相机位置
camera.target.set(0, 0, 0); // 设置目标点为原点

3. 然后，在渲染循环中启用控制更新：

function animate() {
    requestAnimationFrame(animate);

    // 更新控制
    controls.update();

    renderer.render(scene, camera);
}

animate();

4. 当鼠标移动时，`OrbitControls`会自动处理视角变化。如果需要精确地跟踪鼠标位置，可以监听鼠标事件并在回调函数中手动更新摄像机的位置，但是这通常是不必要的，因为`OrbitControls`已经为你做了大部分工作。

如果你想限制视角只在水平面上移动（例如，保持垂直方向不变），可以在控制类初始化时设置相应选项：

controls.enableDamping = true; // 添加阻尼效果，模拟真实世界的运动
controls.dampingFactor = 0.25;
controls.maxPolarAngle = Math.PI / 2; // 限制最大垂直角度