three.js学习记录（鼠标控制）

一、鼠标控制 - 轨道控制器（OrbitControls）

        1. 从nodeModules中导入OrbitControls，OrbitControls 是一个附加组件，必须显式导入

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

注意：从官网上粘贴的引入路径有时候是不对的，手动从自己的node_modules中找一下OrbitControls.js文件的路径，核实准确才有效。

        2. 通过new OrbitControls实例化一个controls，OrbitControls有两个参数，分别是camera（相机）,domElement(用于事件监听的HTML元素，即当下绘制在界面的canvas元素)

const controls  = new OrbitControls(camera, renderer.domElement)

        3. 在动画循环requestAnimationFrame中实时更新，不断加载位置的变化 【方案一】

一般多用【方案一】

function animate() {

        requestAnimationFrame( animate );

        controls.update();

        renderer.render( scene, camera );

}

requestAnimationFrame( animate );

注意：如果此处没有用动画requestAnimationFrame，仅仅只是new OrbitControls(camera, renderer.domElement)，则鼠标控制的效果是看不到的，即使鼠标在移动的过程中相机camera的位置是在不断变化的，但这个位置并没实时渲染到canvas上。

        4. 如果不使用requestAnimationFrame进行渲染相机位置的变化，还可以通过监听Orbitcontrol的change事件进行渲染，【方案二】

controls.addEventListener('change',() => {

        renderer.render( scene, camera );

})

        5. 惯性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 );
})

效果如下：

鼠标控制