easy-three-utils 0.0.1

package/src/tileRenderer/three/controls/PivotPointMesh.js

@@ -0,0 +1,104 @@
+import { Mesh, PlaneGeometry, ShaderMaterial, Vector2 } from 'three';
+export class PivotPointMesh extends Mesh {
+
+	constructor() {
+
+		super( new PlaneGeometry( 0, 0 ), new PivotMaterial() );
+		this.renderOrder = Infinity;
+
+	}
+
+	onBeforeRender( renderer ) {
+
+		const uniforms = this.material.uniforms;
+		renderer.getSize( uniforms.resolution.value );
+
+	}
+
+	updateMatrixWorld() {
+
+		this.matrixWorld.makeTranslation( this.position );
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+}
+
+class PivotMaterial extends ShaderMaterial {
+
+	constructor() {
+
+		super( {
+
+			depthWrite: false,
+			depthTest: false,
+			transparent: true,
+
+			uniforms: {
+
+				resolution: { value: new Vector2() },
+				size: { value: 15 },
+				thickness: { value: 2 },
+				opacity: { value: 1 },
+
+			},
+
+			vertexShader: /* glsl */`
+
+				uniform float pixelRatio;
+				uniform float size;
+				uniform float thickness;
+				uniform vec2 resolution;
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = uv;
+
+					float aspect = resolution.x / resolution.y;
+					vec2 offset = uv * 2.0 - vec2( 1.0 );
+					offset.y *= aspect;
+
+					vec4 screenPoint = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+					screenPoint.xy += offset * ( size + thickness ) * screenPoint.w / resolution.x;
+
+					gl_Position = screenPoint;
+
+				}
+			`,
+
+			fragmentShader: /* glsl */`
+
+				uniform float size;
+				uniform float thickness;
+				uniform float opacity;
+
+				varying vec2 vUv;
+				void main() {
+
+					float ht = 0.5 * thickness;
+					float planeDim = size + thickness;
+					float offset = ( planeDim - ht - 2.0 ) / planeDim;
+					float texelThickness = ht / planeDim;
+
+					vec2 vec = vUv * 2.0 - vec2( 1.0 );
+					float dist = abs( length( vec ) - offset );
+					float fw = fwidth( dist ) * 0.5;
+					float a = smoothstep( texelThickness - fw, texelThickness + fw, dist );
+
+					gl_FragColor = vec4( 1, 1, 1, opacity * ( 1.0 - a ) );
+
+				}
+			`,
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/three/controls/PointerTracker.js

@@ -0,0 +1,257 @@
+import { Vector2 } from 'three';
+
+const _vec = new Vector2();
+const _vec2 = new Vector2();
+export class PointerTracker {
+
+	constructor() {
+
+		this.domElement = null;
+		this.buttons = 0;
+		this.pointerType = null;
+		this.pointerOrder = [];
+		this.previousPositions = {};
+		this.pointerPositions = {};
+		this.startPositions = {};
+		this.pointerSetThisFrame = {};
+		this.hoverPosition = new Vector2();
+		this.hoverSet = false;
+
+	}
+
+	reset() {
+
+		this.buttons = 0;
+		this.pointerType = null;
+		this.pointerOrder = [];
+		this.previousPositions = {};
+		this.pointerPositions = {};
+		this.startPositions = {};
+		this.pointerSetThisFrame = {};
+		this.hoverPosition = new Vector2();
+		this.hoverSet = false;
+
+	}
+
+	// The pointers can be set multiple times per frame so track whether the pointer has
+	// been set this frame or not so we don't overwrite the previous position and lose information
+	// about pointer movement
+	updateFrame() {
+
+		const { previousPositions, pointerPositions } = this;
+		for ( const id in pointerPositions ) {
+
+			previousPositions[ id ].copy( pointerPositions[ id ] );
+
+		}
+
+	}
+
+	setHoverEvent( e ) {
+
+		if ( e.pointerType === 'mouse' || e.type === 'wheel' ) {
+
+			this.getAdjustedPointer( e, this.hoverPosition );
+			this.hoverSet = true;
+
+		}
+
+	}
+
+	getLatestPoint( target ) {
+
+		if ( this.pointerType !== null ) {
+
+			this.getCenterPoint( target );
+			return target;
+
+		} else if ( this.hoverSet ) {
+
+			target.copy( this.hoverPosition );
+			return target;
+
+		} else {
+
+			return null;
+
+		}
+
+	}
+
+	// get the pointer position in the coordinate system of the target element
+	getAdjustedPointer( e, target ) {
+
+		const domRef = this.domElement ? this.domElement : e.target;
+		const rect = domRef.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		target.set( x, y );
+
+	}
+
+	addPointer( e ) {
+
+		const id = e.pointerId;
+		const position = new Vector2();
+		this.getAdjustedPointer( e, position );
+		this.pointerOrder.push( id );
+		this.pointerPositions[ id ] = position;
+		this.previousPositions[ id ] = position.clone();
+		this.startPositions[ id ] = position.clone();
+
+		if ( this.getPointerCount() === 1 ) {
+
+			this.pointerType = e.pointerType;
+			this.buttons = e.buttons;
+
+		}
+
+	}
+
+	updatePointer( e ) {
+
+		const id = e.pointerId;
+		if ( ! ( id in this.pointerPositions ) ) {
+
+			return false;
+
+		}
+
+		this.getAdjustedPointer( e, this.pointerPositions[ id ] );
+		return true;
+
+	}
+
+	deletePointer( e ) {
+
+		const id = e.pointerId;
+		const pointerOrder = this.pointerOrder;
+		pointerOrder.splice( pointerOrder.indexOf( id ), 1 );
+		delete this.pointerPositions[ id ];
+		delete this.previousPositions[ id ];
+		delete this.startPositions[ id ];
+
+		if ( this.getPointerCount.length === 0 ) {
+
+			this.buttons = 0;
+			this.pointerType = null;
+
+		}
+
+	}
+
+	getPointerCount() {
+
+		return this.pointerOrder.length;
+
+	}
+
+	getCenterPoint( target, pointerPositions = this.pointerPositions ) {
+
+		const pointerOrder = this.pointerOrder;
+		if ( this.getPointerCount() === 1 || this.getPointerType() === 'mouse' ) {
+
+			const id = pointerOrder[ 0 ];
+			target.copy( pointerPositions[ id ] );
+			return target;
+
+		} else if ( this.getPointerCount() === 2 ) {
+
+			const id0 = this.pointerOrder[ 0 ];
+			const id1 = this.pointerOrder[ 1 ];
+
+			const p0 = pointerPositions[ id0 ];
+			const p1 = pointerPositions[ id1 ];
+
+			target.addVectors( p0, p1 ).multiplyScalar( 0.5 );
+			return target;
+
+		}
+
+		return null;
+
+	}
+
+	getPreviousCenterPoint( target ) {
+
+		return this.getCenterPoint( target, this.previousPositions );
+
+	}
+
+	getStartCenterPoint( target ) {
+
+		return this.getCenterPoint( target, this.startPositions );
+
+	}
+
+	getMoveDistance() {
+
+		this.getCenterPoint( _vec );
+		this.getPreviousCenterPoint( _vec2 );
+
+		return _vec.sub( _vec2 ).length();
+
+	}
+
+	getTouchPointerDistance( pointerPositions = this.pointerPositions ) {
+
+		if ( this.getPointerCount() <= 1 || this.getPointerType() === 'mouse' ) {
+
+			return 0;
+
+		}
+
+		const { pointerOrder } = this;
+		const id0 = pointerOrder[ 0 ];
+		const id1 = pointerOrder[ 1 ];
+
+		const p0 = pointerPositions[ id0 ];
+		const p1 = pointerPositions[ id1 ];
+
+		return p0.distanceTo( p1 );
+
+	}
+
+	getPreviousTouchPointerDistance() {
+
+		return this.getTouchPointerDistance( this.previousPositions );
+
+	}
+
+	getStartTouchPointerDistance() {
+
+		return this.getTouchPointerDistance( this.startPositions );
+
+	}
+
+	getPointerType() {
+
+		return this.pointerType;
+
+	}
+
+	isPointerTouch() {
+
+		return this.getPointerType() === 'touch';
+
+	}
+
+	getPointerButtons() {
+
+		return this.buttons;
+
+	}
+
+	isLeftClicked() {
+
+		return Boolean( this.buttons & 1 );
+
+	}
+
+	isRightClicked() {
+
+		return Boolean( this.buttons & 2 );
+
+	}
+
+}

package/src/tileRenderer/three/controls/utils.js

@@ -0,0 +1,113 @@
+import { Matrix4, Ray, Vector3 } from 'three';
+
+const _matrix = new Matrix4();
+const _ray = new Ray();
+const _vec = new Vector3();
+
+// helper function for constructing a matrix for rotating around a point
+export function makeRotateAroundPoint( point, quat, target ) {
+
+	target.makeTranslation( - point.x, - point.y, - point.z );
+
+	_matrix.makeRotationFromQuaternion( quat );
+	target.premultiply( _matrix );
+
+	_matrix.makeTranslation( point.x, point.y, point.z );
+	target.premultiply( _matrix );
+
+	return target;
+
+}
+
+// get the three.js pointer coords from an event
+export function mouseToCoords( clientX, clientY, element, target ) {
+
+	target.x = ( ( clientX - element.offsetLeft ) / element.clientWidth ) * 2 - 1;
+	target.y = - ( ( clientY - element.offsetTop ) / element.clientHeight ) * 2 + 1;
+
+	if ( target.isVector3 ) {
+
+		target.z = 0;
+
+	}
+
+}
+
+// Returns an estimate of the closest point on the ellipsoid to the ray. Returns
+// the surface intersection if they collide.
+export function closestRayEllipsoidSurfacePointEstimate( ray, ellipsoid, target ) {
+
+	if ( ellipsoid.intersectRay( ray, target ) ) {
+
+		return target;
+
+	} else {
+
+		_matrix.makeScale( ...ellipsoid.radius ).invert();
+		_ray.copy( ray ).applyMatrix4( _matrix );
+
+		_vec.set( 0, 0, 0 );
+		_ray.closestPointToPoint( _vec, target ).normalize();
+
+		_matrix.makeScale( ...ellipsoid.radius );
+		return target.applyMatrix4( _matrix );
+
+	}
+
+}
+
+// find the closest ray on the horizon when the ray passes above the sphere
+export function closestRaySpherePointFromRotation( ray, radius, target ) {
+
+	const hypotenuse = ray.origin.length();
+
+	// angle inside the sphere
+	const theta = Math.acos( radius / hypotenuse );
+
+	// the direction to the camera
+	target
+		.copy( ray.origin )
+		.multiplyScalar( - 1 )
+		.normalize();
+
+	// get the normal of the plane the ray and origin lie in
+	const rotationVec = _vec
+		.crossVectors( target, ray.direction )
+		.normalize();
+
+	// rotate the camera direction by angle and scale it to the surface
+	target
+		.multiplyScalar( - 1 )
+		.applyAxisAngle( rotationVec, - theta )
+		.normalize()
+		.multiplyScalar( radius );
+
+}
+
+
+// custom version of set raycaster from camera that relies on the underlying matrices
+// so the ray origin is position at the camera near clip.
+export function setRaycasterFromCamera( raycaster, coords, camera ) {
+
+	const { origin, direction } = raycaster.ray;
+
+	// get the origin and direction of the frustum ray
+	origin
+		.set( coords.x, coords.y, - 1 )
+		.unproject( camera );
+
+	direction
+		.set( coords.x, coords.y, 1 )
+		.unproject( camera )
+		.sub( origin );
+
+	// compute the far value based on the distance from point on the near
+	// plane and point on the far plane. Then normalize the direction.
+	raycaster.near = 0;
+	raycaster.far = direction.length();
+	raycaster.camera = camera;
+
+	// normalize the ray direction
+	direction.normalize();
+
+}

package/src/tileRenderer/three/loaders/B3DMLoader.d.ts

@@ -0,0 +1,26 @@
+import { B3DMBaseResult } from '../../base/loaders/B3DMLoaderBase';
+import { BatchTable } from '../../utilities/BatchTable';
+import { FeatureTable } from '../../utilities/FeatureTable';
+import { LoadingManager, Group } from 'three';
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+
+interface B3DMScene extends Group {
+
+	batchTable : BatchTable;
+	featureTable : FeatureTable;
+
+}
+
+export interface B3DMResult extends GLTF, B3DMBaseResult {
+
+	scene : B3DMScene;
+
+}
+
+export class B3DMLoader {
+
+	constructor( manager : LoadingManager );
+	load( url : String ) : Promise< B3DMResult >;
+	parse( buffer : ArrayBuffer ) : Promise < B3DMResult >;
+
+}

package/src/tileRenderer/three/loaders/B3DMLoader.js

@@ -0,0 +1,85 @@
+import { B3DMLoaderBase } from '../../base/loaders/B3DMLoaderBase.js';
+import { DefaultLoadingManager, Matrix4 } from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+export class B3DMLoader extends B3DMLoaderBase {
+
+	constructor( manager = DefaultLoadingManager ) {
+
+		super();
+		this.manager = manager;
+		this.adjustmentTransform = new Matrix4();
+
+	}
+
+	parse( buffer ) {
+
+		const b3dm = super.parse( buffer );
+		const gltfBuffer = b3dm.glbBytes.slice().buffer;
+		return new Promise( ( resolve, reject ) => {
+
+			const manager = this.manager;
+			const fetchOptions = this.fetchOptions;
+			const loader = manager.getHandler( 'path.gltf' ) || new GLTFLoader( manager );
+
+			if ( fetchOptions.credentials === 'include' && fetchOptions.mode === 'cors' ) {
+
+				loader.setCrossOrigin( 'use-credentials' );
+
+			}
+
+			if ( 'credentials' in fetchOptions ) {
+
+				loader.setWithCredentials( fetchOptions.credentials === 'include' );
+
+			}
+
+			if ( fetchOptions.headers ) {
+
+				loader.setRequestHeader( fetchOptions.headers );
+
+			}
+
+			// GLTFLoader assumes the working path ends in a slash
+			let workingPath = this.workingPath;
+			if ( ! /[\\/]$/.test( workingPath ) && workingPath.length ) {
+
+				workingPath += '/';
+
+			}
+
+			const adjustmentTransform = this.adjustmentTransform;
+
+			loader.parse( gltfBuffer, workingPath, model => {
+
+				const { batchTable, featureTable } = b3dm;
+				const { scene } = model;
+
+				const rtcCenter = featureTable.getData( 'RTC_CENTER' );
+				if ( rtcCenter ) {
+
+					scene.position.x += rtcCenter[ 0 ];
+					scene.position.y += rtcCenter[ 1 ];
+					scene.position.z += rtcCenter[ 2 ];
+
+				}
+
+				model.scene.updateMatrix();
+				model.scene.matrix.multiply( adjustmentTransform );
+				model.scene.matrix.decompose( model.scene.position, model.scene.quaternion, model.scene.scale );
+
+				model.batchTable = batchTable;
+				model.featureTable = featureTable;
+
+				scene.batchTable = batchTable;
+				scene.featureTable = featureTable;
+
+				resolve( model );
+
+			}, reject );
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/three/loaders/CMPTLoader.d.ts

@@ -0,0 +1,19 @@
+import { B3DMBaseResult } from '../../base/loaders/B3DMLoaderBase';
+import { I3DMBaseResult } from '../../base/loaders/I3DMLoaderBase';
+import { PNTSBaseResult } from '../../base/loaders/PNTSLoaderBase';
+import { Group, LoadingManager } from 'three';
+
+export interface CMPTResult {
+
+	tiles : Array< B3DMBaseResult|I3DMBaseResult|PNTSBaseResult >;
+	scene : Group;
+
+}
+
+export class CMPTLoader {
+
+	constructor( manager : LoadingManager );
+	load( url : String ) : Promise< CMPTResult >;
+	parse( buffer : ArrayBuffer ) : Promise< CMPTResult >;
+
+}

package/src/tileRenderer/three/loaders/CMPTLoader.js

@@ -0,0 +1,97 @@
+import { Group, DefaultLoadingManager, Matrix4 } from 'three';
+import { CMPTLoaderBase } from '../../base/loaders/CMPTLoaderBase.js';
+import { B3DMLoader } from './B3DMLoader.js';
+import { PNTSLoader } from './PNTSLoader.js';
+import { I3DMLoader } from './I3DMLoader.js';
+import { WGS84_ELLIPSOID } from '../math/GeoConstants.js';
+
+export class CMPTLoader extends CMPTLoaderBase {
+
+	constructor( manager = DefaultLoadingManager ) {
+
+		super();
+		this.manager = manager;
+		this.adjustmentTransform = new Matrix4();
+		this.ellipsoid = WGS84_ELLIPSOID.clone();
+
+	}
+
+	parse( buffer ) {
+
+		const result = super.parse( buffer );
+		const { manager, ellipsoid, adjustmentTransform } = this;
+		const promises = [];
+
+		for ( const i in result.tiles ) {
+
+			const { type, buffer } = result.tiles[ i ];
+			switch ( type ) {
+
+				case 'b3dm': {
+
+					const slicedBuffer = buffer.slice();
+					const loader = new B3DMLoader( manager );
+					loader.workingPath = this.workingPath;
+					loader.fetchOptions = this.fetchOptions;
+					loader.adjustmentTransform.copy( adjustmentTransform );
+
+					const promise = loader.parse( slicedBuffer.buffer );
+					promises.push( promise );
+					break;
+
+				}
+
+				case 'pnts': {
+
+					const slicedBuffer = buffer.slice();
+					const loader = new PNTSLoader( manager );
+					loader.workingPath = this.workingPath;
+					loader.fetchOptions = this.fetchOptions;
+
+					const promise = loader.parse( slicedBuffer.buffer );
+					promises.push( promise );
+					break;
+
+				}
+
+				case 'i3dm': {
+
+					const slicedBuffer = buffer.slice();
+					const loader = new I3DMLoader( manager );
+					loader.workingPath = this.workingPath;
+					loader.fetchOptions = this.fetchOptions;
+
+					loader.ellipsoid.copy( ellipsoid );
+					loader.adjustmentTransform.copy( adjustmentTransform );
+
+					const promise = loader.parse( slicedBuffer.buffer );
+					promises.push( promise );
+					break;
+
+				}
+
+			}
+
+		}
+
+		return Promise.all( promises ).then( results => {
+
+			const group = new Group();
+			results.forEach( result => {
+
+				group.add( result.scene );
+
+			} );
+
+			return {
+
+				tiles: results,
+				scene: group,
+
+			};
+
+		} );
+
+	}
+
+}

package/src/tileRenderer/three/loaders/GLTFExtensionLoader.d.ts

@@ -0,0 +1,11 @@
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+import { LoaderBase } from '../../base/loaders/LoaderBase';
+import { LoadingManager } from 'three';
+
+export class GLTFExtensionLoader extends LoaderBase {
+
+	constructor( manager : LoadingManager );
+	parse( buffer : ArrayBuffer ) : Promise< GLTF >;
+
+}