Gizmo

A gizmo in Babylon.js is a visual tool that helps interact with meshes in a 3D scene. Gizmos are often used for manipulating objects (moving, rotating, scaling) and are essential in editor-like applications where users need to modify objects in the scene interactively.

In the following example, you can use the blue gizmo to move, rotate, or scale the red box with precision.

useEffect(() => {
  const utilLayer = new UtilityLayerRenderer(scene);
  utilLayer.utilityLayerScene.autoClearDepthAndStencil = false;
  const gizmo = new BoundingBoxGizmo(Color3.FromHexString('#0984e3'), utilLayer);
  gizmo.attachedMesh = box.current!;
}, []);
 
// ...
 
<>
  <box name='box' ref={boxRef} />
  <ground name='ground' options={{ width: 5, height: 5 }} />
</>

Learn More

For properties and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/gizmo.