1、相机控件OrbitControls.js
通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景,而是相机的参数,通过前面的学习应该知道,相机的位置角度不同,同一个场景的渲染效果是不一样,比如一个相机绕着一个场景旋转,就像场景旋转一样。
如果你想深入了解相机控制器OrbitControls的每一个功能,OrbitControls是如何对Three.js正投影相机和透视投影相机对象进行封装的,可以阅读Three.js\examples\js\controls目录下的OrbitControls.js文件。
调用OrbitControls的时候需要引入OrbitControls.js文件。
旋转缩放平移
如果你想实现一个场景旋转缩放平移的效果,直接把相机对象camera作为OrbitControls构造函数的参数就可以。
鼠标操作:通过拖动鼠标左键可以720旋转展示三维场景,通过拖动鼠标右键可以平移三维场景,通过上下滚动鼠标中键可以缩放三维场景。
//创建控件对象 相机对象camera作为参数 // 控件可以监听鼠标的变化,改变相机对象的属性varcontrols =newTHREE.OrbitControls(camera);
禁止旋转平移缩放(.enablePan属性)
比如一个展示一个三维场景,比如一辆轿车产品,你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象OrbitControls的.enablePan属性,查看OrbitControls源码可以看到.enablePan属性的默认值是true。
controls.enablePan =false;//禁止右键拖拽
通过.enableZoom属性可以控制是否允许鼠标中键缩放场景,.enableZoom属性默认值true。
controls.enableZoom =false;//禁止缩放
通过.enableRotate属性可以控制是否允许鼠标左键旋转场景,.enableRotate属性默认值true。
controls.enableRotate =false;//禁止旋转
设置缩放范围
在实际应用中,你想控制一个产品或一个房间户型的缩放范围,可以通过相机空间OrbitControls的.minZoom和.maxZoom属性实现
// 缩放范围controls.minZoom =0.5;controls.maxZoom =2;
设置旋转范围
展示一个三维场景,你想控制360度旋转范围,比如一辆轿车,你不希望用户看到轿车的底盘,你可以通过设置相机的旋转范围属性来实现。
通过.minPolarAngle和.maxPolarAngle属性控制上下360度的旋转范围,通过.minAzimuthAngle和.maxAzimuthAngle属性控制左右360度的旋转范围,上下左右两个360度旋转也就是常说的720旋转展示。
// 上下旋转范围controls.minPolarAngle =0;
controls.maxPolarAngle =Math.PI;
// 左右旋转范围controls.minAzimuthAngle = -Math.PI * (100/180);
controls.maxAzimuthAngle =Math.PI * (100/180);
相机空间作用的窗口范围
通过OrbitControls创建一个相机控件对象的时候,默认情况下,在浏览器的窗口整个内容区域body发生鼠标事件都会旋转、平移或缩放三维场景。在实际应用中如果你需要控制OrbitControls的作用范围,你需要通过OrbitControls构造函数的参数2设置。
Threejs渲染结果所在的Canvas画布,通过通过渲染器的renderer.domElement属性可以访问。
// 在id为webgl的元素中插入canva