# CameraTransitionManager

class in `3d-tiles-renderer/three`, extends `EventDispatcher`

```js
import { CameraTransitionManager } from '3d-tiles-renderer/three';
```

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.

Example: Switching between a perspective and an orthographic camera every few seconds

```js
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 );

} );
```

## Constructor

```js
new CameraTransitionManager( perspectiveCamera?: PerspectiveCamera, orthographicCamera?: OrthographicCamera )
```

- `perspectiveCamera`, `PerspectiveCamera`, optional: Perspective camera to use. Defaults to a new PerspectiveCamera.
- `orthographicCamera`, `OrthographicCamera`, optional: Orthographic camera to use. Defaults to a new OrthographicCamera.

## Properties

### .animating: boolean

readonly

Whether a transition animation is currently in progress.

### .alpha: number

readonly

Transition progress from 0 (at perspective) to 1 (at orthographic).

### .camera: Camera

readonly

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

default `true`

When true, the orthographic camera position is offset backwards along the view direction so it does not clip into terrain.

### .orthographicOffset: number

default `50`

Distance the orthographic camera is pushed back when `orthographicPositionalZoom` is true.

### .fixedPoint: Vector3

default `new Vector3()`

World-space point that remains visually fixed during the transition.

### .duration: number

default `200`

Duration of the animated transition in milliseconds.

### .autoSync: boolean

default `true`

When true, cameras are synced automatically before each `update` call.

### .easeFunction: function

default `x => x`

Easing function applied to the raw transition alpha. Receives and returns a value in [0, 1].

## Methods

### .toggle

```js
.toggle(  )
```

Begins an animated transition to the opposite camera mode. Dispatches a `'toggle'` event.

### .update

```js
.update( deltaTime?: number )
```

Advances the transition animation and updates the active camera. Must be called each frame.

- `deltaTime`, `number`, optional: Time in seconds since the last frame. Defaults to the clock delta, capped at 64ms.

### .syncCameras

```js
.syncCameras(  )
```

Synchronises the non-active camera so that both cameras represent the same viewpoint.
Called automatically by `update` when `autoSync` is true.