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 ); }