Gizmos

Gizmo.js's are objects that can be attached to a node (mesh, bone, transform) to provide interaction. The GizmoManager and BoundingBox gizmo work with mesh. Whereas Position, scale and rotation gizmos are also usable with TransformNodes and Bones.

GizmoManager

To get a default gizmo setup, the GizmoManager class can be used. The GizmoManager will attach the enabled gizmo to whatever object in the scene that is selected by a pointer. To enable simply add it inside of an object.

It has all basic gizmo types at enabled by default.

Example Code

<script lang="ts">
	import Box from 'svelte-babylon/components/Objects/Box/index.svelte'
	import GizmoManager from 'svelte-babylon/components/Gizmos/GizmoManager/index.svelte'
</script>

...
<Box>
	<GizmoManager />
</Box>
...

<script lang="ts">
	import Box from 'svelte-babylon/components/Objects/Box/index.svelte'
	import GizmoManager from 'svelte-babylon/components/Gizmos/GizmoManager/index.svelte'
</script>

...
<Box>
	<GizmoManager />
</Box>
...

AxisDragGizmo

The AxisDragGizmo allows you to drag an object along the specified axis.

AxisScaleGizmo

The AxisScaleGizmo allows you to scale an object along the specified axis.

BoundingBoxGizmo

The BoundingBoxGizmo displays a bounding box around an object as well as controls to rotate and scale the object.

CameraGizmo

Gizmo that enables viewing a camera, as well as rotating and moving it.

LightGizmo

Gizmo that enables viewing a light, as well as rotating and moving it.

PlaneDragGizmo

This Gizmo allows you to drag an object across a two axes.

PlaneRotationGizmo

The PlaneRotationGizmo allows you to rotate an object around the specified axis.

PositionGizmo

The PositionGizmo allows you to move an object across all axes.

RotationGizmo

The RotationGizmo allows you to rotate an object around all axes.

ScaleGizmo

The ScaleGizmo allows you to scale an object along all axes.