Overlay that renders XYZ/Slippy-map image tiles (e.g. OpenStreetMap) on top of 3D tile geometry. See the Slippy map tilenames specification.
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://tile.openstreetmap.org/{z}/{x}/{y}.png';
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 XYZTilesOverlay(
options?: {
// URL template with `{x}`, `{y}`, `{z}` placeholders.
url?: string,
// Number of zoom levels.
levels: number = 20,
// Tile pixel size.
tileDimension: number = 256,
// Projection scheme identifier.
projection: string = 'EPSG:3857',
// Overlay opacity (0–1).
opacity: number = 1,
// Tint color.
color: number | Color = 0xffffff,
// Planar projection frame. If null, cartographic projection is used.
frame: Matrix4 = null,
// URL rewriting callback.
preprocessURL: function = null,
// Use alpha channel as a surface mask.
alphaMask: boolean = false,
// Invert the alpha channel.
alphaInvert: boolean = false
}
)Inherited
From ImageOverlay
- Properties