import { TilesRenderer, } from '../src/index.js'; import { Scene, DirectionalLight, AmbientLight, WebGLRenderer, PerspectiveCamera, Group, sRGBEncoding, Fog, FogExp2, } from 'three'; import { FlyOrbitControls } from './FlyOrbitControls.js'; import * as dat from 'three/examples/jsm/libs/dat.gui.module.js'; let camera, controls, scene, renderer; let groundTiles, skyTiles; const params = { fog: true, }; init(); render(); function init() { const fog = new FogExp2( 0xd8cec0, .0075, 250 ); scene = new Scene(); scene.fog = fog; // 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.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.fetchOptions.mode = 'cors'; groundTiles.errorTarget = 15; 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 dat.GUI(); gui.add( params, 'fog' ).onChange( v => { scene.fog = v ? fog : null; } ); gui.open(); } 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(); groundTiles.setCamera( camera ); groundTiles.setResolutionFromRenderer( camera, renderer ); groundTiles.update(); skyTiles.setCamera( camera ); skyTiles.setResolutionFromRenderer( camera, renderer ); skyTiles.update(); renderer.render( scene, camera ); }