Add a "force-rerender" event to notify react when the display needs t…

…o be updated (#851)
NASA-AMMOS · Dec 2, 2024 · 1f4a454 · 1f4a454
1 parent c482d87
commit 1f4a454
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/example/r3f/globe.jsx b/example/r3f/globe.jsx
@@ -84,6 +84,7 @@ function App() {
 	const { apiToken, ortho } = useControls( levaParams );
 	return (
 		<Canvas
+			frameloop='demand'
 			camera={ {
 				position: [ 0, 0.5 * 1e7, 1.5 * 1e7 ],
 			} }

diff --git a/src/plugins/three/UpdateOnChange.d.ts → src/plugins/three/UpdateOnChangePlugin.d.ts b/src/plugins/three/UpdateOnChange.d.ts → src/plugins/three/UpdateOnChangePlugin.d.ts
diff --git a/src/plugins/three/fade/TilesFadePlugin.js b/src/plugins/three/fade/TilesFadePlugin.js
@@ -121,6 +121,7 @@ function onUpdateAfter() {
 	if ( fadingBefore !== 0 && fadingAfter !== 0 ) {
 
 		tiles.dispatchEvent( { type: 'fade-change' } );
+		tiles.dispatchEvent( { type: 'force-rerender' } );
 
 	}
 
@@ -240,8 +241,20 @@ export class TilesFadePlugin {
 		tiles.group.add( fadeGroup );
 
 		const fadeManager = this._fadeManager;
-		fadeManager.onFadeSetStart = () => tiles.dispatchEvent( { type: 'fade-start' } );
-		fadeManager.onFadeSetComplete = () => tiles.dispatchEvent( { type: 'fade-end' } );
+		fadeManager.onFadeSetStart = () => {
+
+			tiles.dispatchEvent( { type: 'fade-start' } );
+			tiles.dispatchEvent( { type: 'force-rerender' } );
+
+		};
+
+		fadeManager.onFadeSetComplete = () => {
+
+			tiles.dispatchEvent( { type: 'fade-end' } );
+			tiles.dispatchEvent( { type: 'force-rerender' } );
+
+		};
+
 		fadeManager.onFadeComplete = onFadeComplete.bind( this );
 
 		this.tiles = tiles;

diff --git a/src/r3f/components/TilesRenderer.jsx b/src/r3f/components/TilesRenderer.jsx
@@ -153,6 +153,7 @@ export const TilesRenderer = forwardRef( function TilesRenderer( props, ref ) {
 
 		const tiles = new TilesRendererImpl( url );
 		tiles.addEventListener( 'load-content', () => invalidate() );
+		tiles.addEventListener( 'force-rerender', () => invalidate() );
 		setTiles( tiles );
 
 		return () => {