Plugin that overrides material shaders to fade tile geometry in and out as tile LODs
change, preventing pop-in. Dispatches fade-change, fade-start, and fade-end
events on the TilesRenderer during animation — use these when doing on-demand
rendering. Works alongside BatchedTilesPlugin when present.
import { TilesRenderer } from '3d-tiles-renderer/three';
import { TilesFadePlugin } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
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';
const tiles = new TilesRenderer( URL );
tiles.registerPlugin( new TilesFadePlugin() );
tiles.setCamera( camera );
tiles.setResolutionFromRenderer( camera, renderer );
tiles.group.rotation.x = Math.PI / 2;
scene.add( tiles.group );
camera.position.set( 20, 10, 20 );
renderer.setAnimationLoop( () => {
camera.updateMatrixWorld();
tiles.update();
renderer.render( scene, camera );
} );On this page
Methods
new TilesFadePlugin(
options?: {
// Time in milliseconds for a tile to fully fade in or out.
fadeDuration: number = 250,
// Maximum simultaneous fade-out tiles. If exceeded, tiles pop instead of fading.
maximumFadeOutTiles: number = 50,
// Whether root-level tiles fade in on their first appearance.
fadeRootTiles: boolean = false
}
)