# Add spatial interface plugins — Dnalogel

Register Dnalogel tags, measurements, and camera controls on a loaded Five SDK scene.

Canonical: https://developer.realsee.ai/docs/dnalogel/quickstart
Source: https://developer.realsee.ai/docs/dnalogel/quickstart.md
Language: en

[Download examples](https://developer.realsee.ai/starters/react-five/1.3.0/starter.zip)

Begin with the [Five SDK quickstart](https://developer.realsee.ai/docs/five-sdk/quickstart). Confirm that the Public Demo reaches **Ready** before adding plugins. A network or Work-loading error must be resolved before plugin output can be evaluated.

<span id="run-the-maintained-public-browser-demo" class="docs-anchor-alias" aria-hidden="true"></span>

## Run the public browser demo

Download the official starter ZIP using [the release manifest](https://developer.realsee.ai/starters/react-five/manifest.json) or **Download examples** above. Extract it into a new directory, then open a terminal in its `realsee-react-five/extensions` directory. This optional project has its own dependencies and lockfile:

```bash
npm ci
npm run check
npm run build
npm run dev
```

Open the local URL printed by the terminal, normally `http://127.0.0.1:4188`. The page uses the published `@realsee/open-works@0.1.1` sample; it needs WebGL and public scene asset access, but no credentials or Team API. It reuses the task functions shown below. Running this optional example does not require changing the main starter's dependencies.

After the scene reports Ready, use **Add text hotspot** and **Start measurement**. Add points on the visible scene, finish the measurement, and remove the hotspot to check cleanup.

## Keep a compatible dependency set

These examples target Five SDK 6.9.2, React 18.3.1, Three.js 0.117.1, and Dnalogel 3.81.10. In a fresh compatible starter directory:

```bash
npm install --save-exact @realsee/dnalogel@3.81.10
npm run check
npm run build
```

Inspect `package.json` first if you are extending another project. If Five SDK, React, or Three.js differs, stop and reconcile the versions deliberately. Do not use `--force`, bypass peer checks, or replace an existing lockfile. Vreo requires Dnalogel 3.81.10; do not silently upgrade it to 3.81.12 in a Vreo project.

The downloaded `extensions` project already contains this compatible release set. Keep its lockfile and use `npm ci`; the install command above is for adding Dnalogel to your own compatible project.

Keep the starter's package-specific npm override for `@realsee/five` → `protobufjs` 8.8.1 when extending it. The downloaded `extensions` project includes the same override.

## Register the concrete plugins

Give the container a nonzero width and height. Pass parsed, browser-safe `Work`, as used by the Five SDK quickstart. Call this function once for that container instead of also creating a second Five instance there.

```ts title="examples/sdk-guides/src/dnalogel/viewer.ts"
import { Five, type Work } from '@realsee/five'
import { CameraMovementPlugin, MeasurePlugin, PanoTagPlugin } from '@realsee/dnalogel'

export async function createSpatialInterface(container: HTMLElement, work: Work) {
  const five = new Five({ plugins: [
    [PanoTagPlugin, 'tags', {}],
    [MeasurePlugin, 'measure', { unit: 'm', precision: 2 }],
    [CameraMovementPlugin, 'camera', {}]
  ] })
  five.appendTo(container, { width: container.clientWidth, height: container.clientHeight })
  const resize = new ResizeObserver(() => five.refresh({ width: container.clientWidth, height: container.clientHeight }))
  resize.observe(container)
  try {
    await five.load(work, 'initial')
    await five.ready()
  } catch (error) {
    resize.disconnect()
    five.dispose()
    throw error
  }
  return {
    five,
    tags: five.plugins.tags as ReturnType<typeof PanoTagPlugin>,
    measure: five.plugins.measure as ReturnType<typeof MeasurePlugin>,
    camera: five.plugins.camera as ReturnType<typeof CameraMovementPlugin>,
    dispose() { resize.disconnect(); five.dispose() }
  }
}
```

The factory mounts Five SDK, tracks container size, loads Work, and waits for scene readiness. Its result exposes the three plugin controllers and one cleanup function. On scene replacement or component unmount, call `dispose()` and create a fresh integration for the next Work.

## Add one task

- Call `addTextHotspot(result.tags, position)` from [Panorama tags](https://developer.realsee.ai/docs/dnalogel/panorama-tags).
- Bind buttons to `bindMeasurement(result.measure, report)` from [Measurement](https://developer.realsee.ai/docs/dnalogel/measure).
- Call `moveAndLook(result.five, result.camera, panoIndex)` from [Camera flows](https://developer.realsee.ai/docs/dnalogel/camera-flows).

Positions and panorama indexes belong to the current Work. The public sample does not make coordinates from another scene valid. Fetch Team-specific Work and plugin data through your backend; never put the Developer app SK in this browser code.

## Verify

Check the container after resize, scene readiness, the chosen plugin output, and cleanup after remount.

See [the plugin export declarations](https://unpkg.com/@realsee/dnalogel@3.81.10/libs/index.d.ts) for other controllers.