super-three 0.167.0 → 0.169.0

package/examples/jsm/controls/TransformControls.js

@@ -1,6 +1,7 @@
 import {
 	BoxGeometry,
 	BufferGeometry,
+	Controls,
 	CylinderGeometry,
 	DoubleSide,
 	Euler,
@@ -36,32 +37,22 @@ const _mouseDownEvent = { type: 'mouseDown', mode: null };
 const _mouseUpEvent = { type: 'mouseUp', mode: null };
 const _objectChangeEvent = { type: 'objectChange' };
 
-class TransformControls extends Object3D {
+class TransformControls extends Controls {
 
-	constructor( camera, domElement ) {
+	constructor( camera, domElement = null ) {
 
-		super();
-
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document;
+		super( undefined, domElement );
 
-		}
+		const root = new TransformControlsRoot( this );
+		this._root = root;
 
-		this.isTransformControls = true;
+		const gizmo = new TransformControlsGizmo();
+		this._gizmo = gizmo;
+		root.add( gizmo );
 
-		this.visible = false;
-		this.domElement = domElement;
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
-
-		const _gizmo = new TransformControlsGizmo();
-		this._gizmo = _gizmo;
-		this.add( _gizmo );
-
-		const _plane = new TransformControlsPlane();
-		this._plane = _plane;
-		this.add( _plane );
+		const plane = new TransformControlsPlane();
+		this._plane = plane;
+		root.add( plane );
 
 		const scope = this;
 
@@ -83,8 +74,8 @@ class TransformControls extends Object3D {
 					if ( propValue !== value ) {
 
 						propValue = value;
-						_plane[ propName ] = value;
-						_gizmo[ propName ] = value;
+						plane[ propName ] = value;
+						gizmo[ propName ] = value;
 
 						scope.dispatchEvent( { type: propName + '-changed', value: value } );
 						scope.dispatchEvent( _changeEvent );
@@ -96,8 +87,8 @@ class TransformControls extends Object3D {
 			} );
 
 			scope[ propName ] = defaultValue;
-			_plane[ propName ] = defaultValue;
-			_gizmo[ propName ] = defaultValue;
+			plane[ propName ] = defaultValue;
+			gizmo[ propName ] = defaultValue;
 
 		}
 
@@ -172,50 +163,38 @@ class TransformControls extends Object3D {
 		this._onPointerMove = onPointerMove.bind( this );
 		this._onPointerUp = onPointerUp.bind( this );
 
-		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
-		this.domElement.addEventListener( 'pointermove', this._onPointerHover );
-		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
-
-	}
-
-	// updateMatrixWorld updates key transformation variables
-	updateMatrixWorld( force ) {
-
-		if ( this.object !== undefined ) {
+		if ( domElement !== null ) {
 
-			this.object.updateMatrixWorld();
-
-			if ( this.object.parent === null ) {
-
-				console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' );
-
-			} else {
+			this.connect();
 
-				this.object.parent.matrixWorld.decompose( this._parentPosition, this._parentQuaternion, this._parentScale );
+		}
 
-			}
+	}
 
-			this.object.matrixWorld.decompose( this.worldPosition, this.worldQuaternion, this._worldScale );
+	connect() {
 
-			this._parentQuaternionInv.copy( this._parentQuaternion ).invert();
-			this._worldQuaternionInv.copy( this.worldQuaternion ).invert();
+		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.addEventListener( 'pointermove', this._onPointerHover );
+		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
 
-		}
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
 
-		this.camera.updateMatrixWorld();
-		this.camera.matrixWorld.decompose( this.cameraPosition, this.cameraQuaternion, this._cameraScale );
+	}
 
-		if ( this.camera.isOrthographicCamera ) {
+	disconnect() {
 
-			this.camera.getWorldDirection( this.eye ).negate();
+		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
+		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
 
-		} else {
+		this.domElement.style.touchAction = 'auto';
 
-			this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();
+	}
 
-		}
+	getHelper() {
 
-		super.updateMatrixWorld( force );
+		return this._root;
 
 	}
 
@@ -555,10 +534,7 @@ class TransformControls extends Object3D {
 
 	dispose() {
 
-		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.disconnect();
 
 		this.traverse( function ( child ) {
 
@@ -573,7 +549,7 @@ class TransformControls extends Object3D {
 	attach( object ) {
 
 		this.object = object;
-		this.visible = true;
+		this._root.visible = true;
 
 		return this;
 
@@ -583,9 +559,10 @@ class TransformControls extends Object3D {
 	detach() {
 
 		this.object = undefined;
-		this.visible = false;
 		this.axis = null;
 
+		this._root.visible = false;
+
 		return this;
 
 	}
@@ -778,6 +755,64 @@ const _v1 = new Vector3();
 const _v2 = new Vector3();
 const _v3 = new Vector3();
 
+class TransformControlsRoot extends Object3D {
+
+	constructor( controls ) {
+
+		super();
+
+		this.isTransformControlsRoot = true;
+
+		this.controls = controls;
+		this.visible = false;
+
+	}
+
+	// updateMatrixWorld updates key transformation variables
+	updateMatrixWorld( force ) {
+
+		const controls = this.controls;
+
+		if ( controls.object !== undefined ) {
+
+			controls.object.updateMatrixWorld();
+
+			if ( controls.object.parent === null ) {
+
+				console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' );
+
+			} else {
+
+				controls.object.parent.matrixWorld.decompose( controls._parentPosition, controls._parentQuaternion, controls._parentScale );
+
+			}
+
+			controls.object.matrixWorld.decompose( controls.worldPosition, controls.worldQuaternion, controls._worldScale );
+
+			controls._parentQuaternionInv.copy( controls._parentQuaternion ).invert();
+			controls._worldQuaternionInv.copy( controls.worldQuaternion ).invert();
+
+		}
+
+		controls.camera.updateMatrixWorld();
+		controls.camera.matrixWorld.decompose( controls.cameraPosition, controls.cameraQuaternion, controls._cameraScale );
+
+		if ( controls.camera.isOrthographicCamera ) {
+
+			controls.camera.getWorldDirection( controls.eye ).negate();
+
+		} else {
+
+			controls.eye.copy( controls.cameraPosition ).sub( controls.worldPosition ).normalize();
+
+		}
+
+		super.updateMatrixWorld( force );
+
+	}
+
+}
+
 class TransformControlsGizmo extends Object3D {
 
 	constructor() {

package/examples/jsm/effects/AnaglyphEffect.js

@@ -1,16 +1,13 @@
 import {
 	LinearFilter,
 	Matrix3,
-	Mesh,
 	NearestFilter,
-	OrthographicCamera,
-	PlaneGeometry,
 	RGBAFormat,
-	Scene,
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
 } from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
 
 class AnaglyphEffect {
 
@@ -30,10 +27,6 @@ class AnaglyphEffect {
 			- 0.00155529, - 0.0184503, 1.2264
 		] );
 
-		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-
-		const _scene = new Scene();
-
 		const _stereo = new StereoCamera();
 
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
@@ -99,8 +92,7 @@ class AnaglyphEffect {
 
 		} );
 
-		const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
-		_scene.add( _mesh );
+		const _quad = new FullScreenQuad( _material );
 
 		this.setSize = function ( width, height ) {
 
@@ -132,7 +124,7 @@ class AnaglyphEffect {
 			renderer.render( scene, _stereo.cameraR );
 
 			renderer.setRenderTarget( null );
-			renderer.render( _scene, _camera );
+			_quad.render( renderer );
 
 			renderer.setRenderTarget( currentRenderTarget );
 
@@ -142,8 +134,9 @@ class AnaglyphEffect {
 
 			_renderTargetL.dispose();
 			_renderTargetR.dispose();
-			_mesh.geometry.dispose();
-			_mesh.material.dispose();
+
+			_material.dispose();
+			_quad.dispose();
 
 		};
 

package/examples/jsm/effects/ParallaxBarrierEffect.js

@@ -1,24 +1,17 @@
 import {
 	LinearFilter,
-	Mesh,
 	NearestFilter,
-	OrthographicCamera,
-	PlaneGeometry,
 	RGBAFormat,
-	Scene,
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
 } from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
 
 class ParallaxBarrierEffect {
 
 	constructor( renderer ) {
 
-		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-
-		const _scene = new Scene();
-
 		const _stereo = new StereoCamera();
 
 		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
@@ -77,8 +70,7 @@ class ParallaxBarrierEffect {
 
 		} );
 
-		const mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
-		_scene.add( mesh );
+		const _quad = new FullScreenQuad( _material );
 
 		this.setSize = function ( width, height ) {
 
@@ -93,6 +85,8 @@ class ParallaxBarrierEffect {
 
 		this.render = function ( scene, camera ) {
 
+			const currentRenderTarget = renderer.getRenderTarget();
+
 			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
 			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
@@ -108,7 +102,19 @@ class ParallaxBarrierEffect {
 			renderer.render( scene, _stereo.cameraR );
 
 			renderer.setRenderTarget( null );
-			renderer.render( _scene, _camera );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
 
 		};
 

package/examples/jsm/effects/StereoEffect.js

@@ -31,9 +31,12 @@ class StereoEffect {
 
 			_stereo.update( camera );
 
+			const currentAutoClear = renderer.autoClear;
 			renderer.getSize( size );
 
-			if ( renderer.autoClear ) renderer.clear();
+			renderer.autoClear = false;
+			renderer.clear();
+
 			renderer.setScissorTest( true );
 
 			renderer.setScissor( 0, 0, size.width / 2, size.height );
@@ -46,6 +49,8 @@ class StereoEffect {
 
 			renderer.setScissorTest( false );
 
+			renderer.autoClear = currentAutoClear;
+
 		};
 
 	}

package/examples/jsm/environments/RoomEnvironment.js

@@ -14,7 +14,7 @@ import {
 
 class RoomEnvironment extends Scene {
 
-	constructor( renderer = null ) {
+	constructor() {
 
 		super();
 

package/examples/jsm/exporters/DRACOExporter.js

@@ -1,4 +1,4 @@
-import { Color } from 'three';
+import { Color, ColorManagement, SRGBColorSpace } from 'three';
 
 /**
  * Export draco compressed files from threejs geometry objects.
@@ -227,7 +227,9 @@ function createVertexColorSRGBArray( attribute ) {
 
 	for ( let i = 0, il = count; i < il; i ++ ) {
 
-		_color.fromBufferAttribute( attribute, i ).convertLinearToSRGB();
+		_color.fromBufferAttribute( attribute, i );
+
+		ColorManagement.fromWorkingColorSpace( _color, SRGBColorSpace );
 
 		array[ i * itemSize ] = _color.r;
 		array[ i * itemSize + 1 ] = _color.g;

package/examples/jsm/exporters/EXRExporter.js

@@ -21,20 +21,20 @@ const ZIP_COMPRESSION = 3;
 
 class EXRExporter {
 
-	parse( arg1, arg2, arg3 ) {
+	async parse( arg1, arg2, arg3 ) {
 
-		if ( ! arg1 || ! ( arg1.isWebGLRenderer || arg1.isDataTexture ) ) {
+		if ( ! arg1 || ! ( arg1.isWebGLRenderer || arg1.isWebGPURenderer || arg1.isDataTexture ) ) {
 
 			throw Error( 'EXRExporter.parse: Unsupported first parameter, expected instance of WebGLRenderer or DataTexture.' );
 
-		} else if ( arg1.isWebGLRenderer ) {
+		} else if ( arg1.isWebGLRenderer || arg1.isWebGPURenderer ) {
 
 			const renderer = arg1, renderTarget = arg2, options = arg3;
 
 			supportedRTT( renderTarget );
 
 			const info = buildInfoRTT( renderTarget, options ),
-				dataBuffer = getPixelData( renderer, renderTarget, info ),
+				dataBuffer = await getPixelData( renderer, renderTarget, info ),
 				rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
 				chunks = compressData( rawContentBuffer, info );
 
@@ -61,7 +61,7 @@ class EXRExporter {
 
 function supportedRTT( renderTarget ) {
 
-	if ( ! renderTarget || ! renderTarget.isWebGLRenderTarget ) {
+	if ( ! renderTarget || ! renderTarget.isRenderTarget ) {
 
 		throw Error( 'EXRExporter.parse: Unsupported second parameter, expected instance of WebGLRenderTarget.' );
 
@@ -189,22 +189,30 @@ function buildInfoDT( texture, options = {} ) {
 
 }
 
-function getPixelData( renderer, rtt, info ) {
+async function getPixelData( renderer, rtt, info ) {
 
 	let dataBuffer;
 
-	if ( info.type === FloatType ) {
+	if ( renderer.isWebGLRenderer ) {
 
-		dataBuffer = new Float32Array( info.width * info.height * info.numInputChannels );
+		if ( info.type === FloatType ) {
+
+			dataBuffer = new Float32Array( info.width * info.height * info.numInputChannels );
+
+		} else {
+
+			dataBuffer = new Uint16Array( info.width * info.height * info.numInputChannels );
+
+		}
+
+		await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, info.width, info.height, dataBuffer );
 
 	} else {
 
-		dataBuffer = new Uint16Array( info.width * info.height * info.numInputChannels );
+		dataBuffer = await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, info.width, info.height );
 
 	}
 
-	renderer.readRenderTargetPixels( rtt, 0, 0, info.width, info.height, dataBuffer );
-
 	return dataBuffer;
 
 }

package/examples/jsm/exporters/GLTFExporter.js

@@ -2837,7 +2837,12 @@ class GLTFMaterialsVolumeExtension {
 
 		}
 
-		extensionDef.attenuationDistance = material.attenuationDistance;
+		if ( material.attenuationDistance !== Infinity ) {
+
+			extensionDef.attenuationDistance = material.attenuationDistance;
+
+		}
+
 		extensionDef.attenuationColor = material.attenuationColor.toArray();
 
 		materialDef.extensions = materialDef.extensions || {};

package/examples/jsm/exporters/KTX2Exporter.js

@@ -111,7 +111,7 @@ const ERROR_COLOR_SPACE = 'THREE.KTX2Exporter: Supported color spaces are SRGBCo
 
 export class KTX2Exporter {
 
-	parse( arg1, arg2 ) {
+	async parse( arg1, arg2 ) {
 
 		let texture;
 
@@ -119,9 +119,9 @@ export class KTX2Exporter {
 
 			texture = arg1;
 
-		} else if ( arg1.isWebGLRenderer && arg2.isWebGLRenderTarget ) {
+		} else if ( ( arg1.isWebGLRenderer || arg1.isWebGPURenderer ) && arg2.isRenderTarget ) {
 
-			texture = toDataTexture( arg1, arg2 );
+			texture = await toDataTexture( arg1, arg2 );
 
 		} else {
 
@@ -235,32 +235,40 @@ export class KTX2Exporter {
 
 }
 
-function toDataTexture( renderer, rtt ) {
+async function toDataTexture( renderer, rtt ) {
 
 	const channelCount = getChannelCount( rtt.texture );
 
 	let view;
 
-	if ( rtt.texture.type === FloatType ) {
+	if ( renderer.isWebGLRenderer ) {
 
-		view = new Float32Array( rtt.width * rtt.height * channelCount );
+		if ( rtt.texture.type === FloatType ) {
 
-	} else if ( rtt.texture.type === HalfFloatType ) {
+			view = new Float32Array( rtt.width * rtt.height * channelCount );
 
-		view = new Uint16Array( rtt.width * rtt.height * channelCount );
+		} else if ( rtt.texture.type === HalfFloatType ) {
 
-	} else if ( rtt.texture.type === UnsignedByteType ) {
+			view = new Uint16Array( rtt.width * rtt.height * channelCount );
 
-		view = new Uint8Array( rtt.width * rtt.height * channelCount );
+		} else if ( rtt.texture.type === UnsignedByteType ) {
+
+			view = new Uint8Array( rtt.width * rtt.height * channelCount );
+
+		} else {
+
+			throw new Error( ERROR_TYPE );
+
+		}
+
+		await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, rtt.width, rtt.height, view );
 
 	} else {
 
-		throw new Error( ERROR_TYPE );
+		view = await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, rtt.width, rtt.height );
 
 	}
 
-	renderer.readRenderTargetPixels( rtt, 0, 0, rtt.width, rtt.height, view );
-
 	return new DataTexture( view, rtt.width, rtt.height, rtt.texture.format, rtt.texture.type );
 
 }

package/examples/jsm/exporters/OBJExporter.js

@@ -1,6 +1,8 @@
 import {
 	Color,
+	ColorManagement,
 	Matrix3,
+	SRGBColorSpace,
 	Vector2,
 	Vector3
 } from 'three';
@@ -226,7 +228,9 @@ class OBJExporter {
 
 					if ( colors !== undefined ) {
 
-						color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+						color.fromBufferAttribute( colors, i );
+
+						ColorManagement.fromWorkingColorSpace( color, SRGBColorSpace );
 
 						output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
 

package/examples/jsm/exporters/PLYExporter.js

@@ -1,7 +1,9 @@
 import {
 	Matrix3,
 	Vector3,
-	Color
+	Color,
+	ColorManagement,
+	SRGBColorSpace
 } from 'three';
 
 /**
@@ -302,9 +304,9 @@ class PLYExporter {
 
 						if ( colors != null ) {
 
-							tempColor
-								.fromBufferAttribute( colors, i )
-								.convertLinearToSRGB();
+							tempColor.fromBufferAttribute( colors, i );
+
+							ColorManagement.fromWorkingColorSpace( tempColor, SRGBColorSpace );
 
 							output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
 							vOffset += 1;
@@ -461,9 +463,9 @@ class PLYExporter {
 
 						if ( colors != null ) {
 
-							tempColor
-								.fromBufferAttribute( colors, i )
-								.convertLinearToSRGB();
+							tempColor.fromBufferAttribute( colors, i );
+
+							ColorManagement.fromWorkingColorSpace( tempColor, SRGBColorSpace );
 
 							line += ' ' +
 								Math.floor( tempColor.r * 255 ) + ' ' +