TerrainRGBMeshPlugin for the Terrarium encoding.
import { AmbientLight, DirectionalLight } from 'three';
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer/three';
import { TerrariumMeshPlugin, XYZTilesOverlay } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
const URL = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png';
const SATELLITE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const light = new DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 2, 3 );
scene.add( light, new AmbientLight( 0xffffff, 0.5 ) );
const tiles = new TilesRenderer();
tiles.registerPlugin( new TerrariumMeshPlugin( {
url: URL,
overlay: new XYZTilesOverlay( { url: SATELLITE_URL } ),
applyOverlayTexture: true,
} ) );
tiles.setCamera( camera );
tiles.group.rotation.x = - Math.PI / 2;
scene.add( tiles.group );
camera.position.set( - 1950401, 3733274, 4784084 );
camera.quaternion.set( 0.1460, 0.7890, 0.3559, 0.4791 );
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 );
} );