From 2e554f3aae7e8502de179a0a525700f57f25cbd0 Mon Sep 17 00:00:00 2001
From: Garrett Johnson <garrett.kjohnson@gmail.com>
Date: Tue, 14 Jan 2025 12:07:40 +0900
Subject: [PATCH] Demo updates

---
 example/googleMapsAerial.html  |  2 +-
 example/googleMapsExample.html |  2 +-
 example/r3f/atmosphere.html    |  2 +-
 example/r3f/globe.html         |  2 +-
 example/r3f/ion.html           |  2 +-
 example/r3f/ion.jsx            | 15 +++++----------
 6 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/example/googleMapsAerial.html b/example/googleMapsAerial.html
index 90577ac9e..fe9bfb6bb 100644
--- 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
index 23ba05e33..aa267533c 100644
--- 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
index 5795f38e3..b4314d56f 100644
--- 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
index 3695fec65..7b0d37b9d 100644
--- 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
index 0c44e563c..d081fe437 100644
--- 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
index cfcccba51..98e60849c 100644
--- 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 } />