@web-engine-dev/gizmos

Editor viewport gizmos for visual manipulation of entities, colliders, lights, and other scene objects. Provides translate, rotate, scale, and bounds handles with snapping, plus custom gizmo drawing for debug visualization.

Layer 6 · Visual Output

Features

• Transform Gizmos: Translate (arrows), rotate (rings), scale (cubes), bounds (box handles)
• Multi-Selection: Pivot selection (center, individual, custom), coordinate space (local/world/view)
• Snap: Grid snap for translation, angle snap for rotation, uniform snap for scale
• Picking: Per-axis and per-plane ray-intersection for precise manipulation
• Custom Gizmos: Programmatic line, circle, arc, sphere, box, cone, frustum, arrow drawing
• Light Gizmos: Range spheres, cone angles, area rectangles with drag handles
• Collider Gizmos: Wireframe overlays matching physics collider shapes
• Camera Gizmos: Frustum visualization with near/far plane handles
• Depth-Tested and Overlay Modes: Gizmos can render behind or always on top of scene

Installation

npm install @web-engine-dev/gizmos
# or
pnpm add @web-engine-dev/gizmos

Quick Start

import { GizmoRenderer, TransformGizmo, GizmoDrawer } from '@web-engine-dev/gizmos';

// Transform gizmo for entity manipulation
const transformGizmo = new TransformGizmo({
  mode: 'translate',
  space: 'world',
  snap: { translation: 0.5, rotation: 15, scale: 0.1 },
});

// Custom debug gizmos
const drawer = new GizmoDrawer();
drawer.drawWireSphere(center, radius, color);
drawer.drawLine(start, end, color);
drawer.drawFrustum(camera.viewProjection, color);
drawer.drawArrow(origin, direction, length, color);

Gizmo Types

Gizmo	Visual	Interaction
Translate	3 arrows + 3 planes	Drag along axis or plane
Rotate	3 rings + trackball	Drag to rotate around axis
Scale	3 cubes + center cube	Drag to scale per-axis or uniform
Bounds	8 corner + 6 edge handles	Drag to resize AABB

Dependencies

• @web-engine-dev/math — Vector, matrix, ray types
• @web-engine-dev/renderer — GPU line/mesh rendering
• @web-engine-dev/input — Mouse/touch interaction