Skip to main content
Realsee
Dashboard
Sign out
Documentation
Docs
/
Dnalogel

Quickstart

Register a Dnalogel plugin with Five SDK and load plugin data when your scene is ready.

This quickstart shows the shape of a Dnalogel integration. It assumes you already have a working Five SDK instance from the Five SDK Quickstart.

Install

Install Dnalogel next to Five SDK and its Three.js peer:

npm install @realsee/dnalogel@3.81.0 @realsee/five@6.8.9 three@0.117.1

The published @realsee/dnalogel@3.81.0 package was built with @realsee/five@6.6.18 in its dev dependencies. This portal uses @realsee/five@6.8.9, so validate plugin behavior in your scene before production rollout.

Register a plugin

Use the package's Five SDK plugin registration pattern. The placeholder Plugin in the README represents a plugin class exported by Dnalogel, and PluginName is the name used under five.plugins.

import { Five } from '@realsee/five'
import { PanoRulerPlugin } from '@realsee/dnalogel'

const five = new Five({
  plugins: [[PanoRulerPlugin, 'PanoRulerPlugin', {}]],
})

The registration shape is plugins: [[Plugin, 'PanoRulerPlugin', initOptions]].

Load the scene before plugin data

Dnalogel plugins operate on top of a loaded Five SDK scene. Mount Five SDK, load work data, then call plugin methods when the plugin exposes them:

five.appendTo(container)
await five.load(work, 'initial')

const ruler = five.plugins.PanoRulerPlugin

if (ruler && 'load' in ruler) {
  await ruler.load(rulerData)
}

Different plugins expose different methods. The package README shows the common lifecycle shape: load(data), enable(), disable(), and dispose(). Check the specific plugin's type declaration before relying on a method.

Source plugin data

Plugin data usually comes from one of three places:

  • Realsee OpenAPI data associated with the current work.
  • Data generated by your own backend.
  • Static configuration packaged with your product.

Do not embed app secrets in browser code to fetch plugin data. Use your backend for OpenAPI calls, then return browser-safe data to the page.

Bundle note

The package README documents a webpack resolution issue around @realsee/five/line. If your bundler reports a fully specified ESM resolution error, configure JavaScript module resolution to allow extensionless package subpaths.