Reference Source
public class | source

NavCubePlugin

Extends:

Plugin → NavCubePlugin

NavCubePlugin is a Viewer plugin that provides a navigation control that lets us look at the Scene from along a chosen axis or diagonal.

[Run this example]

Overview

  • Rotating the NavCube causes the Viewer's Camera to orbit its current point-of-interest. Conversely, orbiting the Camera causes the NavCube to rotate accordingly.
  • The faces of the NavCube are aligned with the Viewer's Scene's World-space coordinate axis. Clicking on a face moves the Camera to look at the entire Scene along the corresponding axis. Clicking on an edge or a corner looks at the entire Scene along a diagonal.
  • The NavCube can be configured to either jump or fly the Camera to each new position. We can configure how tightly the NavCube fits the Scene to view, and when flying, we can configure how fast it flies. See below for a usage example.

Usage

In the example below, we'll create a Viewer and add a NavCubePlugin, which will create a NavCube gizmo in the canvas with the given ID. Then we'll use the GLTFLoaderPlugin to load a model into the Viewer's Scene. We can then use the NavCube to look at the model along each axis or diagonal.

import {Viewer} from "../src/viewer/Viewer.js";
import {GLTFLoaderPlugin} from "../src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
import {NavCubePlugin} from "../src/plugins/NavCubePlugin/NavCubePlugin.js";

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [-3.93, 2.85, 27.01];
viewer.camera.look = [4.40, 3.72, 8.89];
viewer.camera.up = [-0.01, 0.99, 0.03];

const navCube = new NavCubePlugin(viewer, {

     canvasID: "myNavCubeCanvas",

     visible: true,           // Initially visible (default)

     cameraFly: true,       // Fly camera to each selected axis/diagonal
     cameraFitFOV: 45,        // How much field-of-view the scene takes once camera has fitted it to view
     cameraFlyDuration: 0.5 // How long (in seconds) camera takes to fly to each new axis/diagonal
});

const gltfLoader = new GLTFLoaderPlugin(viewer);

const model = gltfLoader.load({
    id: "myModel",
    src: "./models/gltf/duplex/scene.gltf",
    metaModelSrc: "./metaModels/duplex/metaModel.json", // Sets visual states of object in model
    edges: true
});

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: Object)

Method Summary

Public Methods
public

Destroys this NavCubePlugin.

public

Gets how much of the field-of-view, in degrees, that the Scene should fill the canvas when flying or jumping the Camera to each selected axis or diagonal.

public

Gets whether the Camera flies or jumps to each selected axis or diagonal.

public

When flying the Camera to each new axis or diagonal, gets how long, in seconds, that the Camera takes to get there.

public

Gets if the NavCube is visible.

public

send(name: *, value: *)

public

setCameraFitFOV(cameraFitFOV: Number)

Sets how much of the field-of-view, in degrees, that the Scene should fill the canvas when flying or jumping the Camera to each selected axis or diagonal.

public

setCameraFly(cameraFly: Boolean)

Sets whether the Camera flies or jumps to each selected axis or diagonal.

public

setCameraFlyDuration(cameraFlyDuration: Boolean)

When flying the Camera to each new axis or diagonal, sets how long, in seconds, that the Camera takes to get there.

public

setVisible(visible: Boolean)

Sets if the NavCube is visible.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object)

Fires an event at this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

on(event: String, callback: Function)

Subscribes to an event fired at this Plugin.

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: Object) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg Object

NavCubePlugin configuration.

cfg.id String
  • optional
  • default: "NavCube"

Optional ID for this plugin, so that we can find it within Viewer#plugins.

cfg.canvasId String

ID of a canvas element to display the NavCube.

cfg.visible Boolean
  • optional
  • default: true

Initial visibility.

cfg.cameraFly String
  • optional
  • default: true

Whether the Camera flies or jumps to each selected axis or diagonal.

cfg.cameraFitFOV String
  • optional
  • default: 45

How much of the field-of-view, in degrees, that the 3D scene should fill the Canvas when the Camera moves to an axis or diagonal.

cfg.cameraFlyDuration String
  • optional
  • default: 0.5

When flying the Camera to each new axis or diagonal, how long, in seconds, that the Camera takes to get there.

Public Methods

public destroy() source

Destroys this NavCubePlugin.

Does not destroy the canvas the NavCubePlugin was configured with.

Override:

Plugin#destroy

public getCameraFitFOV(): Number source

Gets how much of the field-of-view, in degrees, that the Scene should fill the canvas when flying or jumping the Camera to each selected axis or diagonal.

Default value is 45.

Return:

Number

Current FOV value.

public getCameraFly(): Boolean source

Gets whether the Camera flies or jumps to each selected axis or diagonal.

Default is true, to fly.

Return:

Boolean

Returns true to fly, else false to jump.

public getCameraFlyDuration(): Boolean source

When flying the Camera to each new axis or diagonal, gets how long, in seconds, that the Camera takes to get there.

Default is 0.5.

Return:

Boolean

Camera flight duration in seconds.

public getVisible(): Boolean source

Gets if the NavCube is visible.

Return:

Boolean

True when the NavCube is visible.

public send(name: *, value: *) source

Params:

NameTypeAttributeDescription
name *
value *

public setCameraFitFOV(cameraFitFOV: Number) source

Sets how much of the field-of-view, in degrees, that the Scene should fill the canvas when flying or jumping the Camera to each selected axis or diagonal.

Default value is 45.

Params:

NameTypeAttributeDescription
cameraFitFOV Number

New FOV value.

public setCameraFly(cameraFly: Boolean) source

Sets whether the Camera flies or jumps to each selected axis or diagonal.

Default is true, to fly.

Params:

NameTypeAttributeDescription
cameraFly Boolean

Set true to fly, else false to jump.

public setCameraFlyDuration(cameraFlyDuration: Boolean) source

When flying the Camera to each new axis or diagonal, sets how long, in seconds, that the Camera takes to get there.

Default is 0.5.

Params:

NameTypeAttributeDescription
cameraFlyDuration Boolean

Camera flight duration in seconds.

public setVisible(visible: Boolean) source

Sets if the NavCube is visible.

Params:

NameTypeAttributeDescription
visible Boolean

Whether or not the NavCube is visible.