Wrapper for the three.js TilesRenderer class. All properties on the TilesRenderer instance can
be set as props using dot-notation for nested properties (e.g. lruCache-minSize). Events are
registered with a camel-cased on prefix (e.g. onLoadModel).
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 /> );<TilesRenderer
url?: string
enabled: boolean = true
group?: Object
children?: ReactNode
/>Props
url?: string
URL of the tileset to load.
enabled: boolean = true
If false, update is not called on the renderer each frame.
group?: Object
Props applied to the root Three.js group of the tileset.
children?: ReactNode
Child components such as TilesPlugin, GlobeControls, etc.