Three.js

ThreeJS教程：OrbitControls旋转缩放限制

May 30, 2023 • 4 min read

推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

OrbitControls旋转缩放限制

课程中经常会用到相机控件OrbitControls的不同功能,本节课就会大家补充新的知识点，比如控制缩放的最大最小范围，比如限制旋转的角度范围，比如禁止平移。

比如一个展示一个三维场景，你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象OrbitControls的.enablePan属性，查看OrbitControls源码可以看到.enablePan属性的默认值是true。

controls.enablePan = false; //禁止右键拖拽

通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。

controls.enableZoom = false;//禁止缩放

通过.enableRotate属性可以控制是否允许鼠标左键旋转场景，.enableRotate属性默认值true。

controls.enableRotate = false; //禁止旋转

相机控件OrbitControls.target属性对应的就是相机的.lookAt()观察目标。

执行controls.update();,相机控件内部会执行camera.lookAt(controls.target)。

// controls.target默认值是坐标原点
controls.target.set(x, y, z);
//update()函数内会执行camera.lookAt(x, y, z)
controls.update();

在实际应用中，透视投影相机的规则是远小近大，相机距离目标观察点距离越远，目标模型显示越小，距离越近显示越大

前面给大家讲解过，对于透视投影相机而言，OrbitControls缩放，本质上就是改变相机的位置属性.position。

这就是说如果你想控制缩放范围，就是约束相机位置.position的变化范围，OrbitControls提供了两个属性.minDistance和.maxDistance可以帮助你实现。

.minDistance表示相机位置.position和相机目标观察点controls.target的最小距离。

//相机位置与观察目标点最小值
controls.minDistance = 200;

.maxDistance表示相机位置.position和相机目标观察点controls.target的最大距离。

//相机位置与观察目标点最大值
controls.maxDistance = 500;

对于正投影相机对象OrthographicCamera，可以通过相机控件OrbitControls的.minZoom和.maxZoom属性实现

// 缩放范围
controls.minZoom = 0.5;
controls.maxZoom = 2;

controls.getDistance()可以计算出来相机位置.position和相机目标观察点controls.target的距离。

//相机位置与目标观察点距离
const dis = controls.getDistance();
console.log('dis',dis);

如果你直接凭感觉设置minDistance和maxDistance，不太好把握具体范围，这时候通过.getDistance()辅助解决。

在canvas画布上，你用鼠标缩放三维场景，这时候会改变透视投影相机位置，那么相机与目标观察点的距离也会改变，这时候可以通过.getDistance()计算出来此刻相机与目标观察点的距离，用于设置minDistance和maxDistance。

controls.addEventListener('change',function(){
    //相机位置与目标观察点距离
    const dis = controls.getDistance();
    console.log('dis',dis);
})

展示一个三维场景，你想控制360度旋转范围，比如一个工厂，你不希望用户看到工厂的底部，你可以通过设置相机的旋转范围属性来实现。

通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围，默认从0到180度，默认情况下0度，XOZ平面平行canvas画布，y轴垂直指向屏幕外，90度时候，渲染结果y轴竖直向上，180度，XOZ平面平行canvas画布，y轴垂直指向屏幕内。

// 上下旋转范围
controls.minPolarAngle = 0;//默认值0
controls.maxPolarAngle = Math.PI;//默认值Math.PI

.maxPolarAngle属性设置为90度，这样不能看到工厂模型底部

controls.maxPolarAngle = Math.PI/2;

通过.minAzimuthAngle和.maxAzimuthAngle属性控制左右的旋转范围。

// 左右旋转范围
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;