09 Controls相机控制器

我们在第七节的时候讲解过了相机的相关，也制作了一个简易的相机控制器。 但是，在正常的项目当中，大家的需求都是不一样的，又或者碰上中途需求的改变，对相机的操作需求也不可能和我们做的简易版的相机控制器就可以满足的。而且，造轮子的前提是：当前的框架以及插件已经无法满足自身的需求时，才可进行造轮子，要不然，项目的进度会被拖的很慢，甚至有可能因此而错过红利期。好在Three.js官方和同道中的朋友们给我们提供很多相关的插件，我们可以根据需求来引入相关的插件来实现需求，这一节我们就来看一下从官方案例中的相机控制器。
我们从官网下载的代码包里面可以发现有很多的相机控制器，文件夹地址：/examples/js/controls/，里面的文件插件都是和控制相机和控制模型相关的插件，我们罗列一下相关插件：

• DeviceOrientationControls 陀螺仪相机控制器，实现移动端陀螺仪控制相机。
• DragControls 控制鼠标拖拽移动物体的功能。
• EditorControls 实现相机的旋转，缩放，平移功能，相对于OrbitControls的功能差不少，不建议使用
• FirstPersonControls 第一视角相机控制器
• FlyControls 飞行相机控制器
• OrbitControls 轨道控制器
• OrthographicTrackballControls 正交轨迹球控制器 正交相机使用的轨迹球控制器
• TrackballControls 轨迹球控制器 透视相机使用的轨迹球控制器
• PointerLockControls 鼠标锁定相机控制器
• TransformControls 控制模型位置，缩放，旋转的控制器
• VRControls 实现VR双屏相机控制器

由于篇幅有限，上面的控制器也不会一一介绍，我们就重点介绍三种常用的相机控制器。

OrbitControls

OrbitControls控制器是我们常用的相机控制器，它的功能丰富，使用简单为大多数项目的使用插件。

使用操作

使用OrbitControls控制器我们可以实现旋转，缩放，平移等功能，下面列一下使用OrbitControls控制器如何操作：

• 围绕焦点旋转：使用鼠标左键拖拽
• 放大和缩小：使用鼠标中键按住拖拽或者鼠标中键滑动滚轮
• 平移相机：按住鼠标右键拖拽或者使用键盘的上下左右键

控制器引入

在项目中使用OrbitControls控制器分为下面几步：

• 首先，将插件文件引入到项目中：

<script src="../js/OrbitControls.js"></script>

• 然后，通过相机和渲染器的dom对象实例化相机：

control = new THREE.OrbitControls(camera, renderer.domElement);

• 最后，在每一帧渲染里面更新相机的位置：

function render() {
    control.update();
    renderer.render(scene, camera);
}

这样，我们就实现了一个最简单的OrbitControls控制器使用。

属性和方法

OrbitControls控制器最大的优势就是就丰富的配置项供我们修改来实现项目中的需求，接下来我们查看一下有哪些属性配置：

属性	描述
enabled	是否开启当前控制器，默认值是true，如果设置为false，将无法通过操作修改相机
target	控制器的焦点位置，是一个THREE.Vector3对象，默认是(0, 0, 0)
minDistance	相机距离焦点的最近距离 默认值是0 此属性适用于透视相机 PerspectiveCamera
maxDistance	相机距离焦点的最远距离 默认值是Infinity无限远 此属性适用于透视相机 PerspectiveCamera
minZoom	相机距离焦点的最近距离 默认值是0 此属性适用于正交相机 OrthographicCamera
maxZoom	相机距离焦点的最远距离 默认值是Infinity无限远 此属性适用于正交相机 OrthographicCamera
minPolarAngle	相机位置和焦点与焦点和最上方组成的最小夹角限制 默认值是0
maxPolarAngle	相机位置和焦点与焦点和最上方组成的最大夹角限制 默认值是Math.PI 也就是180角度
minAzimuthAngle	当前相机沿水平方向顺时针旋转的弧度，默认值是- Infinity
maxAzimuthAngle	当前相机沿水平方向逆时针旋转的弧度，默认值是Infinity
enableDamping	是否开启拖拽惯性移动，即拖拽停止相机会有缓慢停止的距离移动，默认值是false
dampingFactor	拖拽惯性移动的阻力，默认值是0.25
enableZoom	是否开启缩放操作，默认值是true
zoomSpeed	缩放速度，默认值是1.0
enableRotate	是否开启相机绕焦点旋转操作，默认值是true
rotateSpeed	旋转速度，默认值是1.0
enablePan	是否开启相机平移操作，默认值是true
panSpeed	平移的速度，默认值是1.0
screenSpacePanning	修改相机平移的方向，默认值是false，即沿x轴正负方向和y轴正负方向移动。可选值是true，可以修改为沿x轴正负方向和y轴正负方向移动。
keyPanSpeed	键盘上下左右键移动相机的速度，默认值是7.0
autoRotate	当前相机是否自动旋转，默认值是false，不自动旋转
autoRotateSpeed	自动旋转的速度，默认值是2.0，即渲染满60帧的情况下30秒旋转360度
enableKeys	是否开启键盘控制先机平移，默认值是true

OrbitControls控制器的属性配置介绍完了，我们看看OrbitControls控制器还有那些方法：

update()

OrbitControls控制器更新相机的方法，需要在每一帧里面调用。

reset()

重置方法，相机回到初始位置。

dispose()

销毁当前实例化的OrbitControls控制器。

change回调

我们还可以监听相机改变回调，如果控制器修改了相机，将会产生一个回调：

controls.addEventListener('change', function(){
    console.log("相机动了！");
});

最后，我附上OrbitControls控制器案例 点击这里 ，也可以从这里获取案例源码：点击这里

TrackballControls

TrackballControls控制器比OrbitControls控制器更自由，TrackballControls控制器能够沿焦点进行球形旋转，没有死角，但比OrbitControls控制器少一些相关的功能配置。如何选择使用它们还是看项目需求，接下来还是先看如何操作。

注意，透视相机和正交相机使用的不是一个插件，此插件为透视相机使用，如果是正交相机请使用OrthographicTrackballControls

使用操作

使用TrackballControls控制器我们可以实现旋转，缩放，平移等功能，下面列一下使用TrackballControls控制器如何操作：

• 围绕焦点旋转：使用鼠标左键拖拽
• 放大和缩小：使用鼠标中键按住拖拽或者鼠标中键滑动滚轮
• 平移相机：按住鼠标右键拖拽或者使用键盘的上下左右键

TrackballControls控制器和OrbitControls控制器的操作相同，没什么可说的。

控制器引入

在项目中使用TrackballControls控制器和OrbitControls控制器的方法雷同，分为下面几步：

• 首先，将插件文件引入到项目中：

<script src="../js/TrackballControls.js"></script>

• 然后，通过相机和渲染器的dom对象实例化相机：

control = new THREE.TrackballControls(camera, renderer.domElement);

• 最后，在每一帧渲染里面更新相机的位置：

function render() {
    control.update();
    renderer.render(scene, camera);
}

属性和方法

属性	描述
enabled	是否开启当前控制器，默认值是true，如果设置为false，将无法通过操作修改相机
rotateSpeed	控制相机旋转速度，默认值是3.0
zoomSpeed	控制相机缩放速度，默认值是1.2
panSpeed	控制相机平移速度，默认值是0.3
noRotate	关闭相机旋转 默认false开启
noZoom	关闭相机缩放 默认false开启
noPan	关闭相机移动 默认false开启
staticMoving	关闭拖拽惯性移动 默认值false开启
dynamicDampingFactor	拖拽惯性移动阻力，默认值是0.2
minDistance	相机距离焦点的最近距离 默认值是0
maxDistance	相机距离焦点的最远距离 默认值是Infinity无限远

虽然TrackballControls控制器相对于OrbitControls控制器属性相对少一些，但是相关的功能还是全面的。TrackballControls控制器的方法也和OrbitControls控制器的方法雷同：

update()

TrackballControls控制器更新相机的方法，需要在每一帧里面调用。

reset()

重置方法，相机回到初始位置。

dispose()

销毁当前实例化的TrackballControls控制器。

change回调

我们还可以监听相机改变回调，如果控制器修改了相机，将会产生一个回调：

controls.addEventListener('change', function(){
    console.log("相机动了！");
});

最后，我附上TrackballControls控制器案例 点击这里 ，也可以从这里获取案例源码：点击这里

DeviceOrientationControls

最后，我们介绍的这个控制器只兼容含有陀螺仪的移动端。DeviceOrientationControls控制器就是可以通过获取设备的陀螺仪状态来控制相机的朝向，如果你还对陀螺仪不了解，请点击查看这里，在这里不多说。
由于DeviceOrientationControls的内容配置较少，我们先看一下案例：
使用手机打开网址：点击这里 ，然后手机朝下然后移动，你会发现能够通过手机的转向来控制相机的朝向，是不是很神奇。接下来我们看一下如何引入到项目中：

• 首先，将插件文件引入到项目中：

<script src="../js/DeviceOrientationControls.js"></script>

• 然后，通过相机对象实例化相机：

control = new THREE.DeviceOrientationControls(camera);

• 最后，在每一帧渲染里面更新相机的位置：

function render() {
    control.update();
    renderer.render(scene, camera);
}

这样我们就完成了对DeviceOrientationControls控制器的添加。

DeviceOrientationControls控制器相关的配置也很少，只有一个enabled属性，设置为true则控制器会更新相机的位置，反之，设置false将无法更新相机位置。

还有一个方法就是销毁当前控制器的方法：

controls.dispose(); //销毁当前控制器

最后，附上源码，地址：点击这里