自定义控件
回到PerspectiveCamera透视相机上来。注释OrthographicCamera正交相机，取消注释PerspectiveCamera透视相机，移动相机，使其面向立方体，删掉tick中的对网格体旋转的部分。
// 相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 1000)
// const aspectRatio = sizes.width / sizes.height
// const camera = new THREE.OrthographicCamera(- 1 * aspectRatio, 1 * aspectRatio, 1, - 1, 0.1, 100)
// camera.position.x = 2
// camera.position.y = 2
camera.position.z = 3
camera.lookAt(mesh.position)
scene.add(camera)
以用鼠标控制相机为例，首先需要知道鼠标坐标。可以使用原生JavaScript的侦听事件addEventListener，来侦听mousemove事件。
坐标将通过回调函数返回，比如event.clientX和event.clientY
// 鼠标
window.addEventListener('mousemove', (event) =>
{
console.log(event.clientX, event.clientY)
})
此处的返回值可以直接使用，但是调整下值的范围会更好，比如调整为区间为1的值。
比如，对于x：
当光标位于画布左侧，输出-0.5
当光标位于画布中间，输出0
当光标位于画布右侧，输出0.5
当然也可以采用其它值。
仿照size变量，这里创建个cursor变量，变量默认属性包含x和y，当触发mousemove回调时，更新属性的值
// 鼠标
const cursor = {
x: 0,
y: 0
}
window.addEventListener('mousemove', (event) =>
{
cursor.x = event.clientX / sizes.width - 0.5
cursor.y = event.clientY / sizes.height - 0.5
console.log(cursor.x, cursor.y)
})
event.clientX除以sizes.width会返回一个介于0~1之间的值，通过减去一个0.5，让值分布在0.5~-0.5
这样，就完成了鼠标位置的存储，并且可以通过tick更新位置。
const tick = () =>
{
// ...
// 更新相机
camera.position.x = cursor.x
camera.position.y = cursor.y
// ...
}
运行后，会发现沿y轴运动方向不对，这是因为Three.js中positon.y向上运动时为正，在网页中clientY向下运动时为正。
通过在cursor.y上添加负号，来纠正。
window.addEventListener('mousemove', (event) =>
{
cursor.x = event.clientX / sizes.width - 0.5
cursor.y = - (event.clientY / sizes.height - 0.5)
})
可以通过cursor.x和cursor.y乘上一个数字，来调整幅度大小。此时仍可通过lookAt()方法调整相机朝向。
const tick = () =>
{
// ...
// 更新相机
camera.position.x = cursor.x * 5
camera.position.y = cursor.y * 5
camera.lookAt(mesh.position)
// ...
}
更进一步，还可以通过使用Math.sin()和Math.cos()实现相机绕网格体旋转。
同时使用cos和sin时，可以让运动变成圆周运动。要运动成完成的圆，角度的大小必须是Π的2倍。可以通过使用Math.PI，使用Π的值。
要增加圆的半径，可以简单的将Math.sin()和Math.cos()结果乘上一个数。
const tick = () =>
{
// ...
// 更新相机
camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 2
camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 2
camera.position.y = cursor.y * 3
camera.lookAt(mesh.position)
// ...
}
tick()
这只是一个自定义控制的例子，Three.js内置了许多控件类，用来进行许多的相似操作。
内建控件
如果在Three.js文档中搜索控件，会看到很多现成的控件。
DeviceOrientationControls设备陀螺仪控件
DeviceOrientationControls设备陀螺仪控件，就是根据权限许可，依照设备方向相应的旋转相机。如果设备合适，可以用来创建全景图或者VR效果。
FlyControls飞行控件
FlyControls飞行控件允许像飞船一样控制相机，此时可在三个轴上任意旋转、并可前后移动。
FirstPersonControls第一人称控件
FirstPersonControls第一人称控件类似上一个，但具有一个固定向上的轴，即不能向前后左右翻转，虽然名字里有第一人称，但是相机本身不含人。
PointerLockControls指针锁定控件
PointerLockControls指针锁定控件使用了JavaScript的pointer lock API。通过这个，隐藏了鼠标指针，并使其居中，但仍在事件回调中继续发送移动。使用这个API，可以创建FPS游戏，但是，这个API只提供了相机的旋转，相机的移动和游戏中的物理效果仍旧需要自行处理。
OrbitControls环绕控件
OrbitControls环绕控件类似于上面的自定义控件的例子。可以通过左键绕某个点旋转，使用鼠标右键横向平移，使用滚轮放大缩小。
TrackballControls轨迹球控件
TrackballControls轨迹球控件类似OrbitControls环绕控件，但是可以在竖直方向上翻转。
TransformControls变换控件
TransformControls变换控件和相机无关。可以用它给对象添加一个控件，用来移动对象。
这里只讲OrbitControls环绕控件
OrbitControls环绕控件
注释掉tick中更新相机的部分。
实例化
首先，使用OrbitControls类实例化变量。
由于使用了Webpack，将会以以下形式引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
之后就可以直接实例化OrbitControls 类，但要在创建相机后执行。
要使其正常工作，需要向其传入相机和画布，然后实例会自己处理鼠标事件。
// 控件
const controls = new OrbitControls(camera, canvas)
这样就可以使用鼠标左键或者右键来移动相机，使用滚轮进行缩放。
比自定义控件方便得多，且带有许多控件。然后再往更深层次研究。
target目标
默认情况下，相机看向场景中心。可以通过target目标属性修改它。
这个属性是个Vector3，意思就是通过x、y、z三个属性定义的。
如果希望OrbitControls环绕控件默认查看立方体上方，只需要增加y值。
controls.target.y = 2
这个用处不是很大，先注释掉它。
Damping阻尼
Damping阻尼通过加速度和摩擦力公式来平滑动画。
要启用阻尼，请将controls的enableDamping属性设置为true。
为了正常运行，还需要通过在每帧调用controls.update()。可以通过tick()实现。
// 控件
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
// ...
const tick = () =>
{
// ...
// Update controls
controls.update()
// ...
}
这样控件看起来更加流畅。
阻尼可以用在各种旋转、移动、缩放、角度控制上，甚至按键绑定上。
何时使用内建控件
虽然这些控件很方便，但是都有局限性。如果过于依赖它们，可能需要以意想不到的方式改变类的工作方式。
首先请确保所需的功能，然后检查内建控件的功能是否完全覆盖所需的。
否则，需要自己建立控件。
