Threejs摄像机控件

摄像机控件描述

名称	描述
第一视角控制器（FirstPersonControls）	该控制器的行为类似第一视角射击游戏中的摄像机，使用键盘移动，使用鼠标移动
飞行控制器（FlyControls）	飞行模拟控制器，用键盘和鼠标控制摄像机的移动
翻滚控制器（RollControls）	该控制器是飞行控制器的简化版，允许绕着z轴旋转
轨迹球控制器（TrackBallControls）	最常用的控制器，可以使用鼠标或者控制球来移动，平移和缩放场景。如果你使用的是OrtographicCamera，可以使用OrtographicTrack Ballcontrols，它是这个摄像机类型专用的
轨道控制器（OrbitControls）	该控件可以在特定的场景中模拟轨道中的卫星，可以使用鼠标和键盘在场景中游走

轨迹球控制器（TrackBallControls）

1. 使用TrackBallControls控制器时，现在HTML页面引入对应的JavaScript文件

<script type="text/javascript" src="../assets/libs/three/controls/TrackballControls.js"></script>

2. 创建控制器，并绑定到摄像机上

var trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;    //旋转速度，默认值1.0
trackballControls.zoomSpedd = 1.0;	//缩放速度，默认值1.2
trackballControls.panSpeed = 1.0;	//平移速度，默认值是0.3

3. 摄像机的位置更新

var clock = new THREE.Clock();
function render(){
var delta = clock.getDelta();   //调用clock.getDelta()方法可以精确的计算出此次调用距离上次调用的时间间隔
trackballControls.update(delta); 	 //更新控制器，常被用在动画循环中。
requestAnimationFrame(render);
webGLRender.render(scene,camera);
}

飞行控制器（FlyControls）

1. 使用飞行控制器可以像飞行模拟器一样在场景中飞行
2. 首先需要在HTML页面中加载对于的JavaScript文件
3. 创建控制器并绑定到摄像机上

var flyControls = new THREE.FlyControls(camera);
flyControls.movementSpeed = 25;  //移动速度，默认为1。
flyControls.domElement = document.querySelector('#webgl-output'); 
//该 HTMLDOMElement 用于监听鼠标/触摸事件
flyControls.rollSpeed = Math.PI/24;  //旋转速度。默认为0.005
flyControls.autoForward = true;  //若该值设为true，初始变换后，摄像机将自动向前移动（且不会停止）默认为false
flyControls.dragToLook = false;  //若该值设为true，你将只能通过执行拖拽交互来环视四周。默认为false

4. 摄像机的位置更新

第一视角控制器（FirstPersonControls）

1. 通过第一视角控制器可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角，键盘用于控制移动角色
2. 同样先引入对应的JavaScript文件，然后创建控制器并绑定摄像机

var fpControls = new THREE.FirstPersonControls(camera);
fpControls.lookSpeed = 0.4;
fpControls.movementSpeed = 20;
fpControls.lookVertical = true;
fpControls.constrainVertical = true;
fpControls.verticalMin = 1.0;
fpControls.verticalMax = 2.0;
fpControls.lon = -150;
fpControls.lat = 120;

3. 摄像机的位置更新

轨道控制器（OrbitControls）

1. 轨道控制器可以用于控制场景中的对象围绕场景中心旋转和平移

// 在HTML中先引入对应的JavaScript文件
<script type="text/javaScript" asrc="../assets/libs/three/controls/OrbitControls">
</script>
...
// 创建控制器并绑定摄像机
var orbitControls = new THREE.OrbitControls(camera);
// 设置摄像机属性
orbitControls.autoRotate = true;
...
// 摄像机的位置更新
var clock = new THREE.Clock();
function render(){
  orbitControls.update(clock.getDelta());
}