# CameraTransition

component in `3d-tiles-renderer/r3f`

```js
import { CameraTransition } from '3d-tiles-renderer/r3f';
```

Manages transitions between perspective and orthographic cameras. Wraps CameraTransitionManager
and integrates with R3F's camera state. All CameraTransitionManager properties can be set as props.

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

```jsx
import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { TilesRenderer, EnvironmentControls, CameraTransition } from '3d-tiles-renderer/r3f';

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';

function App() {

	const [ orthographic, setOrthographic ] = useState( false );
	useEffect( () => {

		const interval = setInterval( () => setOrthographic( value => ! value ), 3000 );
		return () => clearInterval( interval );

	}, [] );

	return (
		<Canvas camera={ { position: [ 20, 10, 20 ] } }>
			<group rotation-x={ Math.PI / 2 }>
				<TilesRenderer url={ URL } />
			</group>
			<EnvironmentControls enableDamping />
			<CameraTransition mode={ orthographic ? 'orthographic' : 'perspective' } />
		</Canvas>
	);

}

createRoot( document.getElementById( 'root' ) ).render( <App /> );
```

## Props

- `mode`, `string`, optional, default `'perspective'`: Active camera mode: `'perspective'` or `'orthographic'`.
- `perspectiveCamera`, `PerspectiveCamera`, optional: Override the internal perspective camera.
- `orthographicCamera`, `OrthographicCamera`, optional: Override the internal orthographic camera.
- `onBeforeToggle`, `function`, optional: Called before the camera mode switches, with the manager
and target camera as arguments. Defaults to syncing via active controls if present.