前端开发中，Three.js 是一款热门的 3D 渲染引擎，它能够轻松的帮助开发者构建复杂的三维场景。不过，如果要操作 Three.js 中的 3D 场景，往往需要借助一些控制器（Controls）来调整场景的视角。本文将介绍一款名为 @puge/three-orbit-controls 的 npm 包，它提供了一种更加灵活的 Three.js 体验。
简介
@puge/three-orbit-controls 是一款 Three.js 中的轨道控制器（Orbit Controls），通过它，你可以轻而易举的旋转、缩放和平移场景，而不需要编写大量的代码。除此之外，@puge/three-orbit-controls 还支持多点触控和鼠标滚轮缩放等手势，不仅是 PC 端，还适用于移动端。
安装
在使用 @puge/three-orbit-controls 之前，需要在项目中先引入 Three.js。安装 @puge/three-orbit-controls 可以使用 npm：
npm install @puge/three-orbit-controls
如果你使用的是 yarn：
yarn add @puge/three-orbit-controls
完成安装后，我们需要在项目中引入 OrbitControls.js：
import { OrbitControls } from '@puge/three-orbit-controls';使用
@puge/three-orbit-controls 提供了以下控制选项：
enableZoom：启用缩放enableRotate：启用旋转enablePan：启用平移autoRotate：自动旋转autoRotateSpeed：自动旋转的速度minDistance：相机最小距离maxDistance：相机最大距离
接下来，我们将使用 @puge/three-orbit-controls 来实现一个自动旋转的立方体。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----- ----------------
-------
---- -
------- --
-
--------
-------
------
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------------
--------
----- ---- - -- -- -
----- --------- - ------------------------------
-------------------------------------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----------------- - ------------------- -- -------
---------------------- -- ---
------------------
----- -------- - --- --------------------- ---------- ---- ---
----------------------------------- --------------------
-------------------------------------------
----- -------- - --- --------------------- ---------------------
------------------- - -----
------------------------ - ----
----- -------- - --- --------------------
----- -------- - --- ---------------------------
----- ---- - --- -------------------- ----------
----------------
----- ------- - -- -- -
-------------------------------
------------------
---------------------- --------
--
----------
--------------------------------- -- -- -
------------- - ----------------- - -------------------
--------------------------------
----------------------------------- --------------------
-- -------
--
-------
---------
-------
-------在代码中，我们实例化了一个 OrbitControls 对象，并将它传入渲染器的 dom 对象中，然后开启了自动旋转，并设置了旋转的速度。最后，我们还添加了一个立方体，并且给它添加了一个法向材质。
结论
本文介绍了 @puge/three-orbit-controls 的基本使用方法，并通过示例代码展示了如何使用它来构建自动旋转的场景。虽然此包对于 Three.js 初学者而言非常友好，但却不是唯一的选择。在实际开发过程中，需要根据项目的需求来选择控制器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e8d9381d61a3540bb8