easy-three-utils 0.0.1

package/src/tileRenderer/r3f/components/CameraTransition.jsx

@@ -0,0 +1,177 @@
+import { forwardRef, useEffect, useMemo } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { CameraTransitionManager } from '3d-tiles-renderer';
+
+export const CameraTransition = forwardRef( function CameraTransition( props, ref ) {
+
+	const { mode = 'perspective', onTransitionStart, onTransitionEnd, perspectiveCamera, orthographicCamera } = props;
+	const [ set, invalidate, controls, camera, size ] = useThree( state => [ state.set, state.invalidate, state.controls, state.camera, state.size ] );
+
+	// create the manager
+	const manager = useMemo( () => {
+
+		const manager = new CameraTransitionManager();
+		manager.autoSync = false;
+
+		if ( camera.isOrthographicCamera ) {
+
+			manager.orthographicCamera.copy( camera );
+			manager.mode = 'orthographic';
+
+		} else {
+
+			manager.perspectiveCamera.copy( camera );
+
+		}
+
+		manager.syncCameras();
+		manager.mode = mode;
+
+		return manager;
+
+		// only respect the camera initially so the default camera settings are automatically used
+
+	}, [] );
+
+	useEffect( () => {
+
+		const { perspectiveCamera, orthographicCamera } = manager;
+		const aspect = size.width / size.height;
+		perspectiveCamera.aspect = aspect;
+		perspectiveCamera.updateProjectionMatrix();
+
+		orthographicCamera.left = - orthographicCamera.top * aspect;
+		orthographicCamera.right = - orthographicCamera.left;
+		perspectiveCamera.updateProjectionMatrix();
+
+	}, [ manager, size ] );
+
+	// assign ref
+	useEffect( () => {
+
+		if ( ref ) {
+
+			if ( ref instanceof Function ) {
+
+				ref( manager );
+
+			} else {
+
+				ref.current = manager;
+
+			}
+
+		}
+
+	}, [ manager, ref ] );
+
+	// set the camera
+	useEffect( () => {
+
+		const cameraCallback = ( { camera } ) => {
+
+			set( () => ( { camera } ) );
+
+		};
+
+		set( () => ( { camera: manager.camera } ) );
+		manager.addEventListener( 'camera-change', cameraCallback );
+		return () => {
+
+			manager.removeEventListener( 'camera-change', cameraCallback );
+
+		};
+
+	}, [ manager, set ] );
+
+	// register for events
+	useEffect( () => {
+
+		if ( onTransitionEnd ) {
+
+			manager.addEventListener( 'transition-end', onTransitionEnd );
+			return () => manager.removeEventListener( 'transition-end', onTransitionEnd );
+
+		}
+
+	}, [ onTransitionEnd, manager ] );
+
+	useEffect( () => {
+
+		if ( onTransitionStart ) {
+
+			manager.addEventListener( 'transition-start', onTransitionStart );
+			return () => manager.removeEventListener( 'transition-start', onTransitionStart );
+
+		}
+
+	}, [ onTransitionStart, manager ] );
+
+	// assign cameras
+	useEffect( () => {
+
+		const oldPerspectiveCamera = manager.perspectiveCamera;
+		const oldOrthographicCamera = manager.orthographicCamera;
+		manager.perspectiveCamera = perspectiveCamera || oldPerspectiveCamera;
+		manager.orthographicCamera = orthographicCamera || oldOrthographicCamera;
+
+		set( () => ( { camera: manager.camera } ) );
+
+		return () => {
+
+			manager.perspectiveCamera = oldPerspectiveCamera;
+			manager.orthographicCamera = oldOrthographicCamera;
+
+		};
+
+	}, [ perspectiveCamera, orthographicCamera, manager, set ] );
+
+	// toggle
+	useEffect( () => {
+
+		if ( mode !== manager.mode ) {
+
+			if ( controls && controls.isEnvironmentControls ) {
+
+				controls.getPivotPoint( manager.fixedPoint );
+				manager.syncCameras();
+				controls.adjustCamera( manager.perspectiveCamera );
+				controls.adjustCamera( manager.orthographicCamera );
+
+			} else {
+
+				manager.fixedPoint
+					.set( 0, 0, - 1 )
+					.transformDirection( manager.camera.matrixWorld )
+					.multiplyScalar( 50 )
+					.add( manager.camera.position );
+				manager.syncCameras();
+
+			}
+
+			manager.toggle();
+			invalidate();
+
+		}
+
+	}, [ mode, manager, invalidate, controls ] );
+
+	// update animation
+	useFrame( () => {
+
+		manager.update();
+		if ( controls ) {
+
+			controls.enabled = ! manager.animating;
+
+		}
+
+		if ( manager.animating ) {
+
+			invalidate();
+
+		}
+
+	}, - 1 );
+
+} );

package/src/tileRenderer/r3f/components/CanvasDOMOverlay.jsx

@@ -0,0 +1,54 @@
+import { useMemo, useEffect, StrictMode } 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 } ) {
+
+	// create the dom element and react root
+	const [ gl ] = useThree( state => [ state.gl ] );
+	const container = useMemo( () => document.createElement( 'div' ), [] );
+	const root = useMemo( () => createRoot( container ), [ container ] );
+
+	// watch for canvas resize
+	const observer = useMemo( () => {
+
+		const observer = new ResizeObserver( ( [ { contentRect } ] ) => {
+
+			container.style.top = `${ contentRect.top }px`;
+			container.style.left = `${ contentRect.left }px`;
+			container.style.width = `${ contentRect.width }px`;
+			container.style.height = `${ contentRect.height }px`;
+
+		} );
+		observer.observe( gl.domElement );
+		return observer;
+
+	}, [ gl, container ] );
+
+	// position the container
+	useEffect( () => {
+
+		container.style.pointerEvents = 'none';
+		container.style.position = 'absolute';
+		document.body.appendChild( container );
+
+		return () => {
+
+			container.remove();
+			observer.disconnect();
+
+		};
+
+	}, [ observer, container ] );
+
+	// render the children into the container
+	root.render(
+		<StrictMode>
+			<div { ...rest }>
+				{ children }
+			</div>
+		</StrictMode>
+	);
+
+}

package/src/tileRenderer/r3f/components/CompassGizmo.jsx

@@ -0,0 +1,260 @@
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { BackSide, Matrix4, OrthographicCamera, Ray, Scene, Vector3 } from 'three';
+import { TilesRendererContext } from './TilesRenderer';
+import { closestRayEllipsoidSurfacePointEstimate } from '../../three/controls/utils';
+
+// Based in part on @pmndrs/drei's Gizmo component
+
+const _vec = /*@__PURE__*/ new Vector3();
+const _axis = /*@__PURE__*/ new Vector3();
+const _pos = /*@__PURE__*/ new Vector3();
+const _matrix = /*@__PURE__*/ new Matrix4();
+const _invMatrix = /*@__PURE__*/ new Matrix4();
+const _enuMatrix = /*@__PURE__*/ new Matrix4();
+const _ray = /*@__PURE__*/ new Ray();
+const _cart = {};
+
+// Returns the "focus" point that the camera is facing based on the closest point to the ellipsoid.
+// Used for determining the compass orientation.
+function getCameraFocusPoint( camera, ellipsoid, tilesGroup, target ) {
+
+	_invMatrix.copy( tilesGroup.matrixWorld ).invert();
+
+	// get ray in globe coordinate frame
+	_ray.origin.copy( camera.position );
+	_ray.direction.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );
+	_ray.applyMatrix4( _invMatrix );
+
+	// get the closest point to the ray on the globe in the global coordinate frame
+	closestRayEllipsoidSurfacePointEstimate( _ray, ellipsoid, _pos );
+	_pos.applyMatrix4( tilesGroup.matrixWorld );
+
+	// get ortho camera info
+	_axis.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );
+
+	// ensure we move the camera exactly along the forward vector to avoid shifting
+	// the camera in other directions due to floating point error
+	const dist = _pos.sub( camera.position ).dot( _axis );
+	target.copy( camera.position ).addScaledVector( _axis, dist );
+	return target;
+
+}
+
+// Renders the portal with an orthographic camera
+function RenderPortal( props ) {
+
+	const { defaultScene, defaultCamera, overrideRenderLoop = true, renderPriority = 1 } = props;
+	const camera = useMemo( () => new OrthographicCamera(), [] );
+	const [ set, size, gl, scene ] = useThree( state => [ state.set, state.size, state.gl, state.scene ] );
+	useEffect( () => {
+
+		set( { camera } );
+
+	}, [ set, camera ] );
+
+	useEffect( () => {
+
+		camera.left = - size.width / 2;
+		camera.right = size.width / 2;
+		camera.top = size.height / 2;
+		camera.bottom = - size.height / 2;
+		camera.near = 0;
+		camera.far = 2000;
+		camera.position.z = camera.far / 2;
+		camera.updateProjectionMatrix();
+
+	}, [ camera, size ] );
+
+	useFrame( () => {
+
+		if ( overrideRenderLoop ) {
+
+			gl.render( defaultScene, defaultCamera );
+
+		}
+
+		const currentAutoClear = gl.autoClear;
+		gl.autoClear = false;
+
+		gl.clearDepth();
+		gl.render( scene, camera );
+
+		gl.autoClear = currentAutoClear;
+
+	}, renderPriority );
+
+}
+
+// generates an extruded box geometry
+function TriangleGeometry() {
+
+	const ref = useRef();
+	useEffect( () => {
+
+		const geometry = ref.current;
+		const position = geometry.attributes.position;
+		for ( let i = 0, l = position.count; i < l; i ++ ) {
+
+			_vec.fromBufferAttribute( position, i );
+			if ( _vec.y > 0 ) {
+
+				_vec.x = 0;
+				position.setXYZ( i, ..._vec );
+
+			}
+
+		}
+
+	} );
+
+	return <boxGeometry ref={ ref } />;
+
+}
+
+// renders a typical compass graphic with red north triangle, white south, and a tinted circular background
+function CompassGraphic( { northColor = 0xEF5350, southColor = 0xFFFFFF } ) {
+
+	const [ lightTarget, setLightTarget ] = useState();
+	const groupRef = useRef();
+	useEffect( () => {
+
+		setLightTarget( groupRef.current );
+
+	}, [] );
+
+	return (
+		<group scale={ 0.5 } ref={ groupRef }>
+
+			{/* Lights */}
+			<ambientLight intensity={ 1 } />
+			<directionalLight position={ [ 0, 2, 3 ] } intensity={ 3 } target={ lightTarget } />
+			<directionalLight position={ [ 0, - 2, - 3 ] } intensity={ 3 } target={ lightTarget } />
+
+			{/* Background */}
+			<mesh>
+				<sphereGeometry />
+				<meshBasicMaterial color={ 0 } opacity={ 0.3 } transparent={ true } side={ BackSide } />
+			</mesh>
+
+			{/* Compass shape */}
+			<group scale={ [ 0.5, 1, 0.15 ] }>
+				<mesh position-y={ 0.5 }>
+					<TriangleGeometry />
+					<meshStandardMaterial color={ northColor } />
+				</mesh>
+				<mesh position-y={ - 0.5 } rotation-x={ Math.PI }>
+					<TriangleGeometry />
+					<meshStandardMaterial color={ southColor } />
+				</mesh>
+			</group>
+		</group>
+	);
+
+}
+
+export function CompassGizmo( { children, overrideRenderLoop, mode = '3d', margin = 10, scale = 35, visible = true, ...rest } ) {
+
+	const [ defaultCamera, defaultScene, size ] = useThree( state => [ state.camera, state.scene, state.size ] );
+	const tiles = useContext( TilesRendererContext );
+	const groupRef = useRef( null );
+	const scene = useMemo( () => {
+
+		return new Scene();
+
+	}, [] );
+
+	useFrame( () => {
+
+		if ( tiles === null || groupRef.current === null ) {
+
+			return null;
+
+		}
+
+		const { ellipsoid } = tiles;
+		const group = groupRef.current;
+
+		// get the ENU frame in world space
+		_matrix.copy( tiles.group.matrixWorld ).invert();
+		getCameraFocusPoint( defaultCamera, ellipsoid, tiles.group, _pos ).applyMatrix4( _matrix );
+		ellipsoid.getPositionToCartographic( _pos, _cart );
+
+		ellipsoid
+			.getRotationMatrixFromAzElRoll( _cart.lat, _cart.lon, 0, 0, 0, _enuMatrix )
+			.premultiply( tiles.group.matrixWorld );
+
+		// get the camera orientation in the local ENU frame
+		_enuMatrix.invert();
+		_matrix.copy( defaultCamera.matrixWorld ).premultiply( _enuMatrix );
+
+		if ( mode.toLowerCase() === '3d' ) {
+
+			group.quaternion.setFromRotationMatrix( _matrix ).invert();
+
+		} else {
+
+			// get the projected facing direction of the camera
+			_vec.set( 0, 1, 0 ).transformDirection( _matrix ).normalize();
+			_vec.z = 0;
+			_vec.normalize();
+
+			if ( _vec.length() === 0 ) {
+
+				// if we're looking exactly top-down
+				group.quaternion.identity();
+
+			} else {
+
+				// compute the 2d looking direction
+				const angle = _axis.set( 0, 1, 0 ).angleTo( _vec );
+				_axis.cross( _vec ).normalize();
+				group.quaternion.setFromAxisAngle( _axis, - angle );
+
+			}
+
+		}
+
+	} );
+
+	// default to the compass graphic
+	if ( ! children ) {
+
+		children = <CompassGraphic />;
+
+	}
+
+	// remove the portal rendering if not present
+	if ( ! visible ) {
+
+		return null;
+
+	}
+
+	return (
+		createPortal(
+			<>
+				<group
+					ref={ groupRef }
+					scale={ scale }
+					position={ [
+						size.width / 2 - margin - scale / 2,
+						- size.height / 2 + margin + scale / 2,
+						0,
+					] }
+
+					{ ...rest }
+				>{ children }</group>
+				<RenderPortal
+					defaultCamera={ defaultCamera }
+					defaultScene={ defaultScene }
+					overrideRenderLoop={ overrideRenderLoop }
+					renderPriority={ 10 }
+				/>
+			</>,
+			scene,
+			{ events: { priority: 10 } },
+		)
+	);
+
+}

package/src/tileRenderer/r3f/components/TilesAttributionOverlay.jsx

@@ -0,0 +1,110 @@
+import { useContext, useState, useEffect, useMemo } from 'react';
+import { TilesRendererContext } from './TilesRenderer.jsx';
+import { CanvasDOMOverlay } from './CanvasDOMOverlay.jsx';
+
+// Overlay for displaying tile data set attributions
+export function TilesAttributionOverlay( { children, style, ...rest } ) {
+
+	const tiles = useContext( TilesRendererContext );
+	const [ attributions, setAttributions ] = useState( [] );
+
+	// Add events for checking when attributions may be updated
+	useEffect( () => {
+
+		if ( ! tiles ) {
+
+			return;
+
+		}
+
+		let queued = false;
+		const callback = () => {
+
+			if ( ! queued ) {
+
+				queued = true;
+				queueMicrotask( () => {
+
+					setAttributions( tiles.getAttributions() );
+					queued = false;
+
+				} );
+
+			}
+
+		};
+
+		tiles.addEventListener( 'tile-visibility-change', callback );
+		tiles.addEventListener( 'load-tile-set', callback );
+
+		return () => {
+
+			tiles.removeEventListener( 'tile-visibility-change', callback );
+			tiles.removeEventListener( 'load-tile-set', callback );
+
+		};
+
+	}, [ tiles ] );
+
+	// generate elements for each type of attribution
+	const output = [];
+	attributions.forEach( ( att, i ) => {
+
+		let element = null;
+		if ( att.type === 'string' ) {
+
+			element = <div key={ i }>{ att.value }</div>;
+
+		} else if ( att.type === 'html' ) {
+
+			element = <div key={ i } dangerouslySetInnerHTML={ { __html: att.value } } style={ { pointerEvents: 'all' } }/>;
+
+		} else if ( att.type === 'image' ) {
+
+			element = <div key={ i }><img src={ att.value } /></div>;
+
+		}
+
+		if ( element ) {
+
+			output.push( element );
+
+		}
+
+	} );
+
+	// Generate CSS for modifying child elements implicit to the html attributions
+	const classId = useMemo( () => 'class_' + window.crypto.randomUUID(), [] );
+	const styles = useMemo( () => `
+		#${ classId } a {
+			color: white;
+		}
+
+		#${ classId } img {
+			max-width: 125px;
+			display: block;
+			margin: 5px 0;
+		}
+	`, [ classId ] );
+
+	return (
+		<CanvasDOMOverlay
+			id={ classId }
+			style={ {
+				position: 'absolute',
+				bottom: 0,
+				left: 0,
+				padding: '10px',
+				color: 'rgba( 255, 255, 255, 0.75 )',
+				fontSize: '10px',
+				...style,
+			} }
+			{ ...rest }
+		>
+			<style>{ styles }</style>
+			{ children }
+			{ output }
+		</CanvasDOMOverlay>
+	);
+
+}