ThreeJS 如何限制轨道控制？

在ThreeJS中，轨道控制（OrbitControls）是一种非常流行的方式，用于在场景中围绕特定对象进行摄像机的旋转、缩放和平移。要想限制轨道控制，可以通过调整其多个参数来实现，这些参数可以帮助我们定制用户的交互方式，以适应不同的使用场景。下面我将详细介绍几种常见的限制方法：

1. 限制旋转角度

OrbitControls 允许通过 minAzimuthAngle 和 maxAzimuthAngle 来限制水平方向的旋转角度，通过 minPolarAngle 和 maxPolarAngle 来限制垂直方向的旋转角度。

例如，如果我们想让摄像机只在对象的前面半圆进行旋转，我们可以设置：

javascript
controls.minAzimuthAngle = -Math.PI / 2;
controls.maxAzimuthAngle = Math.PI / 2;
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;

2. 限制缩放范围

通过设置 minDistance 和 maxDistance，可以限制用户缩放时摄像机距离目标点的最小和最大距离。这可以防止用户将摄像机缩放得过近或过远，影响视觉效果或操作体验。

例如，设置摄像机的缩放范围在10到1000单位之间：

javascript
controls.minDistance = 10;
controls.maxDistance = 1000;

3. 限制平移

在一些应用场景中，我们可能不希望用户平移摄像机，这时可以通过禁用平移功能来实现。

javascript
controls.enablePan = false;

示例应用场景

假设我们正在开发一个在线地球仪应用，用户可以浏览整个地球，但我们不希望用户将视角移动到地球的内部或太远的宇宙空间。我们可以这样设置轨道控制：

javascript
// 初始化摄像机和轨道控制
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// 限制摄像机的角度，只能在地球上方
controls.minPolarAngle = 0; // 垂直向下的角度为0
controls.maxPolarAngle = Math.PI; // 垂直向上的角度为π

// 设置摄像机距离地球的最小和最大距离
controls.minDistance = 10;
controls.maxDistance = 500;

// 禁用平移
controls.enablePan = false;

通过上述设置，我们有效地限制了用户的操作范围，确保了应用的使用体验和视觉效果。