Cruise

CruisePlugin

Overview

CruisePlugin provides automatic cruise preview along a path while in panorama mode.

Live Demo

Drag the VR view and rotate the camera to see the path-guidance effect. Click "Start Cruise" to begin a cruise preview along the current path.

Open the official CruisePlugin demo.

Installation

import { CruisePlugin } from "@realsee/dnalogel"

Development Guide

Initialization

When creating a Five instance, pass CruisePlugin in the plugin initialization parameters.

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

const five = new Five({
    plugins: [
        [
            CruisePlugin,
            'cruisePlugin', // custom plugin name
        ]
    ]
})

Loading Data

You must load cruise path data in order to see the correct result:

// custom path data
const currentGuideLine = [0, 1, 2, 3, 4, 5];
// load the path data
five.plugins.cruisePlugin.load({
    panoIndexList: currentGuideLine,
    moveToFirstPanoEffect: 'montage',
    stay: 1000,
})
// start the cruise
five.plugins.cruisePlugin.play();

Core Methods

• load(serverData: PluginServerData | PluginServerData['data']) loads the plugin data

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

• play: () => void starts the cruise
• playFrom: (options: { index?: number; id?: string }) => void starts the cruise from a specific node
• playFromStart: () => void starts the cruise from the first node
• pause: () => void pauses the cruise
• setState: (state: Partial<PluginState>) => void sets cruise parameters
• show: () => void shows the cruise path
• hide: () => void hides the cruise path
• enable: () => void enables the plugin
• disable: () => void disables the plugin
• dispose: () => void destroys the plugin

Source Reference

CruisePlugin example source