threejs相机控件使用记录

---

前言

threejs提供了很多摄像机控件，提供这些控件可以操作场景中的摄像机的移动、旋转等，实现交互动画效果，全部的控件在threejs发布的包中都已封装，本文记录常用相机控件的使用场景。

---

控件列表

常用的相机控件如下所示

名称	描述
轨迹球控制器（TrackBallControls）	使用鼠标/滑轮控制相机球来移动、平移、缩放场景
第一人称控制器（FirstPersonControls）	类似第一人称射击类游戏，键盘控制移动，鼠标控制转向
飞行控制器（FlyControls）	飞行模拟器，通过键盘和鼠标控制摄像机运动
轨道控制器（OrbitControls）	用来模拟轨道视角，可以使用键盘鼠标操作相机

除了使用控件，相机本身可以通过修改position属性变换位置，通过lookAt()方法设置朝向

轨迹球控制器（TrackBallControls）

引入依赖

  <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>

创建控制器，将其绑定至相机上并设置属性

  var trackballControls = new THREE.TrackballControls(camera); // 将相机控件绑定至相机
  trackballControls.rotateSpeed = 1.0; // 旋转速率
  trackballControls.zoomSpeed = 1.0;  // 缩放速率
  trackballControls.panSpeed = 1.0;   // 移动速率

在render循环中更新相机

  var clock = new THREE.Clock();
  
  render();
  function render() {
    stats.update();
    trackballControls.update(clock.getDelta()); // 在每帧时间更新相机位置
    requestAnimationFrame(render);
    renderer.render(scene, camera)
  }   
}

操作方法

操作	效果
鼠标左键拖动	相机旋转翻滚
鼠标右键拖动	相机平移
鼠标中键拖动	场景缩放
鼠标滚轮	场景缩放

效果

第一人称控制器（FirstPersonControls）

引入依赖

<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/FirstPersonControls.js"></script>

创建控制器，将其绑定至相机上并设置属性

  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; //默认在x轴的角度
  fpControls.lat = 120; //默认在y轴的角度

在render循环中更新相机

  var clock = new THREE.Clock();

  render();
  function render() {
    stats.update();
    fpControls.update(clock.getDelta());
    requestAnimationFrame(render);
    renderer.render(scene, camera)
  }  

操作方法

操作	效果
鼠标移动	控制方向
↑ ↓ ← →键	上下左右移动
W S A D 键	前后左右移动
R F Q键盘	向上 向下 停止移动

效果

飞行控制器（FlyControls）

引入依赖

<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/FlyControls.js"></script>

创建控制器，设置属性，绑定相机和元素

  var flyControls = new THREE.FlyControls(camera);
  flyControls.domElement = document.querySelector("webgl-output");
  flyControls.movementSpeed = 25; // 移动速率
  flyControls.rollSpeed = Math.PI / 24;  // 转动速率
  flyControls.autoForward = true; // 自动向前移动
  flyControls.dragToLook = false; // 允许拖拽

操作方法

操作	效果
鼠标左键、中键	向前移动
鼠标右键	向后移动
↑ ↓ ← →键	上下左右看
W S A D 键	前后左右移动
Q E	向左、向右翻转

效果

轨道控制器（OrbitControls）

引入依赖

<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/OrbitControls.js"></script>

创建控制器，将其绑定至相机上并设置属性

  var orbitControls = new THREE.OrbitControls(camera);
  orbitControls.autoRotate = true; // 自动旋转
  // controls.autoRotateSpeed  旋转速率

在render循环中更新相机

  var clock = new THREE.Clock();
  
  render();
  function render() {
    stats.update();
    orbitControls.update(clock.getDelta());
    requestAnimationFrame(render);
    renderer.render(scene, camera)
  }  

操作方法

操作	效果
鼠标左键拖动	相机绕场景中心旋转
鼠标中键拖动/ 滚动滑轮	场景缩放
鼠标右键拖动	相机平移
↑ ↓ ← →键	上下左右平移

效果

总结

控件列表
轨迹球控制器（TrackBallControls）
第一人称控制器（FirstPersonControls）
飞行控制器（FlyControls）
轨道控制器（OrbitControls）