orbit-view.md

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.

<iframe height="450" style={{width:'100%'}} scrolling="no" title="deck.gl OrbitView" src="https://codepen.io/vis-gl/embed/gOLprOZ?height=450&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen deck.gl OrbitView by vis.gl (@vis-gl) on CodePen. </iframe>

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) {#orbitaxis}

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

projectionMatrix (Array[16], optional) {#projectionmatrix}

Projection matrix.

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

fovy (Number, optional) {#fovy}

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

near (Number, optional) {#near}

Distance of near clipping plane. Default 0.1.

far (Number, optional) {#far}

Distance of far clipping plane. Default 1000.

orthographic (Boolean) {#orthographic}

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