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).
children?: ReactNode
Children rendered once the plugin is registered.