Model "Mini-Window"

ModelViewPlugin

The model "mini-window" renders Five SDK's spatial-overview mode Five.Mode.Floorplan as a "mini-window" inside a DOM node, allowing the panorama and the model to be displayed side by side.

Example

Open the Model Mini-Window demo to try the plugin outside this documentation page.

Installation & Import

import {  ModelViewPlugin } from "@realsee/dnalogel"

Development Guide

Initialization

When you create the Five instance, simply pass ModelViewPlugin in the plugin initialization parameters.

import { Five } from '@realsee/five'
import { ModelViewPlugin } from "@realsee/dnalogel";

const five = new Five({
    plugins: [
        [
            ModelViewPlugin,
            'modelViewPlugin', // Custom plugin name
            {
                // Parameter configuration
            }
        ]
    ]
})

Mounting the Node

Obtain a reference to the ModelViewPlugin instance through five.plugins.modelViewPlugin. The plugin instance provides two methods:

• appendTo(element: HTMLElement, size?: { width?: number; height?: number }): void: Mounts the rendered content into the corresponding DOM node.
• refresh(size?: { width?: number; height?: number }): void: Forces a refresh, i.e. re-renders once.

Use the appendTo method to mount the DOM node.

five.plugins.modelViewPlugin.appendTo(wrapperElement)

// Example usage of the refresh method
// five.plugins.modelViewPlugin.refresh({ width: 160, height: 180 })

Source Reference

ModelViewPlugin example source