Reference Source 
import {NavCubePlugin} from '@xeokit/xeokit-sdk/src/plugins/NavCubePlugin/NavCubePlugin.js'
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. We can also configure whether the NavCube fits all objects to view, or just the currently visible objects. See below for a usage example.
  • Clicking the NavCube also sets CameraControl#pivotPos to the center of the fitted objects.

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 XKTLoaderPlugin 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, XKTLoaderPlugin, NavCubePlugin} from "xeokit-sdk.es.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)

    synchProjection: false // Keep NavCube in perspective projection, even when camera switches to ortho (default)
});

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/Duplex.ifc.xkt",
    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 whether the NavCube switches between project north and true north
public

Gets the offset angle between project north and true north
public

Gets whether the NavCube switches between perspective and orthographic projections in synchrony with the Camera.
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

setIsProjectNorth(isProjectNorth: Boolean)

Sets whether the NavCube switches between project north and true north
public

setProjectNorthOffsetAngle(projectNorthOffsetAngle: number)

Sets the NavCube project north offset angle (used when isProjectNorth is true
public

setSynchProjection(synchProjection: Boolean)

Sets whether the NavCube switches between perspective and orthographic projections in synchrony with the Camera.
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, forget: Boolean)

Fires an event on this Plugin.
public

Returns true if there are any subscribers to the given event on this Plugin.
public

log(msg: String)

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

off(subId: String)

Cancels an event subscription that was previously made with Plugin#on or Plugin#once.
public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this Plugin.
public

once(event: String, callback: Function, scope: Object)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.
public

scheduleTask(task: *)

Schedule a task to perform on the next browser interval
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.shadowVisible Boolean
  • optional
  • default: true

Whether the shadow of the cube is visible.
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.textColor String
  • optional
  • default: "black"

Custom text color for labels of the NavCube.
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.
cfg.synchProjection Boolean
  • optional
  • default: false

Sets whether the NavCube switches between perspective and orthographic projections in synchrony with the Camera. When false, the NavCube will always be rendered with perspective projection.
cfg.isProjectNorth Boolean
  • optional

sets whether the NavCube switches between true north and project north - using the project north offset angle.
cfg.projectNorthOffsetAngle number
  • optional

sets the NavCube project north offset angle - when the isProjectNorth is 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 getIsProjectNorth(): Boolean source

Gets whether the NavCube switches between project north and true north

Return:

Boolean

isProjectNorth when true - use project north offset

public getProjectNorthOffsetAngle(): number source

Gets the offset angle between project north and true north

Return:

number

projectNorthOffsetAngle

public getSynchProjection(): Boolean source

Gets whether the NavCube switches between perspective and orthographic projections in synchrony with the Camera. When false, the NavCube will always be rendered with perspective projection.

Return:

Boolean

True when NavCube projection is synchronized with Camera#projection.

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

Sets whether the NavCube switches between project north and true north

Params:

NameTypeAttributeDescription
isProjectNorth Boolean

Set true to use project north offset

public setProjectNorthOffsetAngle(projectNorthOffsetAngle: number) source

Sets the NavCube project north offset angle (used when isProjectNorth is true

Params:

NameTypeAttributeDescription
projectNorthOffsetAngle number

Set the vector offset for project north

public setSynchProjection(synchProjection: Boolean) source

Sets whether the NavCube switches between perspective and orthographic projections in synchrony with the Camera. When false, the NavCube will always be rendered with perspective projection.

Params:

NameTypeAttributeDescription
synchProjection Boolean

Set true to keep NavCube projection synchronized with Camera#projection.

public setVisible(visible: Boolean) source

Sets if the NavCube is visible.

Params:

NameTypeAttributeDescription
visible Boolean

Whether or not the NavCube is visible.