一、鼠标控制 - 轨道控制器（OrbitControls）
- 从nodeModules中导入OrbitControls，OrbitControls 是一个附加组件，必须显式导入
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
注意：从官网上粘贴的引入路径有时候是不对的，手动从自己的node_modules中找一下OrbitControls.js文件的路径，核实准确才有效。
- 通过new OrbitControls实例化一个controls，OrbitControls有两个参数，分别是camera（相机）,domElement(用于事件监听的HTML元素，即当下绘制在界面的canvas元素)
const controls = new OrbitControls(camera, renderer.domElement)
- 在动画循环requestAnimationFrame中实时更新，不断加载位置的变化 【方案一】
一般多用【方案一】
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
requestAnimationFrame( animate );
注意：如果此处没有用动画requestAnimationFrame，仅仅只是new OrbitControls(camera, renderer.domElement)，则鼠标控制的效果是看不到的，即使鼠标在移动的过程中相机camera的位置是在不断变化的，但这个位置并没实时渲染到canvas上。
- 如果不使用requestAnimationFrame进行渲染相机位置的变化，还可以通过监听Orbitcontrol的change事件进行渲染，【方案二】
controls.addEventListener('change',() => {
renderer.render( scene, camera );
})
-
惯性enableDamping（默认为false），鼠标控制相机旋转时，false情况下鼠标抬起的一瞬间，旋转效果就立即停止；设置为true时，必须配合动画requestAnimationFrame，在动画中通过update方法更新控制器，即当鼠标抬起，物体的旋转会有个缓冲过程，慢慢停下（更符合物体运动规律）
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.addEventListener('change',() => {
controls.update();
renderer.render( scene, camera );
})
效果如下：
鼠标控制