three.js 轨道控制器的常用属性和初始化(OrbitControls)

1.认识轨道控制器

  控制器是three的外置包,通过引入,可以对模型进行鼠标的某些操作,例:拖放。旋转,放大。缩小。还有一些其他属性:比如模型的自转。

2.初始化控制器(常用属性详解)

首先引入外部包

初始化

        var controls = new THREE.OrbitControls(camera, renderer.domElement);//建立控制器
        controls.target = new THREE.Vector3(0, 0, 0);//设置控制器目的坐标
        controls.maxPolarAngle = (Math.PI / 4) * 3 //控制器垂直方向最大旋转角度(理解为逆时针旋转角度)
        controls.minPolarAngle = Math.PI / 4//控制器垂直方向最大小旋转角度(理解为顺时针旋转角度)
        controls.minDistance = 95; //限制视线最近距离
        controls.maxDistance = 130;//限制视线多远距离
        controls.enableDamping = true;  //是否开起控制器阻尼系数(理解为对旋转的阻力,系数越小阻力越小)
        controls.dampingFactor = 0.6;//设置阻尼系数(如果设置阻尼系数,这涉及到了模型的动态渲染所以在渲染器中需要一直调用.update()。调用update()的前提是需要建立一个时钟 如下)
        var clock = new THREE.Clock();

3.对于常用属性的补充和解析

.maxAzimuthAngle:水平角度的旋转限制(最大)

.minAzimuthAngle:水平角度的旋转限制(最小)   注:默认情况下是无限制的可以360度,角度的设置只支持math.PI形式

.key:键盘空间的设置  每次对模型的操作默认移动7像素(可设置)

controls.keys = { LEFT: 37, //left arrow

UP: 38, // up arrow

RIGHT: 39, // right arrow

BOTTOM: 40 // down arrow }

功能的禁用:默认为true,

                      .enabled 控制器的禁用,

                      .enableKeys  键盘控件的禁用,

                      .enableRotate  摄像机旋转的禁用(禁止鼠标对模型的旋转操作)

                      .enableZoom   禁用摄像机的缩放(禁止鼠标滚轮缩放功能)

                      .enablePan    禁止摄像机平移(鼠标右键对模型的拖拽禁用)

                      .autoRotate    禁止相机自转

控制器内置方法:方法监听的都是相机不是模型!!!!!!!

                     . getAzimuthalAngle () 获取当前水平角度

                     .getPolarAngle () 垂直角度

                     .saveState ()  保存当前控制器状态

                     .reset () 重置控制器保存的状态,就是saveState()事件保存的状态

附加:

控制器可以通过autoRotate() 实现模型的自传,这是通过摄像机的旋转实现的,相对的也可以使模型本身旋转。其他文章再概括。

你可能感兴趣的:(three.js,js,3d,vr,html)