threejs 视角移动

### Three.js 实现相机视角移动

在 Three.js 中，实现相机视角的移动可以通过多种方式完成。一种常见的做法是利用 `THREE.OrbitControls` 控件来允许用户通过鼠标或触摸板轻松调整摄像机的角度和位置[^2]。

下面是一段简单的示例代码，展示了如何配置并应用 OrbitControls 来控制相机：

// 初始化场景、相机以及渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加OrbitControls控件以便于操控相机
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);

// 设置一些默认参数
controls.enableDamping = true;     // 启用阻尼效果使旋转更自然
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;

function animate() {
    requestAnimationFrame(animate);
    
    // 更新控制器状态
    controls.update();

    renderer.render(scene, camera);
}

animate();

此代码片段创建了一个基本的 Three.js 场景，并引入了 `OrbitControls` 插件以提供直观的方式让用户改变视图角度。当页面加载完成后，用户可以使用鼠标左键拖动来绕着目标物体转动视角；滚轮可用来缩放远近；右键则能平移整个视野范围。

对于更加复杂的交互需求，比如第一人称视角导航，则可能需要用到其他类型的控制器如 `FirstPersonControls` 或者自定义逻辑处理用户的输入事件[^3]。