介绍
three-orbit-controls-loader 是一个基于 three.js 框架的 npm 包，用于加载 three.js 场景的轨道控制插件。它可以帮助我们在 three.js 项目中，快速实现场景中目标物体的平移、旋转、放大缩小等操作，让用户可以更方便地浏览场景。
在这篇文章中，我们将会展示 three-orbit-controls-loader 的安装和使用方法，并通过示例代码演示它的具体应用，希望对使用 three.js 平台进行前端开发的读者有所帮助。
安装
three-orbit-controls-loader 是一个 npm 包，安装方法很简单，只需要在命令行中输入以下命令：
npm install three-orbit-controls-loader
安装完成后，我们可以在项目中的 node_modules 目录中看到 three-orbit-controls-loader 文件夹。
使用
three-orbit-controls-loader 的使用非常简单，只需要在我们的 js 文件中引入它，然后使用它提供的方法即可完成场景的轨道控制功能。
引入方法：
import {OrbitControls} from 'three-orbit-controls-loader';其中，OrbitControls 就是 three-orbit-controls-loader 中主要的轨道控制类。
在我们的项目中使用它，可以这样写：
const controls = new OrbitControls(camera, renderer.domElement);
这里，我们定义了一个变量 controls，它的值是通过 new 操作符创建的 OrbitControls 类的实例对象，构造函数中需要传入两个参数：camera 和 renderer.domElement。
其中，camera 是场景中的相机对象，renderer.domElement 是三维渲染器中的 dom 元素。
紧接着，我们需要在每一帧的时候，调用 controls.update() 方法进行更新，例如：
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}这里，animate 函数是用于渲染场景的主函数，我们在它的每次循环中，都需要更新 controls 对象。
示例代码
下面我们将通过一个简单的示例代码，演示 three-orbit-controls-loader 的具体应用。
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ --------------- ---- ------------------------------ ----- --------- - ------------------------------------- ----- ----- - --- -------------- ----- ------ - --- --------------------------- ----------------- - ------------------- -- ------ ---------------------- -- --- ----- -------- - --- ---------------------- ----------------------------------- -------------------- ------------------------------------------- ----- -------- - --- -------------------- -- --- ----- -------- - --- --------------------------- ----- ---- - --- -------------------- ---------- ---------------- ----- -------- - --- --------------------- --------------------- -------- --------- - ------------------------------- ------------------ ---------------------- -------- - ----------
首先，我们定义了一个 container 变量，它是 HTML 中的一个容器元素，用于将 three.js 场景渲染到页面上。
接着，我们创建了一个场景 scene，并创建了一个 PerspectiveCamera 相机对象，并将它设置在 (0, 0, 5) 的位置上。
然后，我们创建了一个 WebGLRenderer 对象，并将它添加到 container 容器中。
在场景中，我们创建了一个 1 * 1 * 1 的立方体，并使用了一个 MeshNormalMaterial 材质。
最后，我们使用 OrbitControls 类创建了 controls 控制对象，并在 animate 函数中使用 controls.update() 更新它。
运行这段代码，我们就可以看到一个可以通过鼠标拖动来旋转、平移、缩放立方体的 three.js 场景了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005555681e8991b448d2882