easy-three-utils 0.0.1

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

@@ -0,0 +1,239 @@
+import { createContext, useContext, useState, useEffect, useRef, forwardRef, useMemo } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { Vector3 } from 'three';
+import { TilesRenderer as TilesRendererImpl } from '../../three/TilesRenderer.js';
+import { useDeepOptions, useShallowOptions } from '../utilities/useOptions.jsx';
+import { useObjectDep } from '../utilities/useObjectDep.jsx';
+import { useForceUpdate } from '../utilities/useForceUpdate.jsx';
+
+// context for accessing the tile set
+export const TilesRendererContext = createContext( null );
+
+// group that matches the transform of the tile set root group
+function TileSetRoot( { children } ) {
+
+	const tiles = useContext( TilesRendererContext );
+	const ref = useRef();
+	useEffect( () => {
+
+		if ( tiles ) {
+
+			ref.current.matrixWorld = tiles.group.matrixWorld;
+
+		}
+
+	}, [ tiles ] );
+
+	return <group ref={ ref } matrixWorldAutoUpdate={ false } matrixAutoUpdate={ false }>{ children }</group>;
+
+}
+
+const _vec = /* @__PURE__ */ new Vector3();
+export function EastNorthUpFrame( props ) {
+
+	const {
+		lat = 0,
+		lon = 0,
+		height = 0,
+		az = 0,
+		el = 0,
+		roll = 0,
+		children,
+	} = props;
+	const ref = useRef();
+	const tiles = useContext( TilesRendererContext );
+	const ellipsoid = tiles && tiles.ellipsoid || null;
+	useEffect( () => {
+
+		if ( ellipsoid === null ) {
+
+			return;
+
+		}
+
+		const group = ref.current;
+		group.matrix.identity();
+
+		ellipsoid.getRotationMatrixFromAzElRoll( lat, lon, az, el, roll, group.matrix );
+		ellipsoid.getCartographicToPosition( lat, lon, height, _vec );
+		group.matrix.setPosition( _vec );
+		group.matrix.decompose( group.position, group.quaternion, group.scale );
+		group.updateMatrixWorld();
+
+	}, [ ellipsoid, lat, lon, height, az, el, roll ] );
+
+	return <group ref={ ref }>{ children }</group>;
+
+}
+
+// component for registering a plugin
+export const TilesPlugin = forwardRef( function TilesPlugin( props, ref ) {
+
+	const { plugin, args, ...options } = props;
+	const tiles = useContext( TilesRendererContext );
+
+	// create the instance
+	const instance = useMemo( () => {
+
+		if ( tiles === null ) {
+
+			return null;
+
+		}
+
+		let instance;
+		if ( Array.isArray( args ) ) {
+
+			instance = new plugin( ...args );
+
+		} else {
+
+			instance = new plugin( args );
+
+		}
+
+		return instance;
+
+		// we must create a new plugin if the tile set has changed
+
+	}, [ tiles, plugin, useObjectDep( args ) ] ); // eslint-disable-line
+
+	// assigns any provided options to the plugin
+	useShallowOptions( instance, options );
+
+	// assign ref
+	useEffect( () => {
+
+		if ( ref ) {
+
+			if ( ref instanceof Function ) {
+
+				ref( instance );
+
+			} else {
+
+				ref.current = instance;
+
+			}
+
+		}
+
+	}, [ instance, ref ] );
+
+	// register the instance
+	useEffect( () => {
+
+		if ( tiles === null ) {
+
+			return;
+
+		}
+
+		tiles.registerPlugin( instance );
+		return () => {
+
+			tiles.unregisterPlugin( instance );
+
+		};
+
+	}, [ instance, tiles ] );
+
+} );
+
+// component for adding a TilesRenderer to the scene
+export const TilesRenderer = forwardRef( function TilesRenderer( props, ref ) {
+
+	const { url, group = {}, children, ...options } = props;
+	const [ tiles, setTiles ] = useState( null );
+	const [ camera, gl, invalidate ] = useThree( state => [ state.camera, state.gl, state.invalidate ] );
+	const [ forceUpdateIndex, forceUpdate ] = useForceUpdate();
+
+	// create the tile set
+	useEffect( () => {
+
+		const tiles = new TilesRendererImpl( url );
+		tiles.addEventListener( 'load-content', () => invalidate() );
+		tiles.addEventListener( 'force-rerender', () => invalidate() );
+		setTiles( tiles );
+
+		return () => {
+
+			tiles.dispose();
+
+		};
+
+	}, [ url, invalidate ] );
+
+	// update the resolution for the camera
+	useFrame( () => {
+
+		if ( tiles === null ) {
+
+			return;
+
+		}
+
+		camera.updateMatrixWorld();
+		tiles.setResolutionFromRenderer( camera, gl );
+		tiles.update();
+
+	} );
+
+	// add the camera
+	useEffect( () => {
+
+		if ( tiles === null ) {
+
+			return;
+
+		}
+
+		tiles.setCamera( camera );
+		return () => {
+
+			tiles.deleteCamera( camera );
+
+		};
+
+	}, [ tiles, camera ] );
+
+	// assign ref
+	useEffect( () => {
+
+		if ( ref ) {
+
+			if ( ref instanceof Function ) {
+
+				ref( tiles );
+
+			} else {
+
+				ref.current = tiles;
+
+			}
+
+		}
+
+	}, [ tiles, ref ] );
+
+	// assign options recursively
+	useDeepOptions( tiles, options );
+
+	// because options modify tiles settings non-reactively we force an update and
+	// pass the update index into the tiles context to force children to update
+	useEffect( () => {
+
+		forceUpdate();
+
+	}, [ tiles, useObjectDep( options ) ] ); // eslint-disable-line
+
+	return <>
+		{ tiles ? <primitive object={ tiles.group } { ...group } /> : null }
+		<TilesRendererContext.Provider value={ tiles } key={ forceUpdateIndex }>
+			<TileSetRoot>
+				{ children }
+			</TileSetRoot>
+		</TilesRendererContext.Provider>
+	</>;
+
+} );

package/src/tileRenderer/r3f/index.jsx

@@ -0,0 +1,6 @@
+export * from './components/TilesRenderer.jsx';
+export * from './components/TilesAttributionOverlay.jsx';
+export * from './components/CanvasDOMOverlay.jsx';
+export * from './components/CameraControls.jsx';
+export * from './components/CompassGizmo.jsx';
+export * from './components/CameraTransition.jsx';

package/src/tileRenderer/r3f/utilities/useForceUpdate.jsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+export function useForceUpdate() {
+
+	const [ value, setValue ] = useState( 0 );
+	return [ value, () => setValue( value + 1 ) ];
+
+}

package/src/tileRenderer/r3f/utilities/useObjectDep.jsx

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+
+// checks if the first level of object key-values are equal
+function areObjectsEqual( a, b ) {
+
+	// early check for equivalence
+	if ( a === b ) {
+
+		return true;
+
+	}
+
+	// if either of the objects is null or undefined, then perform a simple check
+	if ( ! a || ! b ) {
+
+		return a === b;
+
+	}
+
+	// check all keys and values in the first object
+	for ( const key in a ) {
+
+		if ( a[ key ] !== b[ key ] ) {
+
+			return false;
+
+		}
+
+	}
+
+	// check all keys and values in the second object
+	for ( const key in b ) {
+
+		if ( a[ key ] !== b[ key ] ) {
+
+			return false;
+
+		}
+
+	}
+
+	return true;
+
+}
+
+// Helper for using an object as a dependency in a useEffect or useMemo array
+export function useObjectDep( object ) {
+
+	// only modify the returned object reference if it has changed
+	const ref = useRef();
+	if ( ! areObjectsEqual( ref.current, object ) ) {
+
+		ref.current = object;
+
+	}
+
+	return ref.current;
+
+}

package/src/tileRenderer/r3f/utilities/useOptions.jsx

@@ -0,0 +1,143 @@
+import { useEffect } from 'react';
+import { useObjectDep } from './useObjectDep.jsx';
+
+// return true if the given key is for registering an event
+function isEventName( key ) {
+
+	return /^on/g.test( key );
+
+}
+
+// returns the event name to register for the given key
+function getEventName( key ) {
+
+	return key
+		.replace( /^on/, '' )
+		.replace( /[a-z][A-Z]/g, match => `${ match[ 0 ] }-${ match[ 1 ] }` )
+		.toLowerCase();
+
+}
+
+// returns a dash-separated key as a list of tokens
+function getPath( key ) {
+
+	return key.split( '-' );
+
+}
+
+// gets the value from the object at the given path
+function getValueAtPath( object, path ) {
+
+	let curr = object;
+	const tokens = [ ...path ];
+	while ( tokens.length !== 0 ) {
+
+		const key = tokens.shift();
+		curr = curr[ key ];
+
+	}
+
+	return curr;
+
+}
+
+// sets the value of the object at the given path
+function setValueAtPath( object, path, value ) {
+
+	const tokens = [ ...path ];
+	const finalKey = tokens.pop();
+	getValueAtPath( object, tokens )[ finalKey ] = value;
+
+}
+
+// Recursively assigns a set of options to an object, interpreting dashes as periods
+export function useDeepOptions( target, options ) {
+
+	// assign options recursively
+	useEffect( () => {
+
+		if ( target === null ) {
+
+			return;
+
+		}
+
+		const previousState = {};
+		for ( const key in options ) {
+
+			if ( isEventName( key ) ) {
+
+				target.addEventListener( getEventName( key ), options[ key ] );
+
+			} else {
+
+				const path = getPath( key );
+				previousState[ key ] = getValueAtPath( target, path );
+				setValueAtPath( target, path, options[ key ] );
+
+			}
+
+		}
+
+		return () => {
+
+			for ( const key in options ) {
+
+				if ( isEventName( key ) ) {
+
+					target.removeEventListener( getEventName( key ), options[ key ] );
+
+				}
+
+			}
+
+			for ( const key in options ) {
+
+				const path = getPath( key );
+				setValueAtPath( target, path, options[ key ] );
+
+			}
+
+		};
+
+	}, [ target, useObjectDep( options ) ] ); // eslint-disable-line
+
+}
+
+// Assigns a set of options to an object shallowly, interpreting dashes as periods
+export function useShallowOptions( instance, options ) {
+
+	// assigns any provided options to the plugin
+	useEffect( () => {
+
+		if ( instance === null ) {
+
+			return;
+
+		}
+
+		const previousState = {};
+		for ( const key in options ) {
+
+			if ( key in instance ) {
+
+				previousState[ key ] = instance[ key ];
+				instance[ key ] = options[ key ];
+
+			}
+
+		}
+
+		return () => {
+
+			for ( const key in previousState ) {
+
+				instance[ key ] = previousState[ key ];
+
+			}
+
+		};
+
+	}, [ instance, useObjectDep( options ) ] ); // eslint-disable-line
+
+}

package/src/tileRenderer/three/DebugTilesRenderer.d.ts

@@ -0,0 +1,28 @@
+import { TilesRenderer } from './TilesRenderer';
+import { Color } from 'three';
+
+export enum ColorMode {}
+export const NONE : ColorMode;
+export const SCREEN_ERROR : ColorMode;
+export const GEOMETRIC_ERROR : ColorMode;
+export const DISTANCE : ColorMode;
+export const DEPTH : ColorMode;
+export const RELATIVE_DEPTH : ColorMode;
+export const IS_LEAF : ColorMode;
+export const RANDOM_COLOR : ColorMode;
+export const RANDOM_NODE_COLOR: ColorMode;
+export const CUSTOM_COLOR: ColorMode;
+export class DebugTilesRenderer extends TilesRenderer {
+
+	displayBoxBounds : Boolean;
+	displaySphereBounds : Boolean;
+	displayRegionBounds : Boolean;
+	colorMode : ColorMode;
+
+	maxDebugDepth : Number;
+	maxDebugDistance : Number;
+	maxDebugError : Number;
+
+	getDebugColor : ( val: Number, target: Color ) => void;
+
+}

package/src/tileRenderer/three/DebugTilesRenderer.js

@@ -0,0 +1,58 @@
+import { TilesRenderer } from './TilesRenderer.js';
+import { DebugTilesPlugin } from './plugins/DebugTilesPlugin.js';
+
+export * from './plugins/DebugTilesPlugin.js';
+
+const DEBUG_PLUGIN = Symbol( 'DEBUG_PLUGIN' );
+export class DebugTilesRenderer extends TilesRenderer {
+
+	constructor( ...args ) {
+
+		super( ...args );
+
+		console.warn( 'DebugTilesRenderer: "DebugTilesRenderer" has been deprecated in favor of "DebugTilesPlugin".' );
+
+		this[ DEBUG_PLUGIN ] = new DebugTilesPlugin();
+		this.registerPlugin( this[ DEBUG_PLUGIN ] );
+
+	}
+
+}
+
+[
+	'displayBoxBounds',
+	'displaySphereBounds',
+	'displayRegionBounds',
+	'colorMode',
+	'customColorCallback',
+	'boxGroup',
+	'sphereGroup',
+	'regionGroup',
+	'maxDebugDepth',
+	'maxDebugDistance',
+	'maxDebugError',
+	'getDebugColor',
+	'extremeDebugDepth',
+	'extremeDebugError',
+].forEach( key => {
+
+	Object.defineProperty(
+		DebugTilesRenderer.prototype,
+		key,
+		{
+			get() {
+
+				return this[ DEBUG_PLUGIN ][ key ];
+
+			},
+
+			set( v ) {
+
+				this[ DEBUG_PLUGIN ][ key ] = v;
+
+			}
+
+		}
+	);
+
+} );

package/src/tileRenderer/three/TilesGroup.d.ts

@@ -0,0 +1,9 @@
+import { Group } from 'three';
+import { TilesRenderer } from './TilesRenderer';
+
+export class TilesGroup extends Group {
+
+	tilesRenderer : TilesRenderer;
+	constructor( tilesRenderer : TilesRenderer );
+
+}

package/src/tileRenderer/three/TilesGroup.js

@@ -0,0 +1,91 @@
+import { Group, Matrix4 } from 'three';
+
+// Specialization of "Group" that only updates world matrices of children if
+// the transform has changed since the last update and ignores the "force"
+// parameter under the assumption that the children tiles will not move.
+const tempMat = new Matrix4();
+export class TilesGroup extends Group {
+
+	constructor( tilesRenderer ) {
+
+		super();
+		this.name = 'TilesRenderer.TilesGroup';
+		this.tilesRenderer = tilesRenderer;
+
+	}
+
+	raycast( raycaster, intersects ) {
+
+		// returning "false" ends raycast traversal
+		if ( this.tilesRenderer.optimizeRaycast ) {
+
+			this.tilesRenderer.raycast( raycaster, intersects );
+			return false;
+
+		}
+
+		return true;
+
+	}
+
+	updateMatrixWorld( force ) {
+
+		if ( this.matrixAutoUpdate ) {
+
+			this.updateMatrix();
+
+		}
+
+		if ( this.matrixWorldNeedsUpdate || force ) {
+
+			if ( this.parent === null ) {
+
+				tempMat.copy( this.matrix );
+
+			} else {
+
+				tempMat.multiplyMatrices( this.parent.matrixWorld, this.matrix );
+
+			}
+
+			this.matrixWorldNeedsUpdate = false;
+
+			// check if the matrix changed relative to what it was.
+			const elA = tempMat.elements;
+			const elB = this.matrixWorld.elements;
+			let isDifferent = false;
+			for ( let i = 0; i < 16; i ++ ) {
+
+				const itemA = elA[ i ];
+				const itemB = elB[ i ];
+				const diff = Math.abs( itemA - itemB );
+
+				if ( diff > Number.EPSILON ) {
+
+					isDifferent = true;
+					break;
+
+				}
+
+			}
+
+			if ( isDifferent ) {
+
+				this.matrixWorld.copy( tempMat );
+
+				// update children
+				// the children will not have to change unless the parent group has updated
+				const children = this.children;
+				for ( let i = 0, l = children.length; i < l; i ++ ) {
+
+					children[ i ].updateMatrixWorld();
+
+				}
+
+			}
+
+		}
+
+	}
+
+}

package/src/tileRenderer/three/TilesRenderer.d.ts

@@ -0,0 +1,37 @@
+import { Box3, Camera, Vector2, Matrix4, WebGLRenderer, Object3D, LoadingManager, Sphere } from 'three';
+import { Tile } from '../base/Tile';
+import { TilesRendererBase } from '../base/TilesRendererBase';
+import { TilesGroup } from './TilesGroup';
+import { Ellipsoid } from './math/Ellipsoid';
+
+export class TilesRenderer extends TilesRendererBase {
+
+	ellipsoid: Ellipsoid;
+	autoDisableRendererCulling : Boolean;
+	optimizeRaycast : Boolean;
+
+	manager : LoadingManager;
+
+	group : TilesGroup;
+
+	getBoundingBox( box : Box3 ) : Boolean;
+	getOrientedBoundingBox( box : Box3, matrix : Matrix4 ) : Boolean;
+	getBoundingSphere( sphere: Sphere ) : Boolean;
+
+	hasCamera( camera : Camera ) : Boolean;
+	setCamera( camera : Camera ) : Boolean;
+	deleteCamera( camera : Camera ) : Boolean;
+
+	setResolution( camera : Camera, x : Number, y : Number ) : Boolean;
+	setResolution( camera : Camera, resolution : Vector2 ) : Boolean;
+	setResolutionFromRenderer( camera : Camera, renderer : WebGLRenderer ) : Boolean;
+
+	forEachLoadedModel( callback : ( scene : Object3D, tile : Tile ) => void ) : void;
+
+	addEventListener( type: String, cb: ( e : Object ) => void );
+	hasEventListener( type: String, cb: ( e : Object ) => void );
+	removeEventListener( type: String, cb: ( e : Object ) => void );
+	dispatchEvent( e : Object );
+
+	setLatLonToYUp( lat : number, lon : number)
+}