@galacean/engine-toolkit-gizmo v1.3.9

Gizmo

Gizmos allow for mouse-controlled translation, rotation, and scaling within the 3D Viewport.

There is a distinct gizmo for each operation, which can be used individually or in conjunction with one another.

Each gizmo features three color-coded axes: X (green), Y (blue), and Z (red). To transform along a specific axis, drag it with the left mouse button. The Move and Scale gizmos also have small, colored squares that allow for transforming along two axes simultaneously.

Translate

Show the gizmo to control the location.

Rotate

Show the gizmo to control the rotation.

Scale

Show the gizmo to control the scale. Dragging the center cube scales along all three axes.

Feature

Example

Gizmo-Examples

npm

The Gizmo is published on npm with full typing support. To install, use:

$ npm install @galacean/engine-toolkit-gizmo

This will allow you to import package entirely using:

import { Gizmo, Group, AnchorType, CoordinateType, State } from "@galacean/engine-toolkit-gizmo";

Usage

// Initialize camera entity.
const cameraEntity = rootEntity.createChild("camera");
const camera = cameraEntity.addComponent(Camera);

// Initialize group for selection
const group = new Group();

// add gizmo
const gizmoEntity = rootEntity.createChild("editor-gizmo");
const gizmo = gizmoEntity.addComponent(Gizmo);
gizmo.init(camera, group);
gizmo.state = State.translate;

Links

• Repository
• Documentation
• API References

License

The engine is released under the MIT license. See LICENSE file.