Quick start

This builds a small gallery with one artwork, using React and Vite.

1. Define the scene (data)

Walls are top-down paths; artworks hang on named edges of those walls.

scene.ts

import { defineScene } from '@scenography/core';

export const scene = defineScene({
  walls: [
    {
      id: 'room',
      // a top-down footprint; the wall follows this polyline
      path: [
        [300, -300],
        [-300, -300],
        [-300, 300],
        [300, 300],
      ],
      closed: true,
      height: 300, // optional, defaults to 300
      thickness: 30, // optional, defaults to 30
      edges: [{ segment: 0, name: 'north' }],
    },
  ],
  artworks: [
    {
      id: 'lucho',
      // hang on the named edge, centered, at the camera's eye level
      location: { type: 'wall', edge: 'north', position: '50%' },
      src: 'https://picsum.photos/seed/scenography/600/800',
      size: [120, 160],
      title: 'Untitled',
      technique: 'Digital',
    },
  ],
  camera: {
    start: { position: [0, 170, 0], yaw: 0 },
    bounds: 280,
  },
});

2. Render it (React)

App.tsx

import { Gallery } from '@scenography/react';
import { scene } from './scene';

export function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Gallery scene={scene} />
    </div>
  );
}

That's it. Drag to look, WASD or the arrow keys to move, hold Shift to sprint.

Without React

The engine is framework-agnostic. Mount it on any canvas:

import { createGallery } from '@scenography/engine';
import { scene } from './scene';

const canvas = document.querySelector('canvas')!;
const gallery = createGallery(scene, { canvas });
gallery.start();

// Later:
// gallery.setScene(nextScene); // hot-reconciles
// gallery.dispose();

Next, learn the scene language, how to wire behavior, and how to add a HUD overlay.