three.js TrackballControls 介绍与使用

在三维场景中，用户通过鼠标的移动来控制摄像机的视角是一种常见的交互方式。Three.js提供了 TrackballControls 类来实现这一功能，使得开发者能够轻松地实现摄像机视角的旋转、缩放和平移等操作。
TrackballControls 是一个控制器，它允许用户通过拖放鼠标来控制摄像机的方向和距离。这个控制器基于一个称为 "跟踪球"（trackball）的概念，即使用三维空间中的球体来表示用户的鼠标移动。当用户拖动鼠标时，控制器会根据鼠标的移动计算出相应的摄像机旋转和平移操作。
TrackballControls 的使用非常简单。首先，创建一个 TrackballControls 实例并将其与场景中的摄像机关联起来。然后，在渲染循环中调用 TrackballControls 实例的 update() 方法来更新摄像机的视角。
以下是使用 TrackballControls 的基本示例代码：
```javascript
// 创建场景和渲染器
var scene = new THREE.Scene();
type var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建 TrackballControls 实例并将其与摄像机关联起来
var controls = new THREE.TrackballControls(camera, scene);
// 渲染循环中调用 update() 方法来更新摄像机的视角
function animate() {
requestAnimationFrame(animate);
camera.matrixWorldNeedsUpdate = true;
camera.position.z -= 0.01;
controls.update();
drawScene();
}
animate();
```
在上面的示例中，我们创建了一个 TrackballControls 实例并将其与摄像机关联起来。然后，在渲染循环中调用 update() 方法来更新摄像机的视角。同时，我们还更新了摄像机的 z 轴位置以便于观察到摄像机视角的变化。
TrackballControls 还提供了一些其他的配置选项，如启用/禁用鼠标滚轮缩放、启用/禁用键盘控制等。这些选项可以通过 TrackballControls 的构造函数参数进行设置。例如：
```javascript
var controls = new THREE.TrackballControls(camera, scene, { enableDamping: true });
```
在上面的示例中，我们启用了阻尼（damping）功能来减缓摄像机视角的变化速度。
总之，TrackballControls 是一个非常强大的控制器，它使得开发者能够轻松地实现摄像机视角的旋转、缩放和平移等操作。通过简单的配置和调用 update() 方法，我们就可以快速地将 TrackballControls 集成到我们的三维场景中。