Reference Source
public class | source

NavCubePlugin

Extends:

Plugin → NavCubePlugin

Viewer plugin that lets us look at the entire 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

    fitVisible: false      // Fit whole scene, including invisible objects (default)
});

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 whether the axis, corner and edge-aligned views will fit the view to the entire Scene or just to visible object-Entitys.

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

setFitVisible(fitVisible: Boolean)

Sets whether the axis, corner and edge-aligned views will fit the view to the entire Scene or just to visible object-Entitys.

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
  • optional

ID of an existing HTML canvas to display the NavCube - either this or canvasElement is mandatory. When both values are given, the element reference is always preferred to the ID.

cfg.canvasElement HTMLCanvasElement
  • optional

Reference of an existing HTML canvas to display the NavCube - either this or canvasId is mandatory. When both values are given, the element reference is always preferred to the ID.

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.

cfg.color String
  • optional
  • default: "lightgrey

Custom uniform color for the faces of the NavCube.

cfg.frontColor String
  • optional
  • default: "#55FF55"

Custom color for the front face of the NavCube. Overrides color.

cfg.backColor String
  • optional
  • default: "#55FF55"

Custom color for the back face of the NavCube. Overrides color.

cfg.leftColor String
  • optional
  • default: "#FF5555"

Custom color for the left face of the NavCube. Overrides color.

cfg.rightColor String
  • optional
  • default: "#FF5555"

Custom color for the right face of the NavCube. Overrides color.

cfg.topColor String
  • optional
  • default: "#5555FF"

Custom color for the top face of the NavCube. Overrides color.

cfg.bottomColor String
  • optional
  • default: "#5555FF"

Custom color for the bottom face of the NavCube. Overrides color.

cfg.hoverColor String
  • optional
  • default: "rgba(0,0,0,0.4)"

Custom color for highlighting regions on the NavCube as we hover the pointer over them.

cfg.fitVisible Boolean
  • optional
  • default: false

Sets whether the axis, corner and edge-aligned views will fit the view to the entire Scene or just to visible object-Entitys. Entitys are visible objects when Entity#isObject and Entity#visible are both true.

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 getFitVisible(): Boolean source

Gets whether the axis, corner and edge-aligned views will fit the view to the entire Scene or just to visible object-Entitys.

Entitys are visible objects when Entity#isObject and Entity#visible are both true.

Return:

Boolean

True when fitting only visible object-Entitys.

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 setFitVisible(fitVisible: Boolean) source

Sets whether the axis, corner and edge-aligned views will fit the view to the entire Scene or just to visible object-Entitys.

Entitys are visible objects when Entity#isObject and Entity#visible are both true.

Params:

NameTypeAttributeDescription
fitVisible Boolean

Set true to fit only visible object-Entitys.

public setVisible(visible: Boolean) source

Sets if the NavCube is visible.

Params:

NameTypeAttributeDescription
visible Boolean

Whether or not the NavCube is visible.