在 Babylon.js 中使用 Gizmo：交互式 3D 操作工具

在 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 的外观和行为，以满足特定需求。