threejs 相机控件OrbitControls旋转缩放拖拽限制

threejs yekong

比如一个展示一个三维场景,你不希望鼠标右键拖动会产生一个平移效果。

相机控件OrbitControls有很多属性,我们可以通过属性设置来进行相关操作。

禁止右键拖拽

可以通过设置相机空间对象OrbitControls的.enablePan 属性,
查看OrbitControls源码可以看到.enablePan属性的默认值是true。

var controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
// 禁止右键拖拽

这时候我们就不能再进行右键拖拽了。

禁止缩放

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

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

禁止旋转

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

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

当前内容为观看threejs视频 WebGL/Three.js前端高薪3D可视化 课程-OrbitControls旋转缩放限制-实践的学习笔记

喜欢