在 3D 应用程序中，交互式操作对象（如平移、旋转、缩放）是一个常见的需求。Babylon.js 提供了一个强大的工具——Gizmo，用于在 3D 场景中实现这些功能。本文将介绍如何在 Babylon.js 中使用 Gizmo，并展示如何通过代码实现交互式操作。
什么是 Gizmo？
Gizmo 是 Babylon.js 中的一种可视化工具，允许用户通过鼠标或触摸屏与 3D 对象进行交互。它通常用于编辑器或需要精细控制对象位置的应用程序中。Gizmo 的主要功能包括：
平移（PositionGizmo）：移动对象的位置。
- 旋转（RotationGizmo）：旋转对象。
- 缩放（ScaleGizmo）：缩放对象的大小。
- 边界框（BoundingBoxGizmo）：显示对象的边界框，并支持整体操作。
如何使用 Gizmo
以下是如何在 Babylon.js 中使用 Gizmo 的基本步骤。
1. 引入 Gizmo 模块
首先，确保引入了 Babylon.js 的 Gizmo 模块：
import * as BABYLON from "@babylonjs/core";
import "@babylonjs/core/Gizmos/gizmoManager"; // 引入 Gizmo 模块2. 创建 GizmoManager
`GizmoManager` 是管理 Gizmo 的核心类。通过它，你可以启用或禁用不同类型的 Gizmo。
const gizmoManager = new BABYLON.GizmoManager(scene);3. 启用 Gizmo
通过 `GizmoManager`，你可以为选中的对象启用平移、旋转或缩放 Gizmo。
// 启用平移 Gizmo
gizmoManager.positionGizmoEnabled = true;// 启用旋转 Gizmo
gizmoManager.rotationGizmoEnabled = true;// 启用缩放 Gizmo
gizmoManager.scaleGizmoEnabled = true;// 启用边界框 Gizmo
gizmoManager.boundingBoxGizmoEnabled = true;4. 设置选中的对象
通过 `GizmoManager` 的 `attachToMesh()` 方法，将 Gizmo 附加到指定的对象上：
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
gizmoManager.attachToMesh(box); // 将 Gizmo 附加到 box 上完整示例代码
以下是一个完整的示例，展示如何在 Babylon.js 中使用 Gizmo：```javascript
// 创建 Babylon.js 引擎和场景
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);// 创建摄像机
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);// 创建光源
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);// 创建一个立方体
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);// 创建 GizmoManager
const gizmoManager = new BABYLON.GizmoManager(scene);// 启用平移、旋转和缩放 Gizmo
gizmoManager.positionGizmoEnabled = true;
gizmoManager.rotationGizmoEnabled = true;
gizmoManager.scaleGizmoEnabled = true;// 将 Gizmo 附加到立方体上
gizmoManager.attachToMesh(box);// 渲染循环
engine.runRenderLoop(() => {scene.render();
});// 窗口大小调整事件
window.addEventListener("resize", () => {engine.resize();
});画面效果参考：
Gizmo 的高级功能
1. 自定义 Gizmo 的外观
你可以通过修改 Gizmo 的材质、颜色或大小来自定义其外观。例如：
gizmoManager.gizmos.positionGizmo.updateGizmoRotationToMatchAttachedMesh = false;
gizmoManager.gizmos.positionGizmo.xGizmo.dragBehavior.dragDeltaRatio = 2; // 调整灵敏度2. 限制 Gizmo 的操作
你可以限制 Gizmo 的操作范围或方向。例如，只允许在 X 轴上平移：
gizmoManager.gizmos.positionGizmo.xGizmo.isEnabled = true;
gizmoManager.gizmos.positionGizmo.yGizmo.isEnabled = false;
gizmoManager.gizmos.positionGizmo.zGizmo.isEnabled = false;3. 使用边界框 Gizmo
边界框 Gizmo 可以显示对象的边界框，并支持整体操作：
gizmoManager.boundingBoxGizmoEnabled = true;总结
- Gizmo是 Babylon.js 中用于交互式操作 3D 对象的工具。
- 通过 `GizmoManager`，你可以轻松启用平移、旋转、缩放和边界框 Gizmo。
- 你可以自定义 Gizmo 的外观和行为，以满足特定需求。
