# TilesRenderer

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

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

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`).

Example: Loading a tileset in React Three Fiber

```jsx
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 /> );
```

## Props

- `url`, `string`, optional: URL of the tileset to load.
- `enabled`, `boolean`, optional, default `true`: If false, `update` is not called on the renderer each frame.
- `group`, `Object`, optional: Props applied to the root Three.js group of the tileset.
- `children`, `ReactNode`, optional: Child components such as TilesPlugin, GlobeControls, etc.