@web-engine-dev/editor-viewport

3D viewport for the visual editor with orbit, fly, and pan camera controls. Renders the scene with editor overlays including gizmos, selection highlights, grid, and snap indicators.

Layer 8 · Content

Features

• Orbit Camera: Rotate around a focus point with scroll-to-zoom
• Fly Camera: FPS-style free flight with WASD + mouse look
• Pan Camera: Middle-mouse drag to pan the view plane
• Camera Transitions: Smooth interpolation between camera modes and saved views
• Grid Rendering: Infinite ground grid with adaptive subdivision
• Selection Highlighting: Outline and tint selected entities
• Gizmo Integration: Transform gizmos rendered in viewport via @web-engine-dev/gizmos
• Multi-Viewport: Split view with independent cameras (top, front, side, perspective)
• Frame Selection: Auto-frame camera to selected entity bounds (F key)
• Snap Indicators: Visual feedback for grid, vertex, and edge snapping
• Picking: GPU-based entity picking with pixel-accurate selection
• Screenshot: Capture viewport at arbitrary resolution

Installation

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

Quick Start

import { EditorViewport, OrbitCamera, FlyCamera } from '@web-engine-dev/editor-viewport';

// Create viewport attached to a canvas
const viewport = new EditorViewport(canvas, {
  camera: new OrbitCamera({
    target: [0, 0, 0],
    distance: 10,
    minDistance: 1,
    maxDistance: 1000,
  }),
  grid: { enabled: true, size: 100, subdivisions: 10 },
  picking: { mode: 'gpu' },
});

// Switch to fly camera
viewport.setCamera(
  new FlyCamera({
    speed: 5,
    sensitivity: 0.003,
  })
);

// Frame selection
viewport.frameSelection(selectedEntities);

// Multi-viewport split
viewport.split('horizontal', [
  { camera: perspectiveCamera, label: 'Perspective' },
  { camera: topDownCamera, label: 'Top' },
]);

Camera Modes

Mode	Controls	Use Case
Orbit	LMB drag rotate, scroll zoom, MMB pan	Scene inspection, modeling
Fly	WASD move, mouse look, shift sprint	Large scene navigation
Pan	MMB drag, scroll zoom	2D layout, UI editing

Dependencies

• @web-engine-dev/renderer — Scene rendering
• @web-engine-dev/camera — Camera management
• @web-engine-dev/gizmos — Transform and debug gizmos
• @web-engine-dev/input — Mouse and keyboard input
• @web-engine-dev/editor-core — Selection and command integration