开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第14天，点击查看活动详情

前言

上节我们通过requestAnimationFrame函数加物体旋转成功让物体自己动起来了，但我们并不能控制物体的运动，如果我们想主动控制物体运动，有什么工具能帮我们控制物体嘛？这时候就要借助OrbitControls.js——轨道控制器。

OrbitControls

OrbitControls:轨道控制器，它能够控制相机围绕着物体进行运动，设置好之后，我们就可以通过鼠标或键盘移动相机改变相机对物体的角度，比如：旋转。开发中我们利用其构造函数创建实例，控制器函数如下：

   OrbitControls(camera,domElement)

该函数接受两个参数：

• 相机对象，必填。当我们传递相机作为参数时，浏览器会自动根据鼠标或键盘的变化去更新相机的对应参数，从而达改变物体的渲染结果，达到视觉上移动的效果。鼠标操作对物体的影响如下：
  拖动鼠标左键物体旋转；
  拖动鼠标右键物体平移；
  滚动鼠标中键物体缩放。
• 监听对象。物体是放在场景里面的，场景有渲染器渲染出来，那么我们监听的对象就是渲染器的domElement。

属性方法

下面我们来看下控制器常用的一些属性与方法：

• domElement:监听事件的DOM。
• autoRotate:布尔值，是否自动旋转，当设置为true，必须调用更新函数。
• enabled:布尔值，是否响应用户操作，设置为false时，操作无任何反应。
• enableDamping:布尔值，设置阻尼（相当于摩擦力）效果，设置为true时，物体移动效果更加真实，此时也必须调用更新函数。
• update():更新函数，刷新控制器，当我们主动修改相机参数时需要调用，或者跟一些属性配合使用。
• reset():重置函数，重置为上一次设置的参数。
• saveState():保存函数，会保存当前设置好的状态。

实现

了解了OrbitControls函数，接着我们就得运用到渲染场景的过程中，运用的前提是引入，该控制器不在three.js里，所以我们需要单独引入对应的文件才能使用。

   import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

接下来我们new一个控制器实例，一定要将相机当作第一个参数，并且设置阻尼，让效果更真实：

   //创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    //设置控制器阻尼 更加真实
    controls.enableDamping = true;

上面我们提到该函数会让浏览器监听鼠标和键盘的变化，根据变化会更新相机数据，并返回一个对象，我们如果给对象添加监听事件，当变化时就去更新渲染，物体就能用跟随相机而运动，这不就得到我们想要的结果了嘛，刚好我们学习了requestAnimationFrame函数，将两者结合起来，让物体周期性渲染再里面调用控制器的更新方法。

function move() {
    //设置了阻尼属性必须调用
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
move();

现在我们打开页面，用鼠标操作会发现物体也会跟着动起来啦。

总结

以上就是轨道控制器的使用方法，注意使用前需要引入，一些属性设置后，需要调用控制器的更新函数。