在使用 Three.js 库进行 3D 图形渲染时，我们经常需要添加各种控件来方便用户与场景交互。Three.js 自带了一些常用的控件，但是有些控件并没有包含在内，这时候我们就需要使用第三方的 npm 包。在本文中，我们将会介绍使用 npm 包 threejs-controls 来添加常用的控件的方法。
1. 安装 threejs-controls
我们可以使用 npm 命令安装 threejs-controls：
npm install threejs-controls --save
此时，threejs-controls 就会被添加到项目的 package.json 文件中。我们可以在代码中使用以下方式来引入 threejs-controls：
import * as THREE from 'three';
import { OrbitControls, TransformControls, DragControls } from 'threejs-controls';如果你使用的是 Three.js 的全局变量（如 THREE.OrbitControls），则需要使用以下方式来引入：
import * as THREE from 'three';
import { OrbitControls, TransformControls, DragControls } from 'threejs-controls';
THREE.OrbitControls = OrbitControls;
THREE.TransformControls = TransformControls;
THREE.DragControls = DragControls;2. 使用 OrbitControls
OrbitControls 控制器可以让用户绕场景中心旋转、缩放、平移以及拖拽。我们可以使用以下代码来创建 OrbitControls 控制器：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const controls = new THREE.OrbitControls(camera, renderer.domElement);
以上代码将会创建一个 PerspectiveCamera 并使用 renderer 的 domElement 作为 OrbitControls 的第二个参数。现在我们可以通过调用 controls.update() 来让 OrbitControls 生效：
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}3. 使用 TransformControls
TransformControls 控制器可以让你在场景中拖拽、旋转、缩放物体。我们可以使用以下代码来创建 TransformControls 控制器：
const transformControls = new THREE.TransformControls(camera, renderer.domElement); scene.add(transformControls); transformControls.attach(mesh);
以上代码将会创建一个 TransformControls 并使用 renderer 的 domElement 作为 TransformControls 的第二个参数。我们还需要将 TransformControls 添加到场景中，并将其附加到想要进行转换的 mesh 上（在这个例子中，mesh 是一个简单的立方体）。
可以通过以下方式调用 TransformControls 生效：
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
transformControls.update();
}接下来，我们需要添加按键监听来切换 TransformControls 的模式，切换模式时将会改变 TransformControls 的操作方式。我们可以按下 t 键来切换移动模式，r 键来切换旋转模式，s 键来切换缩放模式：
-- -------------------- ---- -------
------------------------------------ -------- ------- -
------ --------------- -
---- --- -- -
---------------------------------------
------
---- --- -- -
------------------------------------
------
---- --- -- -
-----------------------------------
------
-
---4. 使用 DragControls
DragControls 控制器可以让你在场景中拖拽物体。我们可以使用以下代码来创建 DragControls 控制器：
const dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', function (event) {
console.log('dragstart', event.object.name);
});
dragControls.addEventListener('dragend', function (event) {
console.log('dragend', event.object.name);
});以上代码将会创建一个 DragControls 并使用 objects 数组、renderer 的 domElement 作为 DragControls 的第一个和第二个参数。objects 数组包含了想要进行拖拽操作的物体。我们也为 DragControls 添加了 dragstart 和 dragend 事件的监听器，这将会在开始和结束拖拽时触发。
5. 总结
通过使用 threejs-controls，我们可以方便地添加三种不同的控制器。其中，OrbitControls 主要用于用户与场景交互，TransformControls 主要用于物体变换，DragControls 主要用于拖拽操作。你可以根据你的需求组合使用它们，以便更好地掌控场景中的元素。
完整的示例代码如下所示：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - -------------- ------------------ ------------ - ---- -------------------
-- -----------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------
----- -------- - --- ----------------------
----------------------------------- --------------------
-----------------------------------------------
-- -------
----- -------- - --- --------------------------- ---------------------
-- ------ -----------------
----- -------- - --- -------------------- -- ---
----- -------- - --- ------------------------------- -----------
----- ---- - --- -------------------- ----------
----------------
----- ----------------- - --- ------------------------------- ---------------------
-----------------------------
-------------------------------
-- -------
----- ------- - -------
----- ------------ - --- --------------------------- ------- ---------------------
------------------------------------------ -------- ------- -
------------------------ -------------------
---
---------------------------------------- -------- ------- -
---------------------- -------------------
---
-- -----
------------------------------------ -------- ------- -
------ --------------- -
---- --- -- -
---------------------------------------
------
---- --- -- -
------------------------------------
------
---- --- -- -
-----------------------------------
------
-
---
-- ----
-------- --------- -
-------------------------------
------------------
---------------------------
---------------------- --------
-
----------希望通过本文，你可以学习到如何使用 threejs-controls 来添加 Three.js 的控制器，并了解到三种不同控制器的使用方式。通过应用这些控制器，你可以更好地掌控你创建的场景，并让用户更方便地与你的 3D 图形交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d381e8991b448e4934