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.
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).
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
.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.