Registers a plugin on the nearest parent TilesRenderer. Must be a child of TilesRenderer. All properties on the plugin instance can be set as props directly. Note that some plugin properties cannot be changed after construction.
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { TilesRenderer, TilesPlugin, EnvironmentControls } from '3d-tiles-renderer/r3f';
import { TilesFadePlugin } from '3d-tiles-renderer/three/plugins';
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 }>
<TilesPlugin plugin={ TilesFadePlugin } />
</TilesRenderer>
</group>
<EnvironmentControls enableDamping />
</Canvas>
);
}
createRoot( document.getElementById( 'root' ) ).render( <App /> );<TilesPlugin
plugin: function
args?: Object | Array
children?: ReactNode
/>Props
plugin: function
The plugin class to instantiate.
args?: Object | Array
Constructor arguments: an object (single arg) or array (spread as multiple args).
The plugin is re-instantiated whenever the values of args change (a shallow comparison), so an inline function or
object inside args recreates the plugin on every render, dropping whatever it had loaded. Memoize such values with
useMemo or useCallback, and prefer setting properties that can change at runtime as props rather than constructor
arguments.
children?: ReactNode
Children rendered once the plugin is registered.