3DTilesRendererJS/example/mars.js

import {
	DebugTilesRenderer as TilesRenderer,
} from '../src/index.js';
import {
	Scene,
	DirectionalLight,
	AmbientLight,
	WebGLRenderer,
	PerspectiveCamera,
	Group,
	sRGBEncoding,
	FogExp2,
} from 'three';
import { FlyOrbitControls } from './FlyOrbitControls.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import { LoadingManager } from 'three';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

let camera, controls, scene, renderer;
let groundTiles, skyTiles;
let tilesRendererArr = [];

const params = {

	errorTarget: 12,
	displayBoxBounds: false,
	fog: false,

};

init();
render();

function init() {

	const fog = new FogExp2( 0xd8cec0, .0075, 250 );
	scene = new Scene();

	// primary camera view
	renderer = new WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xd8cec0 );
	renderer.outputEncoding = sRGBEncoding;

	document.body.appendChild( renderer.domElement );
	renderer.domElement.tabIndex = 1;

	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
	camera.position.set( 20, 10, 20 );

	// controls
	controls = new FlyOrbitControls( camera, renderer.domElement );
	controls.screenSpacePanning = false;
	controls.minDistance = 1;
	controls.maxDistance = 2000;
	controls.maxPolarAngle = Math.PI / 2;
	controls.baseSpeed = 0.1;
	controls.fastSpeed = 0.2;

	// lights
	const dirLight = new DirectionalLight( 0xffffff );
	dirLight.position.set( 1, 2, 3 );
	scene.add( dirLight );

	const ambLight = new AmbientLight( 0xffffff, 0.2 );
	scene.add( ambLight );

	const tilesParent = new Group();
	tilesParent.rotation.set( Math.PI / 2, 0, 0 );
	scene.add( tilesParent );

	/*
	//groundTiles = new TilesRenderer( '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' );
	groundTiles = new TilesRenderer('https://testgis.4dage.com/LVBADUI_qp/tileset.json');
	
	groundTiles.fetchOptions.mode = 'cors';
	groundTiles.lruCache.minSize = 900;
	groundTiles.lruCache.maxSize = 1300;
	groundTiles.errorTarget = 12;
	*/
	//https://testgis.4dage.com/gaoling0805-qp/
	loadTileSet('https://testgis.4dage.com/LVBADUI_qp/',camera,renderer);
	//loadTileSet('https://testgis.4dage.com/gaoling0805-qp/',camera,renderer);

	// skyTiles = new TilesRenderer( 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_sky/0528_0260184_to_s64o256_sky_tileset.json' );
	// skyTiles.fetchOptions.mode = 'cors';
	// skyTiles.lruCache = groundTiles.lruCache;

	// tilesParent.add( groundTiles.group, skyTiles.group );

	onWindowResize();
	window.addEventListener( 'resize', onWindowResize, false );

	const gui = new GUI();
	gui.add( params, 'fog' ).onChange( v => {

		scene.fog = v ? fog : null;

	} );

	gui.add( params, 'displayBoxBounds' );
	gui.add( params, 'errorTarget', 0, 100 );
	gui.open();

}

function loadTileSet(qzpath,camera,renderer){
	// 加载json，解析json 取出children中的路径进行拼装加载
	//const qzpath = 'http://192.168.1.136:8077/sqsftilte/'
     
	//get(qzpath + 'tileset.json').then((res)=>{
    //debugger;

	fetch(qzpath + 'tileset.json').then(response => response.json()).then(data => {
		console.log(data)
		const tilesetArr = data.root.children
		for (const tilese of tilesetArr) {
		  // console.log(qzpath + tilese.content.uri)
		  const tilesRenderer = new TilesRenderer( qzpath + tilese.content.uri )

		  const gltfLoader = new GLTFLoader( tilesRenderer.manager );
		  const dracoLoader = new DRACOLoader( tilesRenderer.manager );
		  dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.128.0/examples/js/libs/draco/gltf/' );
		  gltfLoader.setDRACOLoader( dracoLoader );
		  tilesRenderer.manager.addHandler( /\.gltf$/, gltfLoader );
		  tilesRenderer.manager.addHandler( /\.glb$/, gltfLoader );

		  tilesRenderer.setCamera( camera )
		  tilesRenderer.setResolutionFromRenderer( camera, renderer )
		  const tilesObj = tilesRenderer.group
		  tilesObj.rotation.set(-Math.PI / 2, 0, 0)
		  scene.add( tilesObj )
		  tilesRendererArr.push(tilesRenderer)
		}
	});

	// fetch(qzpath + 'tileset.json').then((res)=>{
	//   // console.log(res)
	//   const tilesetArr = res.root.children
	//   for (const tilese of tilesetArr) {
	// 	// console.log(qzpath + tilese.content.uri)
	// 	const tilesRenderer = new TilesRenderer( qzpath + tilese.content.uri )
	// 	tilesRenderer.setCamera( camera )
	// 	tilesRenderer.setResolutionFromRenderer( camera, renderer )
	// 	const tilesObj = tilesRenderer.group
	// 	tilesObj.rotation.set(-Math.PI / 2, 0, 0)
	// 	scene.add( tilesObj )
	// 	tilesRendererArr.push(tilesRenderer)
	//   }
	//})
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setPixelRatio( window.devicePixelRatio );

}

function render() {

	requestAnimationFrame( render );

	camera.updateMatrixWorld();
	for (const tilesRenderer of tilesRendererArr) {
		tilesRenderer.update()
	  }
	
	// groundTiles.errorTarget = params.errorTarget;
	// groundTiles.displayBoxBounds = params.displayBoxBounds;
	// skyTiles.displayBoxBounds = params.displayBoxBounds;

	// groundTiles.setCamera( camera );
	// groundTiles.setResolutionFromRenderer( camera, renderer );
	// groundTiles.update();

	// skyTiles.setCamera( camera );
	// skyTiles.setResolutionFromRenderer( camera, renderer );
	// skyTiles.update();

	renderer.render( scene, camera );

}