Manages transitions between perspective and orthographic cameras. Wraps CameraTransitionManager and integrates with R3F's camera state. All CameraTransitionManager properties can be set as props.
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 /> );<CameraTransition
mode: string = 'perspective'
perspectiveCamera?: PerspectiveCamera
orthographicCamera?: OrthographicCamera
onBeforeToggle?: function
/>Props
mode: string = 'perspective'
Active camera mode: 'perspective' or 'orthographic'.
Override the internal perspective camera.
Override the internal orthographic camera.
onBeforeToggle?: function
Called before the camera mode switches, with the manager and target camera as arguments. Defaults to syncing via active controls if present.