Add loading bar to demos

example/r3f/atmosphere.jsx

@@ -41,6 +41,7 @@ import {
 } from '@takram/three-atmosphere/r3f';
 import { Dithering, LensFlare, } from '@takram/three-geospatial-effects/r3f';
 import { toCreasedNormals } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { TilesLoadingBar } from './components/TilesLoadingBar.jsx';
 
 // Plugin to generate creased normals for the tiles
 class TileCreasedNormalsPlugin {
@@ -89,6 +90,7 @@ function App() {
 				{/* Add compass gizmo */}
 				<CompassGizmo overrideRenderLoop={ false } />
 
+				<TilesLoadingBar />
 				<GlobeTilesAtmosphere />
 			</TilesRenderer>
 

example/r3f/components/TilesLoadingBar.jsx

@@ -0,0 +1,37 @@
+import { CanvasDOMOverlay, TilesRendererContext } from '3d-tiles-renderer/r3f';
+import { useFrame } from '@react-three/fiber';
+import { useContext, useRef } from 'react';
+
+export function TilesLoadingBar( props ) {
+
+	const tiles = useContext( TilesRendererContext );
+	const domRef = useRef();
+
+	useFrame( () => {
+
+		const element = domRef.current;
+		if ( element && tiles ) {
+
+			element.style.width = `${ tiles.loadProgress * 100 }%`;
+			element.style.opacity = tiles.loadProgress === 1 ? 0 : 1;
+			element.style.transition = tiles.loadProgress === 1 ? 'opacity 0.5s linear' : '';
+
+		}
+
+	} );
+
+	return <CanvasDOMOverlay
+		ref={ domRef }
+		style={ {
+			position: 'absolute',
+			left: 0,
+			bottom: 0,
+			height: '2px',
+			background: 'white',
+			// transition: 'opacity 0.2s linear',
+			opacity: 0,
+			width: '100%',
+		} }
+	/>;
+
+}

example/r3f/globe.jsx

@@ -28,6 +28,7 @@ import { Canvas, useFrame } from '@react-three/fiber';
 import { Environment } from '@react-three/drei';
 import { useControls } from 'leva';
 import { MathUtils, Vector3 } from 'three';
+import { TilesLoadingBar } from './components/TilesLoadingBar.jsx';
 
 const dracoLoader = new DRACOLoader().setDecoderPath( 'https://www.gstatic.com/draco/v1/decoders/' );
 const vec1 = new Vector3();
@@ -121,6 +122,8 @@ function App() {
 
 				{/* Add compass gizmo */}
 				<CompassGizmo />
+
+				<TilesLoadingBar />
 			</TilesRenderer>
 
 			{/* other r3f staging */}

src/r3f/components/CanvasDOMOverlay.jsx

@@ -1,9 +1,9 @@
-import { useMemo, useEffect, StrictMode } from 'react';
+import { useMemo, useEffect, StrictMode, forwardRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useThree } from '@react-three/fiber';
 
 // Utility class for overlaying dom elements on top of the canvas
-export function CanvasDOMOverlay( { children, ...rest } ) {
+export const CanvasDOMOverlay = forwardRef( function CanvasDOMOverlay( { children, ...rest }, ref ) {
 
 	// create the dom element and react root
 	const [ gl ] = useThree( state => [ state.gl ] );
@@ -27,15 +27,15 @@ export function CanvasDOMOverlay( { children, ...rest } ) {
 
 		};
 
-	}, [ container ] );
+	}, [ container, gl.domElement.parentNode ] );
 
 	// render the children into the container
 	root.render(
 		<StrictMode>
-			<div { ...rest }>
+			<div { ...rest } ref={ ref }>
 				{ children }
 			</div>
 		</StrictMode>
 	);
 
-}
+} );