Quick Start

Browser quick start

The following TypeScript example assumes a bundler that supports CSS imports and an HTML element <div id="scene"></div>.

import { createPlayer } from 'webnim/browser';
import 'webnim/browser/style.css';
import type { SceneDocument } from 'webnim/document';

const scene: SceneDocument = {
  version: 1,
  parameters: { amplitude: 1, along: 0.35 },
  spaces: [{
    name: 'plane',
    type: 'plane2d',
    objects: [
      {
        id: 'curve', type: 'FunctionGraph',
        expression: 'amplitude * sin(x)', domain: [-5, 5],
        style: { color: '#58a6ff', strokeWidth: 2 }
      },
      {
        id: 'point', type: 'PointOnCurve',
        curve: 'plane.curve', parameter: 'along',
        drag: { parameter: 'along', min: 0, max: 1 },
        caption: 'Drag to move along the curve.'
      },
      {
        id: 'tangent', type: 'Tangent',
        curve: 'plane.curve', parameter: 'along', length: 2
      }
    ]
  }],
  events: [
    { type: 'Create', object: 'plane.curve', start: 0, duration: 2 },
    {
      type: 'AnimateParameter', parameter: 'amplitude',
      to: 2, start: 2, duration: 3
    }
  ]
};

const container = document.getElementById('scene')!;
container.style.width = '100%';
container.style.height = '480px';

const player = await createPlayer(container, {
  document: scene,
  onEvent(event) {
    if (event.type === 'error') console.error(event.error);
  }
});
player.play();

// Invoke when the host removes this view:
// player.dispose();

The player manages rendering, resizing and interaction. Your application owns play buttons, timeline controls, routing and persistence. Creation is asynchronous because validation and render resources must be ready before the scene is mounted.

---

Wiki home · Quick start