Manages an animated transition between a perspective and an orthographic camera.
During the transition a blended transitionCamera is used. Fires events for the
transition lifecycle and the active camera change.
import { OrthographicCamera } from 'three';
import { TilesRenderer, EnvironmentControls, CameraTransitionManager } from '3d-tiles-renderer/three';
// scene, camera and renderer are initialized here
const URL = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json';
const aspect = window.innerWidth / window.innerHeight;
const transition = new CameraTransitionManager( camera, new OrthographicCamera( - aspect, aspect, 1, - 1 ) );
camera.position.set( 20, 10, 20 );
camera.lookAt( 0, 0, 0 );
const tiles = new TilesRenderer( URL );
tiles.setCamera( camera );
tiles.group.rotation.x = Math.PI / 2;
scene.add( tiles.group );
const controls = new EnvironmentControls( scene, camera, renderer.domElement );
controls.enableDamping = true;
transition.addEventListener( 'camera-change', ( { camera, prevCamera } ) => {
tiles.deleteCamera( prevCamera );
tiles.setCamera( camera );
controls.setCamera( camera );
} );
setInterval( () => {
controls.getPivotPoint( transition.fixedPoint );
transition.toggle();
}, 3000 );
renderer.setAnimationLoop( () => {
controls.enabled = ! transition.animating;
controls.update();
transition.update();
const camera = transition.camera;
camera.updateMatrixWorld();
tiles.setResolutionFromRenderer( camera, renderer );
tiles.update();
renderer.render( scene, camera );
} );On this page
Properties
Whether a transition animation is currently in progress.
Transition progress from 0 (at perspective) to 1 (at orthographic).
The currently active camera. Returns perspectiveCamera, orthographicCamera, or the
blended transitionCamera depending on the current transition state.
mode: string
The target camera mode. Set to 'perspective' or 'orthographic' to jump instantly without
animation. Use toggle() to animate the transition.
orthographicPositionalZoom: boolean = true
When true, the orthographic camera position is offset backwards along the view direction so it does not clip into terrain.
orthographicOffset: number = 50
Distance the orthographic camera is pushed back when orthographicPositionalZoom is true.
fixedPoint: Vector3 = new Vector3()
World-space point that remains visually fixed during the transition.
duration: number = 200
Duration of the animated transition in milliseconds.
autoSync: boolean = true
When true, cameras are synced automatically before each update call.
easeFunction: function = x => x
Easing function applied to the raw transition alpha. Receives and returns a value in [0, 1].
Methods
new CameraTransitionManager(
// Perspective camera to use. Defaults to a new PerspectiveCamera.
perspectiveCamera?: PerspectiveCamera,
// Orthographic camera to use. Defaults to a new OrthographicCamera.
orthographicCamera?: OrthographicCamera
)toggle(): voidBegins an animated transition to the opposite camera mode. Dispatches a 'toggle' event.
update(
// Time in seconds since the last frame. Defaults to the clock delta, capped at 64ms.
deltaTime?: number
): voidAdvances the transition animation and updates the active camera. Must be called each frame.
syncCameras(): voidSynchronises the non-active camera so that both cameras represent the same viewpoint.
Called automatically by update when autoSync is true.