navigation-gizmo

Navigation Gizmo

Navigation Gizmo displays the current orientation of the view. Dragging it with the left mouse button will orbit the view. To align the view to a specific axis, click on one of the axis labels.

Feature

Attributes	Meaning
target	Navigation Gizmo target point, default (0,0,0). Needs to update when using orbitControl.
position	Navigation Gizmo position. Normalized expression, the upper left corner is (0, 0), and the lower right corner is (1, 1). Default (0, 0).
size	Navigation Gizmo size. The length and width of the gizmo area in viewport, default (0.12, 0.12).
camera	current scene camera
layer	Navigation Gizmo layer, default Layer30. Ensure this layer is not taken
priority	Navigation Gizmo camera's priority, larger than any other camera in scene, default 100.

Example

Gizmo-Examples

npm

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

$ npm install @galacean/engine-toolkit-navigation-gizmo

This will allow you to import package entirely using:

import { NavigationGizmo } from "@galacean/engine-toolkit-navigation-gizmo";

Usage

// LitePhysics must be initialized
const engine = await WebGLEngine.create({ canvas: "canvas" });
engine.physicsManager.initialize(LitePhysics);
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity();

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

// add navigation gizmo
const navigationGizmo = rootEntity.addComponent(NavigationGizmo);
navigationGizmo.camera = camera;

Links

• Repository
• Documentation
• API References

License

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