04 轨道控制器.md

OrbitControls（轨道控制器）

轨道控制器，透过拖移及缩放调整相机位置。

引入函数库：

https://threejs.org/examples/js/controls/OrbitControls.js

• 旋转：鼠标左键按住拖移至欲旋转的方向。
• 平移：鼠标右键按住拖移至欲平移的方向，或者也可以使用键盘方向键。
• 缩放：鼠标滚动滚动。

function init() {
	...
	// 渲染器设置
	renderer = new THREE.WebGLRenderer()
	renderer.setSize(window.innerWidth, window.innerHeight)
	
	// 建立 OrbitControls
	let cameraControl = new THREE.OrbitControls(camera,renderer.domElement)
	...
}

透过鼠标改变相机位置而已，但其实这元件还有许多属性可以设定：

cameraControl.enableDamping = true // 启用阻尼效果
cameraControl.dampingFactor = 0.25 // 阻尼系数
cameraControl.autoRotate = true    // 启用自动旋转

enableDamping与 dampingFactor 效果可以理解为在拖移旋转时的「鼠标灵敏度」；而 autoRotate 很直观就是相机会绕着指定位置旋转，类似展示的功能，需要注意的是，设定这两个参数时，需要在 render() 处做update 才会有效果：

function render() {
  cameraControl.update() // 需设置 update
	requestAnimationFrame(render)
	renderer.render(scene, camera)
}

另外，其实Three.js 中提供了不止 OrbitControls 这种控制相机的工具，其他的还包含了第一人称视角控制器（FirstPersonControls）、飞行控制器（FlyControls）、翻滾控制器（RollControls）、轨迹球控制器（TrackBallControls）等等，如果是射击游戏的话，可以考虑使用第一人称视角的控制器会更有临场感。