@plastic-software/three 0.167.4 → 0.174.0

package/examples/jsm/helpers/LightProbeHelper.js

@@ -6,7 +6,7 @@ import {
 
 class LightProbeHelper extends Mesh {
 
-	constructor( lightProbe, size ) {
+	constructor( lightProbe, size = 1 ) {
 
 		const material = new ShaderMaterial( {
 
@@ -20,79 +20,78 @@ class LightProbeHelper extends Mesh {
 
 			},
 
-			vertexShader: [
+			vertexShader: /* glsl */`
 
-				'varying vec3 vNormal;',
+				varying vec3 vNormal;
 
-				'void main() {',
+				void main() {
 
-				'	vNormal = normalize( normalMatrix * normal );',
+					vNormal = normalize( normalMatrix * normal );
 
-				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-				'}',
+				}
 
-			].join( '\n' ),
+			`,
 
-			fragmentShader: [
+			fragmentShader: /* glsl */`
 
-				'#define RECIPROCAL_PI 0.318309886',
+				#define RECIPROCAL_PI 0.318309886
 
-				'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
+				vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {
 
-				'	// matrix is assumed to be orthogonal',
+					// matrix is assumed to be orthogonal
 
-				'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
+					return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );
 
-				'}',
+				}
 
-				'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
-				'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
+				// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf,
+				vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {
 
-				'	// normal is assumed to have unit length',
+					// normal is assumed to have unit length,
 
-				'	float x = normal.x, y = normal.y, z = normal.z;',
+					float x = normal.x, y = normal.y, z = normal.z;
 
-				'	// band 0',
-				'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
+					// band 0,
+					vec3 result = shCoefficients[ 0 ] * 0.886227;
 
-				'	// band 1',
-				'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
-				'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
-				'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
+					// band 1,
+					result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;
+					result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;
+					result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;
 
-				'	// band 2',
-				'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
-				'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
-				'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
-				'	result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
-				'	result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
+					// band 2,
+					result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;
+					result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;
+					result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );
+					result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;
+					result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );
+					return result;
 
-				'	return result;',
+				}
 
-				'}',
+				uniform vec3 sh[ 9 ]; // sh coefficients
 
-				'uniform vec3 sh[ 9 ]; // sh coefficients',
+				uniform float intensity; // light probe intensity
 
-				'uniform float intensity; // light probe intensity',
+				varying vec3 vNormal;
 
-				'varying vec3 vNormal;',
+				void main() {
 
-				'void main() {',
+					vec3 normal = normalize( vNormal );
 
-				'	vec3 normal = normalize( vNormal );',
+					vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
 
-				'	vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
+					vec3 irradiance = shGetIrradianceAt( worldNormal, sh );
 
-				'	vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
+					vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;
 
-				'	vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
+					gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );
 
-				'	gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
+				}
 
-				'}'
-
-			].join( '\n' )
+			`,
 
 		} );
 

package/examples/jsm/helpers/LightProbeHelperGPU.js

@@ -0,0 +1,65 @@
+import {
+	Mesh,
+	NodeMaterial,
+	SphereGeometry
+} from 'three';
+import { float, Fn, getShIrradianceAt, normalWorld, uniformArray, uniform, vec4 } from 'three/tsl';
+
+class LightProbeHelper extends Mesh {
+
+	constructor( lightProbe, size = 1 ) {
+
+		const sh = uniformArray( lightProbe.sh.coefficients );
+		const intensity = uniform( lightProbe.intensity );
+
+		const RECIPROCAL_PI = float( 1 / Math.PI );
+
+		const fragmentNode = Fn( () => {
+
+			const irradiance = getShIrradianceAt( normalWorld, sh );
+
+			const outgoingLight = RECIPROCAL_PI.mul( irradiance ).mul( intensity );
+
+			return vec4( outgoingLight, 1.0 );
+
+		} )();
+
+		const material = new NodeMaterial();
+		material.fragmentNode = fragmentNode;
+
+		const geometry = new SphereGeometry( 1, 32, 16 );
+
+		super( geometry, material );
+
+		this.lightProbe = lightProbe;
+		this.size = size;
+		this.type = 'LightProbeHelper';
+
+		this._intensity = intensity;
+		this._sh = sh;
+
+		this.onBeforeRender();
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+	onBeforeRender() {
+
+		this.position.copy( this.lightProbe.position );
+
+		this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
+
+		this._intensity.value = this.lightProbe.intensity;
+		this._sh.array = this.lightProbe.sh.coefficients;
+
+	}
+
+}
+
+export { LightProbeHelper };

package/examples/jsm/helpers/TextureHelperGPU.js

@@ -0,0 +1,185 @@
+import {
+	NodeMaterial,
+	BoxGeometry,
+	BufferAttribute,
+	Mesh,
+	PlaneGeometry,
+	DoubleSide,
+	Vector3,
+} from 'three';
+import { texture as textureNode, cubeTexture, texture3D, float, vec4, attribute } from 'three/tsl';
+import { mergeGeometries } from '../utils/BufferGeometryUtils.js';
+
+class TextureHelper extends Mesh {
+
+	constructor( texture, width = 1, height = 1, depth = 1 ) {
+
+		const material = new NodeMaterial();
+		material.side = DoubleSide;
+		material.transparent = true;
+		material.name = 'TextureHelper';
+
+		let colorNode;
+
+		const uvw = attribute( 'uvw' );
+
+		if ( texture.isCubeTexture ) {
+
+			colorNode = cubeTexture( texture ).sample( uvw );
+
+		} else if ( texture.isData3DTexture || texture.isCompressed3DTexture ) {
+
+			colorNode = texture3D( texture ).sample( uvw );
+
+		} else if ( texture.isDataArrayTexture || texture.isCompressedArrayTexture ) {
+
+			colorNode = textureNode( texture ).sample( uvw.xy ).depth( uvw.z );
+
+		} else {
+
+			colorNode = textureNode( texture );
+
+		}
+
+		const alphaNode = float( getAlpha( texture ) );
+
+		material.colorNode = vec4( colorNode.rgb, alphaNode );
+
+		const geometry = texture.isCubeTexture
+			? createCubeGeometry( width, height, depth )
+			: createSliceGeometry( texture, width, height, depth );
+
+		super( geometry, material );
+
+		this.texture = texture;
+		this.type = 'TextureHelper';
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+}
+
+function getImageCount( texture ) {
+
+	if ( texture.isCubeTexture ) {
+
+		return 6;
+
+	} else if ( texture.isDataArrayTexture || texture.isCompressedArrayTexture ) {
+
+		return texture.image.depth;
+
+	} else if ( texture.isData3DTexture || texture.isCompressed3DTexture ) {
+
+		return texture.image.depth;
+
+	} else {
+
+		return 1;
+
+	}
+
+}
+
+function getAlpha( texture ) {
+
+	if ( texture.isCubeTexture ) {
+
+		return 1;
+
+	} else if ( texture.isDataArrayTexture || texture.isCompressedArrayTexture ) {
+
+		return Math.max( 1 / texture.image.depth, 0.25 );
+
+	} else if ( texture.isData3DTexture || texture.isCompressed3DTexture ) {
+
+		return Math.max( 1 / texture.image.depth, 0.25 );
+
+	} else {
+
+		return 1;
+
+	}
+
+}
+
+function createCubeGeometry( width, height, depth ) {
+
+	const geometry = new BoxGeometry( width, height, depth );
+
+	const position = geometry.attributes.position;
+	const uv = geometry.attributes.uv;
+	const uvw = new BufferAttribute( new Float32Array( uv.count * 3 ), 3 );
+
+	const _direction = new Vector3();
+
+	for ( let j = 0, jl = uv.count; j < jl; ++ j ) {
+
+		_direction.fromBufferAttribute( position, j ).normalize();
+
+		const u = _direction.x;
+		const v = _direction.y;
+		const w = _direction.z;
+
+		uvw.setXYZ( j, u, v, w );
+
+	}
+
+	geometry.deleteAttribute( 'uv' );
+	geometry.setAttribute( 'uvw', uvw );
+
+	return geometry;
+
+}
+
+function createSliceGeometry( texture, width, height, depth ) {
+
+	const sliceCount = getImageCount( texture );
+
+	const geometries = [];
+
+	for ( let i = 0; i < sliceCount; ++ i ) {
+
+		const geometry = new PlaneGeometry( width, height );
+
+		if ( sliceCount > 1 ) {
+
+			geometry.translate( 0, 0, depth * ( i / ( sliceCount - 1 ) - 0.5 ) );
+
+		}
+
+		const uv = geometry.attributes.uv;
+		const uvw = new BufferAttribute( new Float32Array( uv.count * 3 ), 3 );
+
+		for ( let j = 0, jl = uv.count; j < jl; ++ j ) {
+
+			const u = uv.getX( j );
+			const v = texture.flipY ? uv.getY( j ) : 1 - uv.getY( j );
+			const w = sliceCount === 1
+				? 1
+				: texture.isDataArrayTexture || texture.isCompressedArrayTexture
+					? i
+					: i / ( sliceCount - 1 );
+
+			uvw.setXYZ( j, u, v, w );
+
+		}
+
+		geometry.deleteAttribute( 'uv' );
+		geometry.setAttribute( 'uvw', uvw );
+
+		geometries.push( geometry );
+
+	}
+
+	return mergeGeometries( geometries );
+
+}
+
+export { TextureHelper };

package/examples/jsm/helpers/VertexNormalsHelper.js

@@ -32,6 +32,8 @@ class VertexNormalsHelper extends LineSegments {
 
 		this.matrixAutoUpdate = false;
 
+		this.isVertexNormalsHelper = true;
+
 		this.update();
 
 	}

package/examples/jsm/interactive/HTMLMesh.js

@@ -62,6 +62,7 @@ class HTMLTexture extends CanvasTexture {
 		this.colorSpace = SRGBColorSpace;
 		this.minFilter = LinearFilter;
 		this.magFilter = LinearFilter;
+		this.generateMipmaps = false;
 
 		// Create an observer on the DOM, and run html2canvas update in the next loop
 		const observer = new MutationObserver( () => {

package/examples/jsm/interactive/InteractiveGroup.js

@@ -7,97 +7,154 @@ import {
 const _pointer = new Vector2();
 const _event = { type: '', data: _pointer };
 
+// TODO: Dispatch pointerevents too
+
+/**
+ * The XR events that are mapped to "standard" pointer events
+ */
+const _events = {
+	'move': 'mousemove',
+	'select': 'click',
+	'selectstart': 'mousedown',
+	'selectend': 'mouseup'
+};
+
 const _raycaster = new Raycaster();
 
 class InteractiveGroup extends Group {
 
-	listenToPointerEvents( renderer, camera ) {
+	constructor() {
+
+		super();
+
+		this.raycaster = new Raycaster();
 
-		const scope = this;
-		const raycaster = new Raycaster();
+		this.element = null;
+		this.camera = null;
 
-		const element = renderer.domElement;
+		this.controllers = [];
 
-		function onPointerEvent( event ) {
+		this._onPointerEvent = this.onPointerEvent.bind( this );
+		this._onXRControllerEvent = this.onXRControllerEvent.bind( this );
 
-			event.stopPropagation();
+	}
+
+	onPointerEvent( event ) {
 
-			const rect = renderer.domElement.getBoundingClientRect();
+		event.stopPropagation();
 
-			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
-			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
+		const rect = this.element.getBoundingClientRect();
 
-			raycaster.setFromCamera( _pointer, camera );
+		_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
+		_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
 
-			const intersects = raycaster.intersectObjects( scope.children, false );
+		this.raycaster.setFromCamera( _pointer, this.camera );
 
-			if ( intersects.length > 0 ) {
+		const intersects = this.raycaster.intersectObjects( this.children, false );
 
-				const intersection = intersects[ 0 ];
+		if ( intersects.length > 0 ) {
 
-				const object = intersection.object;
-				const uv = intersection.uv;
+			const intersection = intersects[ 0 ];
 
-				_event.type = event.type;
-				_event.data.set( uv.x, 1 - uv.y );
+			const object = intersection.object;
+			const uv = intersection.uv;
 
-				object.dispatchEvent( _event );
+			_event.type = event.type;
+			_event.data.set( uv.x, 1 - uv.y );
 
-			}
+			object.dispatchEvent( _event );
 
 		}
 
-		element.addEventListener( 'pointerdown', onPointerEvent );
-		element.addEventListener( 'pointerup', onPointerEvent );
-		element.addEventListener( 'pointermove', onPointerEvent );
-		element.addEventListener( 'mousedown', onPointerEvent );
-		element.addEventListener( 'mouseup', onPointerEvent );
-		element.addEventListener( 'mousemove', onPointerEvent );
-		element.addEventListener( 'click', onPointerEvent );
+	}
+
+	onXRControllerEvent( event ) {
+
+		const controller = event.target;
+
+		_raycaster.setFromXRController( controller );
+
+		const intersections = _raycaster.intersectObjects( this.children, false );
+
+		if ( intersections.length > 0 ) {
+
+			const intersection = intersections[ 0 ];
+
+			const object = intersection.object;
+			const uv = intersection.uv;
+
+			_event.type = _events[ event.type ];
+			_event.data.set( uv.x, 1 - uv.y );
+
+			object.dispatchEvent( _event );
+
+		}
 
 	}
 
-	listenToXRControllerEvents( controller ) {
+	listenToPointerEvents( renderer, camera ) {
 
-		const scope = this;
+		this.camera = camera;
+		this.element = renderer.domElement;
 
-		// TODO: Dispatch pointerevents too
+		this.element.addEventListener( 'pointerdown', this._onPointerEvent );
+		this.element.addEventListener( 'pointerup', this._onPointerEvent );
+		this.element.addEventListener( 'pointermove', this._onPointerEvent );
+		this.element.addEventListener( 'mousedown', this._onPointerEvent );
+		this.element.addEventListener( 'mouseup', this._onPointerEvent );
+		this.element.addEventListener( 'mousemove', this._onPointerEvent );
+		this.element.addEventListener( 'click', this._onPointerEvent );
 
-		const events = {
-			'move': 'mousemove',
-			'select': 'click',
-			'selectstart': 'mousedown',
-			'selectend': 'mouseup'
-		};
+	}
 
-		function onXRControllerEvent( event ) {
+	disconnectionPointerEvents() {
 
-			const controller = event.target;
+		if ( this.element !== null ) {
 
-			_raycaster.setFromXRController( controller );
+			this.element.removeEventListener( 'pointerdown', this._onPointerEvent );
+			this.element.removeEventListener( 'pointerup', this._onPointerEvent );
+			this.element.removeEventListener( 'pointermove', this._onPointerEvent );
+			this.element.removeEventListener( 'mousedown', this._onPointerEvent );
+			this.element.removeEventListener( 'mouseup', this._onPointerEvent );
+			this.element.removeEventListener( 'mousemove', this._onPointerEvent );
+			this.element.removeEventListener( 'click', this._onPointerEvent );
 
-			const intersections = _raycaster.intersectObjects( scope.children, false );
+		}
 
-			if ( intersections.length > 0 ) {
+	}
 
-				const intersection = intersections[ 0 ];
+	listenToXRControllerEvents( controller ) {
 
-				const object = intersection.object;
-				const uv = intersection.uv;
+		this.controllers.push( controller );
+		controller.addEventListener( 'move', this._onXRControllerEvent );
+		controller.addEventListener( 'select', this._onXRControllerEvent );
+		controller.addEventListener( 'selectstart', this._onXRControllerEvent );
+		controller.addEventListener( 'selectend', this._onXRControllerEvent );
 
-				_event.type = events[ event.type ];
-				_event.data.set( uv.x, 1 - uv.y );
+	}
+
+	disconnectXrControllerEvents() {
 
-				object.dispatchEvent( _event );
+		for ( const controller of this.controllers ) {
 
-			}
+			controller.removeEventListener( 'move', this._onXRControllerEvent );
+			controller.removeEventListener( 'select', this._onXRControllerEvent );
+			controller.removeEventListener( 'selectstart', this._onXRControllerEvent );
+			controller.removeEventListener( 'selectend', this._onXRControllerEvent );
 
 		}
 
-		controller.addEventListener( 'move', onXRControllerEvent );
-		controller.addEventListener( 'select', onXRControllerEvent );
-		controller.addEventListener( 'selectstart', onXRControllerEvent );
-		controller.addEventListener( 'selectend', onXRControllerEvent );
+	}
+
+	disconnect() {
+
+		this.disconnectionPointerEvents();
+		this.disconnectXrControllerEvents();
+
+		this.camera = null;
+		this.element = null;
+
+		this.controllers = [];
 
 	}
 

package/examples/jsm/interactive/SelectionHelper.js

@@ -59,6 +59,8 @@ class SelectionHelper {
 		this.renderer.domElement.removeEventListener( 'pointermove', this.onPointerMove );
 		this.renderer.domElement.removeEventListener( 'pointerup', this.onPointerUp );
 
+		this.element.remove(); // in case disposal happens while dragging
+
 	}
 
 	onSelectStart( event ) {
@@ -95,7 +97,7 @@ class SelectionHelper {
 
 	onSelectOver() {
 
-		this.element.parentElement.removeChild( this.element );
+		this.element.remove();
 
 	}