Skip to main content

OrbitView

The OrbitView class is a subclass of View that creates a 3D camera that rotates around a target position. It is usually used for the examination of a 3D scene in non-geospatial use cases.

It's recommended that you read the Views and Projections guide before using this class.

Constructor

import {OrbitView} from '@deck.gl/core';
const view = new OrbitView({id, ...});

OrbitView takes the same parameters as the View superclass constructor, plus the following:

orbitAxis (String, optional)

Axis with 360 degrees rotating freedom, either 'Y' or 'Z', default to 'Z'.

projectionMatrix (Array[16], optional)

Projection matrix.

If projectionMatrix is not supplied, the View class will build a projection matrix from the following parameters:

fovy (Number, optional)

Field of view covered by camera, in the perspective case. In degrees. Default 50.

near (Number, optional)

Distance of near clipping plane. Default 0.1.

far (Number, optional)

Distance of far clipping plane. Default 1000.

orthographic (Boolean)

Whether to create an orthographic or perspective projection matrix. Default is false (perspective projection).

View State

To render, OrbitView needs to be used together with a viewState with the following parameters:

  • target (Number[3], optional) - The world position at the center of the viewport. Default [0, 0, 0].
  • rotationOrbit (Number, optional) - Rotating angle around orbit axis. Default 0.
  • rotationX (Number, optional) - Rotating angle around X axis. Default 0.
  • zoom (Number, optional) - The zoom level of the viewport. zoom: 0 maps one unit distance to one pixel on screen, and increasing zoom by 1 scales the same object to twice as large. Default 0.
  • minZoom (Number, optional) - The min zoom level of the viewport. Default -Infinity.
  • maxZoom (Number, optional) - The max zoom level of the viewport. Default Infinity.
  • minRotationX (Number, optional) - The min rotating angle around X axis. Default -90.
  • maxRotationX (Number, optional) - The max rotating angle around X axis. Default 90.

Controller

By default, OrbitView uses the OrbitController to handle interactivity. To enable the controller, use:

const view = new OrbitView({id: '3d-scene', controller: true});

Visit the OrbitController documentation for a full list of supported options.

Source

modules/core/src/views/orbit-view.ts