ThreeJS教程:OrbitControls旋转缩放限制

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

OrbitControls旋转缩放限制

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

  • 1.9. 相机控件OrbitControls(opens new window)
  • 6.4. OrbitControls辅助设置相机参数(opens new window)

禁止右键平移.enablePan属性

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

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

禁止缩放或旋转

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

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

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

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

OrbitControls.target属性

相机控件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;

相机位置与目标观察点距离.getDistance()

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

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

可视化设置相机缩放范围

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

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

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;

上一篇:ThreeJS教程:管道漫游案例 (mvrlink.com)

下一篇:ThreeJS教程:相机控件MapControls (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号