Threejs内置控制器(controls)简介

1.设备朝向控制器(DeviceOrientationControls)

该控制器可以使得摄像机依据设备的朝向(手机陀螺仪)来进行调整。

let controls = new THREE.DeviceOrientationControls( camera );
function animate() { controls.update(); }

2.飞行控制器(FlyControls)

飞行模拟控制器，用键盘和鼠标控制摄像机的移动。

操控	效果
按住鼠标左键和中键	向前移动
按住鼠标右键	向后移动
移动鼠标	向四周看
W	向前移动
S	向后移动
A	向左移动
D	向右移动
R	向上移动
F	向下移动
G	向左翻滚
E	向右翻滚
Q	向左翻滚
上、下、左、右方向键	向上、下、左、右看

let controls = new THREE.FlyControls( camera );
controls.domElement = renderer.domElement;	//注意正确设置domElement属性
controls.movementSpeed = 1000;				//移动速度
controls.rollSpeed = Math.PI / 24;			//翻滚速度
controls.autoForward = false;				//自动向前移动
controls.dragToLook = true;					//鼠标拖动查看
function animate() { controls.update(); }

3.地图控制器(MapControls)

如果查看类似地图模型或者不希望用户对模型进行反转的时候可以使用这个控件。

操控	效果
鼠标左键	平移
鼠标右键	旋转和改变极地角度
鼠标滑轮	缩放

let controls = new THREE.MapControls( camera, renderer.domElement );
//焦点目标
this.target = new THREE.Vector3();
//可以推拉进出多远（仅限透视照相机）
controls.minDistance = 100;
controls.maxDistance = 500;
//放大和缩小的距离（仅限正交照相机）
controls.minZoom = 0;
controls.maxZoom = Infinity;
//垂直方向俯视仰视范围（必须在[ 0, Math.PI ]之间）
controls.minPolarAngle = 0; 
controls.maxPolarAngle = Math.PI; 
//水平方向环视范围（必须在[ - Math.PI, Math.PI ]之间）
controls.minAzimuthAngle = - Math.PI;
controls.maxAzimuthAngle = Math.PI;
//启用惯性阻尼以及阻尼参数
controls.enableDamping = false;
controls.dampingFactor = 0.25;
//启用缩放以及缩放速度
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
//启用旋转以及旋转速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
//启用平移以及平移速度
controls.enablePan = true;
controls.panSpeed = 1.0;
//在屏幕空间中平移
controls.screenSpacePanning = false; 
//按键触发平移的速度
controls.keyPanSpeed = 7.0;
//自动旋转以及旋转速度
controls.autoRotate = false;
controls.autoRotateSpeed = 2.0; 
//仅当启用惯性阻尼或者自动旋转时需要
function animate() { controls.update(); }

4.轨道控制器(OrbitControls)

该控件可以在特定的场景中模拟轨道中的卫星，可以用于控制场景中的对象围绕场景中心旋转和平移。

操控	效果
鼠标左键	围绕场景中心旋转
鼠标右键	平移
鼠标滑轮或鼠标中键	缩放
上、下、左、右方向键	向上、下、左、右平移

let controls = new THREE.OrbitControls( camera, renderer.domElement );
/*
...相关属性设置与MapControls类似
*/
//仅当启用惯性阻尼或者自动旋转时需要
function animate() { controls.update(); }

5.指针锁定控制器(PointerLockControls)

该控制器使用场景中渲染的DOM元素来锁定鼠标。可以为3D游戏提供基本的功能。具体用法参考官方案例：PointerLockControls官方案例

6.轨迹球控制器(TrackballControls)

最常用的控制器，你可以使用鼠标（或控制球）来轻松移动、平移和缩放场景。

操控	效果
鼠标左键	旋转和翻滚
鼠标右键	平移
鼠标滑轮或鼠标中键	缩放

let controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;				//旋转速度
controls.zoomSpeed = 1.2;				//缩放速度
controls.panSpeed = 0.8;				//平移速度
controls.noZoom = false;				//禁止缩放
controls.noPan = false;					//禁止平移
controls.staticMoving = true;			//移动惯性
controls.dynamicDampingFactor = 0.3;	//动态阻尼系数，即灵敏度
//当调整窗口尺寸时，改变轨迹球尺寸
function onWindowResize() { controls.handleResize(); }
function animate() { controls.update(); }

7.变换控制器(TransformControls)

该控制器简单实现类似3dMax软件中对物体的相关操作。具体用法参考官方案例：TransformControls官方案例

操控	效果
Q	切换物体空间和世界空间
W 配合鼠标	平移
E 配合鼠标	旋转
R 配合鼠标	缩放
+	放大坐标系
-	缩小坐标系
长按Ctrl 配合鼠标	以格为单位平移
X	隐藏X轴
Y	隐藏Y轴
Z	隐藏Z轴
空格	启用或者禁用控制器