Threejs-约束相机控件的旋转、缩放和平移

轨道控制器（OrbitControls）约束相机控件的旋转、缩放和平移

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

操作限制

当设置为false时，控制器将不会响应用户的操作。默认值为true。

controls.enabled = true

平移限制

enablePan启用或禁用摄像机平移，默认为true。

controls.enablePan = true

旋转限制

启用或禁用摄像机水平或垂直旋转。默认值为true

controls.enableRotate = false;

缩放限制

启用或禁用摄像机的缩放

controls.enableZoom = false;

设置旋转范围

展示一个三维场景，你想控制用户能够看到的角度范围，比如一辆轿车，你不希望用户看到轿车的底盘，你可以通过设置相机的旋转范围属性来实现。

通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围，通过.minAzimuthAngle和.maxAzimuthAngle属性控制左右的旋转范围。

// 上下旋转最大值设置
controls.maxPolarAngle = Math.PI/2;

设置缩放范围

在实际应用中，你想控制一个产品的缩放范围，对于透视投影相机情况，控制缩放通过相机空间OrbitControls的.minDistance和.maxDistance属性实现，控制缩放范围的原理就是控制相机与目标观察点的距离来实现。

//透视投影相机：相机距离目标观察点距离越远显示越小，距离越近显示越大

//相机距离观察目标点极小距离——模型最大状态
controls.minDistance = 200;
//相机距离观察目标点极大距离——模型最小状态
controls.maxDistance = 500;

缩放范围具体指

约束浏览器缩放范围很简单，如果直接去写出来相机具体距离范围，一般人的CPU不够用，所以可以采用可视化的方式，可视化缩放3D场景，然后浏览器控制台实时计算相机此时位置距离目标观察点的距离。

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render); 
  // console.log(camera.position);
  //相机目标观察点是坐标原点，所以position向量可以表示相机位置到目标的向量，计算向量的长度即可
  console.log(camera.position.length());
}