Demo updates

NASA-AMMOS · Jan 14, 2025 · 2e554f3 · 2e554f3
1 parent ac6a4e4
commit 2e554f3
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 15 deletions.
diff --git a/example/googleMapsAerial.html b/example/googleMapsAerial.html
@@ -57,7 +57,7 @@
 			<div>
 				Example using <a href="https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles">Googles Photorealistic 3D Tiles</a> - Tokyo Tower
 				<br/>
-				Google Cloud Tiles API key required
+				Google Cloud or Cesium Ion API key required
 			</div>
 		</div>
 		<div id="credits">

diff --git a/example/googleMapsExample.html b/example/googleMapsExample.html
@@ -57,7 +57,7 @@
 			<div>
 				Example using <a href="https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles">Googles Photorealistic 3D Tiles</a> - Globe
 				<br/>
-				Google Cloud Tiles API key required
+				Google Cloud or Cesium Ion API key required
 			</div>
 		</div>
 		<div id="credits">

diff --git a/example/r3f/atmosphere.html b/example/r3f/atmosphere.html
@@ -35,7 +35,7 @@
 			Example using <a href="https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles">Google Photorealistic Tiles</a>
 			& <a href="https://github.com/takram-design-engineering/three-geospatial">@takram/three-geospatial</a> atmosphere effects.
 			<br/>
-			Google Cloud API Token required.
+			Google Cloud or Cesium Ion API Token required.
 		</div>
 		<div id="root"></div>
 		<script type="module" src="./atmosphere.jsx"></script>

diff --git a/example/r3f/globe.html b/example/r3f/globe.html
@@ -34,7 +34,7 @@
 		<div id="info">
 			Example using <a href="https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles">Google Photorealistic Tiles</a> & <a href="https://r3f.docs.pmnd.rs">@react-three/fiber</a>.
 			<br/>
-			Google Cloud API Token required.
+			Google Cloud or Cesium Ion API Token required.
 		</div>
 		<div id="root"></div>
 		<script type="module" src="./globe.jsx"></script>

diff --git a/example/r3f/ion.html b/example/r3f/ion.html
@@ -34,7 +34,7 @@
 		<div id="info">
 			Example using <a href="https://ion.cesium.com/">Cesium Ion</a> & <a href="https://r3f.docs.pmnd.rs">@react-three/fiber</a>.
 			<br/>
-			Paste the evaluation token from the <a target="_blank" href="https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Core/Ion.js#L6-L7">Cesium repository</a> or your own.
+			Paste your own Cesium Ion key to view other assets.
 		</div>
 		<div id="root"></div>
 		<script type="module" src="./ion.jsx"></script>

diff --git a/example/r3f/ion.jsx b/example/r3f/ion.jsx
@@ -18,26 +18,21 @@ const dracoLoader = new DRACOLoader().setDecoderPath( 'https://www.gstatic.com/d
 function App() {
 
 	const levaParams = {
-		apiToken: {
-			value: localStorage.getItem( 'ion-token' ) || 'put-your-api-key-here',
-			onChange: ( value ) => localStorage.setItem( 'ion-token', value ),
-			transient: false,
-		},
 		assetId: {
-			value: '40866',
+			value: '1415196',
 			options: {
 				'Aerometrex - San Francisco': '1415196',
 				'Aerometrex - Denver': '354307',
 				'New York City 3D Buildings': '75343',
 				'Melbourne Photogrammetry': '69380',
-				'Cesium HQ': '40866',
+				// 'Cesium HQ': '40866',
 				'Melbourne Point Cloud': '43978',
 				'Montreal Point Cloud': '28945',
 			},
 		},
 	};
 
-	const { apiToken, assetId } = useControls( levaParams );
+	const { assetId } = useControls( levaParams );
 	return (
 		<Canvas
 			frameloop='demand'
@@ -59,8 +54,8 @@ function App() {
 				3D Tiles renderer tile set
 				Use a "key" property to ensure the tiles renderer gets recreated when the api token or asset change
 			*/}
-			<TilesRenderer key={ assetId + apiToken }>
-				<TilesPlugin plugin={ CesiumIonAuthPlugin } args={ { apiToken, assetId } } />
+			<TilesRenderer key={ assetId }>
+				<TilesPlugin plugin={ CesiumIonAuthPlugin } args={ { apiToken: import.meta.env.VITE_ION_KEY, assetId } } />
 				<TilesPlugin plugin={ GLTFExtensionsPlugin } dracoLoader={ dracoLoader } />
 				<TilesPlugin plugin={ ReorientationPlugin } />
 				<TilesPlugin plugin={ UpdateOnChangePlugin } />