Model Room Labels

ModelRoomLabelPlugin

Overview

The Model Room Label plugin provides a set of interactions that let users quickly view room names in the model view and quickly jump to a room's panorama.

The detailed features are as follows:

• In the model view, display the corresponding room name with a label.
• Automatically hide a label when the room it marks is occluded by other parts of the building.
• When the model is moved, the corresponding labels move along with it.
• When a label is clicked, switch from the model view to the panorama and move to the waypoint at the center of the corresponding room.
• When switching to a room, the camera view faces the center of the room.

External Demo

Open the Model Room Label live demo to view the room-label effect.

Installation

Choose yarn or npm as needed:

npm install @realsee/dnalogel

Import via ES modules:

import { ModelRoomLabelPlugin } from '@realsee/dnalogel'

Development Guide

Initialization

When initializing the Five instance, configure ModelRoomLabelPlugin in the plugin initialization parameters.

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

const five = new Five({
  plugins: [
    [
      ModelRoomLabelPlugin,
      'modelRoomLabelPlugin', // custom plugin name
      {
        // parameter configuration
      },
    ],
  ],
})

Loading Data

// Get the plugin instance, where `modelRoomLabelPlugin` is the custom name set during initialization
const pluginInstance = five.plugins.modelRoomLabelPlugin

// Call the `load` method to load the model room label data
pluginInstance.load(modelRoomLabels)

Mounting the Node

// Call the appendTo(wrapper: Element) method to mount the DOM node
five.plugins.modelRoomLabelPlugin.appendTo(wrapper)

// Example
React.useEffect(() => {
  // plugin-full-screen-container is the mount node prepared in advance
  const wrapper = document.querySelector('.plugin-full-screen-container')
  if (wrapper) {
    five.plugins.modelRoomLabelPlugin.appendTo(wrapper)
  }
}, [])

Core Methods

• load(data: ModelRoomLabelPluginData) loads the plugin data

You need to load the plugin data manually. For the data source, see the OpenAPI reference.

• appendTo(wrapper: Element) mounts the DOM node

You can load the plugin's DOM module into your own HTML structure.

Source Reference

ModelRoomLabelPlugin example source