Add spatial interface plugins

Begin with the 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.

Run the public browser demo#

Download the official starter ZIP using the release manifest 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:

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:

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.

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.
• Bind buttons to bindMeasurement(result.measure, report) from Measurement.
• Call moveAndLook(result.five, result.camera, panoIndex) from 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 for other controllers.