Plugin that generates tiled surface geometry from a tiling scheme, optionally loading image overlay data.
The tiling scheme and projection are derived from a provided overlay.
If the source's projection is cartographic (any EPSG scheme), the plugin supports
both planar and ellipsoidal geometry via the projection option.
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer/three';
import { GeneratedSurfacePlugin, XYZTilesOverlay } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
const URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const tiles = new TilesRenderer();
tiles.registerPlugin( new GeneratedSurfacePlugin( {
overlay: new XYZTilesOverlay( { url: URL } ),
applyOverlayTexture: true,
} ) );
tiles.setCamera( camera );
tiles.group.rotation.x = - Math.PI / 2;
scene.add( tiles.group );
camera.position.set( 0, 0, 1.75e7 );
const controls = new GlobeControls( scene, camera, renderer.domElement );
controls.setEllipsoid( tiles.ellipsoid, tiles.group );
controls.enableDamping = true;
renderer.setAnimationLoop( () => {
controls.update();
camera.updateMatrixWorld();
tiles.setResolutionFromRenderer( camera, renderer );
tiles.update();
renderer.render( scene, camera );
} );On this page
Methods
new GeneratedSurfacePlugin(
options?: {
// Overlay instance to derive the tiling scheme from. When `applyOverlayTexture` is enabled, also used to texture the generated tile meshes.
overlay: ImageOverlay = null,
// Display the tiles on the ellipsoid, on a plane in the source projection, or on a plane in the named projection scheme.
projection: 'ellipsoid' | 'source' | string = 'ellipsoid',
// For Mercator ellipsoid mode, snap poles to ±90° lat.
endCaps: boolean = true,
// Shift planar tiles so the image is centered at origin.
center: boolean = true,
// Apply recommended TilesRenderer settings.
useRecommendedSettings: boolean = true,
// Whether to apply the overlay's texture to the generated tile meshes.
applyOverlayTexture: boolean = false
}
)