THREEJS 笔记4 控制器篇

threeJS 支持多种控制器，每个控制都必须加载对应的控制器插件后才能使用。控制器不仅能使用鼠标移动镜头，还能通过按键进行操控。

但是控制器要生效必须在renderer中使用代码更新才能使用。

OrbitControls 轨道控制器

以舞台中心为中点，左右拖动屏幕会让镜头围绕着中心点旋转，镜头会之中看着中心点。

// 声明轨道控制器
controlsfly = new THREE.OrbitControls(camera, renderer.domElement);
controlsfly.enableDamping = true; // an animation loop is required when either //damping or auto-rotation are enabled
controlsfly.dampingFactor = 0.25;
controlsfly.screenSpacePanning = false;

// 距离中心点最小距离和最大距离
controls.minDistance = 50;
controlsfly.maxDistance = 100

// 视角的最大仰角和俯角
controlsfly.minPolarAngle = Math.PI / 12;
controlsfly.maxPolarAngle = Math.PI / 2.5;

// 自动旋转和速度
controls.autoRotate = true;
controlsfly.autoRotateSpeed = 0.5

controls.maxPolarAngle = Math.PI;

renderer中代码

var delta = clock.getDelta();
controls.update(delta); //更新时间,所以控制器需要是全局，至少是可被外部函数调用

飞行控制器

像第一人称射击游戏一样通过晃动鼠标移动镜头。asdw也能进行操作。

flyControls = new THREE.FlyControls(camera);
flyControls.movementSpeed = 25;
flyControls.domElement = document.querySelector("#container");
flyControls.rollSpeed = Math.PI / 24;

renderer中代码

var delta = clock.getDelta();
flyControls.update(delta); //更新时间,所以控制器需要是全局，至少是可被外部函数调用