|
|
@@ -0,0 +1,117 @@
|
|
|
+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 );
|
|
|
+
|
|
|
+}
|
Garrett Johnson