📦 Top-View Model Floorplan

TopviewFloorplanPlugin

External Demo

Open the Top-View Model Floorplan demo. In the external demo, choose Top-View Model to inspect the floorplan in that state.

Overview

The Top-View Model Floorplan plugin provides a set of floorplan interactions built for the VR 3D model state.

It is a simplified version of the Model Floorplan plugin (ModelFloorplanPlugin) that provides display capabilities only. For the relevant usage and API, you can refer directly to ModelFloorplanPlugin.

Difference:

The Top-View Model Floorplan plugin is bound to the Mode state of the five instance: when five.mode is Five.Mode.Topview and the animation has finished, the 2D floorplan module is automatically shown. When the instance is not in the Five.Mode.Topview state, the 2D floorplan module is automatically hidden.

Therefore, you can operate five.mode to indirectly control the display and hiding of the 2D floorplan module. All other features and APIs are identical.

Installation

Choose either yarn or npm for installation, as needed:

npm install @realsee/dnalogel

Import via ES:

import { TopviewFloorplanPlugin } from "@realsee/dnalogel"

Development Guide

Initialization

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

import { Five } from '@realsee/five'

const five = new Five({
    plugins: [
        [
            TopviewFloorplanPlugin,
            'topviewFloorplanPlugin', // custom plugin name
            {
                // example parameter configuration
                selector: '.plugin-full-screen-container',  // replace with your container node
                hoverEnable: true
                /** whether to enable zoom and drag, defaults to false */
                // gestureEnable?: boolean 
            }
        ]
    ]
})

Loading Data

// Get the plugin instance; `topviewFloorplanPlugin` is the custom name set during initialization
const pluginInstance = five.plugins.topviewFloorplanPlugin 

// Call the `load` method to load floorplan data
pluginInstance.load(floorplanServerData)

Core Methods

The core methods provided by TopviewFloorplanPlugin are:

• load(data: FloorplanServerData) loads floorplan data

You need to load the floorplan data manually. For the source of [FloorplanServerData], see the OpenAPI reference.

• appendTo(wrapper: Element) mounts the DOM node

Loads the floorplan DOM module into your HTML structure.

Source Reference

TopviewFloorplanPlugin example source