Wraps the three.js EnvironmentControls class. Automatically attaches to the R3F camera, scene, and canvas. All EnvironmentControls properties can be set as props.
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { TilesRenderer, EnvironmentControls } 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() {
return (
<Canvas camera={ { position: [ 20, 10, 20 ] } }>
<group rotation-x={ Math.PI / 2 }>
<TilesRenderer url={ URL } />
</group>
<EnvironmentControls enableDamping />
</Canvas>
);
}
createRoot( document.getElementById( 'root' ) ).render( <App /> );<EnvironmentControls
camera?: Camera
scene?: Object3D
domElement?: HTMLCanvasElement
/>On this page
Props
Override the default R3F camera.
Override the default R3F scene.
domElement?: HTMLCanvasElement
Override the default canvas element.