3d-tiles-renderer

import { Color, FogExp2, Group } from 'three';
import { TilesRenderer, EnvironmentControls } from '3d-tiles-renderer/three';
import { TilesFadePlugin } from '3d-tiles-renderer/three/plugins';

// scene, camera and renderer are initialized here

// the terrain and the sky dome are separate tilesets
const URL = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/';

scene.background = new Color( 0xd8cec0 );
scene.fog = new FogExp2( 0xd8cec0, 0.0075 );
camera.position.set( 20, 10, 20 );
camera.lookAt( 0, 0, 0 );
camera.far = 4000;
camera.updateProjectionMatrix();

// controls for moving over terrain
const controls = new EnvironmentControls( scene, camera, renderer.domElement );
controls.minZoomDistance = 2;
controls.cameraRadius = 1;
controls.enableDamping = true;

// the data is stored Z up
const group = new Group();
group.rotation.x = Math.PI / 2;
scene.add( group );

const tilesets = [ 'colorize', 'sky' ].map( name => {

	const tiles = new TilesRenderer( `${ URL }0528_0260184_to_s64o256_${ name }/0528_0260184_to_s64o256_${ name }_tileset.json` );
	tiles.registerPlugin( new TilesFadePlugin() );
	tiles.setCamera( camera );
	group.add( tiles.group );
	return tiles;

} );

renderer.setAnimationLoop( () => {

	controls.update();
	camera.updateMatrixWorld();
	for ( const tiles of tilesets ) {

		tiles.setResolutionFromRenderer( camera, renderer );
		tiles.update();

	}

	renderer.render( scene, camera );

} );