Use ion key

Author: gkjohnson

example/googleMapsAerial.js

@@ -1,5 +1,5 @@
 import { GeoUtils, WGS84_ELLIPSOID, TilesRenderer } from '3d-tiles-renderer';
-import { GoogleCloudAuthPlugin, TilesFadePlugin, TileCompressionPlugin, GLTFExtensionsPlugin } from '3d-tiles-renderer/plugins';
+import { TilesFadePlugin, TileCompressionPlugin, GLTFExtensionsPlugin, CesiumIonAuthPlugin } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
 	WebGLRenderer,
@@ -8,30 +8,18 @@ import {
 	MathUtils,
 } from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 let camera, controls, scene, renderer, tiles;
 
 const raycaster = new Raycaster();
 raycaster.firstHitOnly = true;
 
-const apiKey = localStorage.getItem( 'googleApiKey' ) ?? 'put-your-api-key-here';
-
-const params = {
-
-	'apiKey': apiKey,
-	'reload': reinstantiateTiles,
-
-};
-
 init();
 animate();
 
 function reinstantiateTiles() {
 
-	localStorage.setItem( 'googleApiKey', params.apiKey );
-
 	if ( tiles ) {
 
 		scene.remove( tiles.group );
@@ -41,7 +29,7 @@ function reinstantiateTiles() {
 	}
 
 	tiles = new TilesRenderer();
-	tiles.registerPlugin( new GoogleCloudAuthPlugin( { apiToken: params.apiKey } ) );
+	tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: import.meta.env.VITE_ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
 	tiles.registerPlugin( new TileCompressionPlugin() );
 	tiles.registerPlugin( new TilesFadePlugin() );
 	tiles.registerPlugin( new GLTFExtensionsPlugin( {
@@ -96,13 +84,6 @@ function init() {
 	window.addEventListener( 'resize', onWindowResize, false );
 	window.addEventListener( 'hashchange', initFromHash );
 
-	// GUI
-	const gui = new GUI();
-	gui.width = 300;
-	gui.add( params, 'apiKey' );
-	gui.add( params, 'reload' );
-	gui.open();
-
 	// run hash functions
 	initFromHash();
 

example/googleMapsExample.js

@@ -7,13 +7,13 @@ import {
 	TilesRenderer,
 } from '3d-tiles-renderer';
 import {
-	GoogleCloudAuthPlugin,
 	TilesFadePlugin,
 	UpdateOnChangePlugin,
 	TileCompressionPlugin,
 	UnloadTilesPlugin,
 	GLTFExtensionsPlugin,
 	BatchedTilesPlugin,
+	CesiumIonAuthPlugin,
 } from '3d-tiles-renderer/plugins';
 import {
 	Scene,
@@ -29,15 +29,12 @@ import Stats from 'three/examples/jsm/libs/stats.module.js';
 let controls, scene, renderer, tiles, transition;
 let statsContainer, stats;
 
-const apiKey = localStorage.getItem( 'googleApiKey' ) ?? 'put-your-api-key-here';
-
 const params = {
 
 	orthographic: false,
 
 	enableCacheDisplay: false,
 	enableRendererStats: false,
-	apiKey: apiKey,
 	useBatchedMesh: Boolean( new URLSearchParams( window.location.hash.replace( /^#/, '' ) ).get( 'batched' ) ),
 	errorTarget: 40,
 
@@ -58,10 +55,8 @@ function reinstantiateTiles() {
 
 	}
 
-	localStorage.setItem( 'googleApiKey', params.apiKey );
-
 	tiles = new TilesRenderer();
-	tiles.registerPlugin( new GoogleCloudAuthPlugin( { apiToken: params.apiKey, autoRefreshToken: true } ) );
+	tiles.registerPlugin( new CesiumIonAuthPlugin( { apiToken: import.meta.env.VITE_ION_KEY, assetId: '2275207', autoRefreshToken: true } ) );
 	tiles.registerPlugin( new TileCompressionPlugin() );
 	tiles.registerPlugin( new UpdateOnChangePlugin() );
 	tiles.registerPlugin( new UnloadTilesPlugin() );
@@ -152,7 +147,6 @@ function init() {
 	} );
 
 	const mapsOptions = gui.addFolder( 'Google Photorealistic Tiles' );
-	mapsOptions.add( params, 'apiKey' );
 	mapsOptions.add( params, 'useBatchedMesh' ).listen();
 	mapsOptions.add( params, 'reload' );