super-three 0.161.0 → 0.163.0

package/examples/jsm/controls/DragControls.js

@@ -12,10 +12,15 @@ const _raycaster = new Raycaster();
 
 const _pointer = new Vector2();
 const _offset = new Vector3();
+const _diff = new Vector2();
+const _previousPointer = new Vector2();
 const _intersection = new Vector3();
 const _worldPosition = new Vector3();
 const _inverseMatrix = new Matrix4();
 
+const _up = new Vector3();
+const _right = new Vector3();
+
 class DragControls extends EventDispatcher {
 
 	constructor( _objects, _camera, _domElement ) {
@@ -28,6 +33,10 @@ class DragControls extends EventDispatcher {
 
 		const _intersections = [];
 
+		this.mode = 'translate';
+
+		this.rotateSpeed = 1;
+
 		//
 
 		const scope = this;
@@ -64,6 +73,12 @@ class DragControls extends EventDispatcher {
 
 		}
 
+		function setObjects( objects ) {
+
+			_objects = objects;
+
+		}
+
 		function getRaycaster() {
 
 			return _raycaster;
@@ -80,59 +95,71 @@ class DragControls extends EventDispatcher {
 
 			if ( _selected ) {
 
-				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+				if ( scope.mode === 'translate' ) {
 
-					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+						_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+					}
+
+				} else if ( scope.mode === 'rotate' ) {
+
+					_diff.subVectors( _pointer, _previousPointer ).multiplyScalar( scope.rotateSpeed );
+					_selected.rotateOnWorldAxis( _up, _diff.x );
+					_selected.rotateOnWorldAxis( _right.normalize(), - _diff.y );
 
 				}
 
 				scope.dispatchEvent( { type: 'drag', object: _selected } );
 
-				return;
+				_previousPointer.copy( _pointer );
 
-			}
+			} else {
 
-			// hover support
+				// hover support
 
-			if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
+				if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
 
-				_intersections.length = 0;
+					_intersections.length = 0;
 
-				_raycaster.setFromCamera( _pointer, _camera );
-				_raycaster.intersectObjects( _objects, scope.recursive, _intersections );
+					_raycaster.setFromCamera( _pointer, _camera );
+					_raycaster.intersectObjects( _objects, scope.recursive, _intersections );
 
-				if ( _intersections.length > 0 ) {
+					if ( _intersections.length > 0 ) {
 
-					const object = _intersections[ 0 ].object;
+						const object = _intersections[ 0 ].object;
 
-					_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
+						_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
 
-					if ( _hovered !== object && _hovered !== null ) {
+						if ( _hovered !== object && _hovered !== null ) {
 
-						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+							scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
 
-						_domElement.style.cursor = 'auto';
-						_hovered = null;
+							_domElement.style.cursor = 'auto';
+							_hovered = null;
 
-					}
+						}
 
-					if ( _hovered !== object ) {
+						if ( _hovered !== object ) {
 
-						scope.dispatchEvent( { type: 'hoveron', object: object } );
+							scope.dispatchEvent( { type: 'hoveron', object: object } );
 
-						_domElement.style.cursor = 'pointer';
-						_hovered = object;
+							_domElement.style.cursor = 'pointer';
+							_hovered = object;
 
-					}
+						}
 
-				} else {
+					} else {
 
-					if ( _hovered !== null ) {
+						if ( _hovered !== null ) {
 
-						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+							scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
 
-						_domElement.style.cursor = 'auto';
-						_hovered = null;
+							_domElement.style.cursor = 'auto';
+							_hovered = null;
+
+						}
 
 					}
 
@@ -140,6 +167,8 @@ class DragControls extends EventDispatcher {
 
 			}
 
+			_previousPointer.copy( _pointer );
+
 		}
 
 		function onPointerDown( event ) {
@@ -155,14 +184,34 @@ class DragControls extends EventDispatcher {
 
 			if ( _intersections.length > 0 ) {
 
-				_selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
+				if ( scope.transformGroup === true ) {
+
+					// look for the outermost group in the object's upper hierarchy
+
+					_selected = findGroup( _intersections[ 0 ].object );
+
+				} else {
+
+					_selected = _intersections[ 0 ].object;
+
+				}
 
 				_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
 
 				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
-					_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
-					_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+					if ( scope.mode === 'translate' ) {
+
+						_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
+						_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+					} else if ( scope.mode === 'rotate' ) {
+
+						// the controls only support Y+ up
+						_up.set( 0, 1, 0 ).applyQuaternion( _camera.quaternion ).normalize();
+						_right.set( 1, 0, 0 ).applyQuaternion( _camera.quaternion ).normalize();
+
+					}
 
 				}
 
@@ -172,6 +221,7 @@ class DragControls extends EventDispatcher {
 
 			}
 
+			_previousPointer.copy( _pointer );
 
 		}
 
@@ -200,6 +250,16 @@ class DragControls extends EventDispatcher {
 
 		}
 
+		function findGroup( obj, group = null ) {
+
+			if ( obj.isGroup ) group = obj;
+
+			if ( obj.parent === null ) return group;
+
+			return findGroup( obj.parent, group );
+
+		}
+
 		activate();
 
 		// API
@@ -213,6 +273,7 @@ class DragControls extends EventDispatcher {
 		this.dispose = dispose;
 		this.getObjects = getObjects;
 		this.getRaycaster = getRaycaster;
+		this.setObjects = setObjects;
 
 	}
 

package/examples/jsm/controls/OrbitControls.js

@@ -261,6 +261,7 @@ class OrbitControls extends EventDispatcher {
 				scope.target.clampLength( scope.minTargetRadius, scope.maxTargetRadius );
 				scope.target.add( scope.cursor );
 
+				let zoomChanged = false;
 				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
 				// we adjust zoom later in these cases
 				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
@@ -269,7 +270,9 @@ class OrbitControls extends EventDispatcher {
 
 				} else {
 
+					const prevRadius = spherical.radius;
 					spherical.radius = clampDistance( spherical.radius * scale );
+					zoomChanged = prevRadius != spherical.radius;
 
 				}
 
@@ -298,7 +301,6 @@ class OrbitControls extends EventDispatcher {
 				}
 
 				// adjust camera position
-				let zoomChanged = false;
 				if ( scope.zoomToCursor && performCursorZoom ) {
 
 					let newRadius = null;
@@ -313,15 +315,19 @@ class OrbitControls extends EventDispatcher {
 						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
 						scope.object.updateMatrixWorld();
 
+						zoomChanged = !! radiusDelta;
+
 					} else if ( scope.object.isOrthographicCamera ) {
 
 						// adjust the ortho camera position based on zoom changes
 						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );
 						mouseBefore.unproject( scope.object );
 
+						const prevZoom = scope.object.zoom;
 						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
 						scope.object.updateProjectionMatrix();
-						zoomChanged = true;
+
+						zoomChanged = prevZoom !== scope.object.zoom;
 
 						const mouseAfter = new Vector3( mouse.x, mouse.y, 0 );
 						mouseAfter.unproject( scope.object );
@@ -374,12 +380,13 @@ class OrbitControls extends EventDispatcher {
 
 				} else if ( scope.object.isOrthographicCamera ) {
 
-					zoomChanged = scale !== 1;
+					const prevZoom = scope.object.zoom;
+					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
 
-					if ( zoomChanged ) {
+					if ( prevZoom !== scope.object.zoom ) {
 
-						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
 						scope.object.updateProjectionMatrix();
+						zoomChanged = true;
 
 					}
 
@@ -395,7 +402,7 @@ class OrbitControls extends EventDispatcher {
 				if ( zoomChanged ||
 					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
 					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
-					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
+					lastTargetPosition.distanceToSquared( scope.target ) > EPS ) {
 
 					scope.dispatchEvent( _changeEvent );
 
@@ -424,6 +431,9 @@ class OrbitControls extends EventDispatcher {
 			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
 			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
+			const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+			document.removeEventListener( 'keydown', interceptControlDown, { capture: true } );
 
 			if ( scope._domElementKeyEvents !== null ) {
 
@@ -1013,6 +1023,10 @@ class OrbitControls extends EventDispatcher {
 
 			//
 
+			if ( isTrackingPointer( event ) ) return;
+
+			//
+
 			addPointer( event );
 
 			if ( event.pointerType === 'touch' ) {
@@ -1460,6 +1474,18 @@ class OrbitControls extends EventDispatcher {
 
 		}
 
+		function isTrackingPointer( event ) {
+
+			for ( let i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) return true;
+
+			}
+
+			return false;
+
+		}
+
 		function trackPointer( event ) {
 
 			let position = pointerPositions[ event.pointerId ];

package/examples/jsm/controls/TransformControls.js

@@ -178,8 +178,8 @@ class TransformControls extends Object3D {
 
 	}
 
-	// updateMatrixWorld  updates key transformation variables
-	updateMatrixWorld() {
+	// updateMatrixWorld updates key transformation variables
+	updateMatrixWorld( force ) {
 
 		if ( this.object !== undefined ) {
 
@@ -215,7 +215,7 @@ class TransformControls extends Object3D {
 
 		}
 
-		super.updateMatrixWorld( this );
+		super.updateMatrixWorld( force );
 
 	}
 
@@ -223,7 +223,7 @@ class TransformControls extends Object3D {
 
 		if ( this.object === undefined || this.dragging === true ) return;
 
-		_raycaster.setFromCamera( pointer, this.camera );
+		if ( pointer !== null ) _raycaster.setFromCamera( pointer, this.camera );
 
 		const intersect = intersectObjectWithRay( this._gizmo.picker[ this.mode ], _raycaster );
 
@@ -241,11 +241,11 @@ class TransformControls extends Object3D {
 
 	pointerDown( pointer ) {
 
-		if ( this.object === undefined || this.dragging === true || pointer.button !== 0 ) return;
+		if ( this.object === undefined || this.dragging === true || ( pointer != null && pointer.button !== 0 ) ) return;
 
 		if ( this.axis !== null ) {
 
-			_raycaster.setFromCamera( pointer, this.camera );
+			if ( pointer !== null ) _raycaster.setFromCamera( pointer, this.camera );
 
 			const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true );
 
@@ -289,9 +289,9 @@ class TransformControls extends Object3D {
 
 		}
 
-		if ( object === undefined || axis === null || this.dragging === false || pointer.button !== - 1 ) return;
+		if ( object === undefined || axis === null || this.dragging === false || ( pointer !== null && pointer.button !== - 1 ) ) return;
 
-		_raycaster.setFromCamera( pointer, this.camera );
+		if ( pointer !== null ) _raycaster.setFromCamera( pointer, this.camera );
 
 		const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true );
 
@@ -539,7 +539,7 @@ class TransformControls extends Object3D {
 
 	pointerUp( pointer ) {
 
-		if ( pointer.button !== 0 ) return;
+		if ( pointer !== null && pointer.button !== 0 ) return;
 
 		if ( this.dragging && ( this.axis !== null ) ) {
 

package/examples/jsm/exporters/GLTFExporter.js

@@ -982,7 +982,17 @@ class GLTFWriter {
 
 		}
 
-		const byteLength = getPaddedBufferSize( count * attribute.itemSize * componentSize );
+		let byteStride = attribute.itemSize * componentSize;
+
+		if ( target === WEBGL_CONSTANTS.ARRAY_BUFFER ) {
+
+			// Each element of a vertex attribute MUST be aligned to 4-byte boundaries
+			// inside a bufferView
+			byteStride = Math.ceil( byteStride / 4 ) * 4;
+
+		}
+
+		const byteLength = getPaddedBufferSize( count * byteStride );
 		const dataView = new DataView( new ArrayBuffer( byteLength ) );
 		let offset = 0;
 
@@ -1047,6 +1057,12 @@ class GLTFWriter {
 
 			}
 
+			if ( ( offset % byteStride ) !== 0 ) {
+
+				offset += byteStride - ( offset % byteStride );
+
+			}
+
 		}
 
 		const bufferViewDef = {
@@ -1062,7 +1078,7 @@ class GLTFWriter {
 		if ( target === WEBGL_CONSTANTS.ARRAY_BUFFER ) {
 
 			// Only define byteStride for vertex attributes.
-			bufferViewDef.byteStride = attribute.itemSize * componentSize;
+			bufferViewDef.byteStride = byteStride;
 
 		}
 
@@ -1288,7 +1304,18 @@ class GLTFWriter {
 
 			} else {
 
-				ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
+				if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
+					( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
+					( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ||
+					( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ) {
+
+					ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
+
+				} else {
+
+					throw new Error( 'THREE.GLTFExporter: Invalid image type. Use HTMLImageElement, HTMLCanvasElement, ImageBitmap or OffscreenCanvas.' );
+
+				}
 
 			}
 

package/examples/jsm/exporters/USDZExporter.js

@@ -409,6 +409,21 @@ function buildPrimvars( attributes ) {
 
 	}
 
+	// vertex colors
+
+	const colorAttribute = attributes.color;
+
+	if ( colorAttribute !== undefined ) {
+
+		const count = colorAttribute.count;
+
+		string += `
+	color3f[] primvars:displayColor = [${buildVector3Array( colorAttribute, count )}] (
+		interpolation = "vertex"
+		)`;
+
+	}
+
 	return string;
 
 }

package/examples/jsm/geometries/TextGeometry.js

@@ -5,7 +5,7 @@
  *  font: <THREE.Font>, // font
  *
  *  size: <float>, // size of the text
- *  height: <float>, // thickness to extrude text
+ *  depth: <float>, // thickness to extrude text
  *  curveSegments: <int>, // number of points on the curves
  *
  *  bevelEnabled: <bool>, // turn on bevel
@@ -35,7 +35,15 @@ class TextGeometry extends ExtrudeGeometry {
 
 			// translate parameters to ExtrudeGeometry API
 
-			parameters.depth = parameters.height !== undefined ? parameters.height : 50;
+			if ( parameters.depth === undefined && parameters.height !== undefined ) {
+
+				console.warn( 'THREE.TextGeometry: .height is now depreciated. Please use .depth instead' ); // @deprecated, r163
+
+			}
+
+			parameters.depth = parameters.depth !== undefined ?
+				parameters.depth : parameters.height !== undefined ?
+					parameters.height : 50;
 
 			// defaults
 

package/examples/jsm/interactive/HTMLMesh.js

@@ -241,6 +241,13 @@ function html2canvas( element ) {
 
 	function drawElement( element, style ) {
 
+		// Do not render invisible elements, comments and scripts.
+		if ( element.nodeType === Node.COMMENT_NODE || element.nodeName === 'SCRIPT' || ( element.style && element.style.display === 'none' ) ) {
+
+			return;
+
+		}
+
 		let x = 0, y = 0, width = 0, height = 0;
 
 		if ( element.nodeType === Node.TEXT_NODE ) {
@@ -258,14 +265,9 @@ function html2canvas( element ) {
 
 			drawText( style, x, y, element.nodeValue.trim() );
 
-		} else if ( element.nodeType === Node.COMMENT_NODE ) {
-
-			return;
-
 		} else if ( element instanceof HTMLCanvasElement ) {
 
 			// Canvas element
-			if ( element.style.display === 'none' ) return;
 
 			const rect = element.getBoundingClientRect();
 
@@ -280,8 +282,6 @@ function html2canvas( element ) {
 
 		} else if ( element instanceof HTMLImageElement ) {
 
-			if ( element.style.display === 'none' ) return;
-
 			const rect = element.getBoundingClientRect();
 
 			x = rect.left - offset.left - 0.5;
@@ -293,8 +293,6 @@ function html2canvas( element ) {
 
 		} else {
 
-			if ( element.style.display === 'none' ) return;
-
 			const rect = element.getBoundingClientRect();
 
 			x = rect.left - offset.left - 0.5;

package/examples/jsm/interactive/InteractiveGroup.js

@@ -1,6 +1,5 @@
 import {
 	Group,
-	Matrix4,
 	Raycaster,
 	Vector2
 } from 'three';
@@ -8,18 +7,14 @@ import {
 const _pointer = new Vector2();
 const _event = { type: '', data: _pointer };
 
-class InteractiveGroup extends Group {
+const _raycaster = new Raycaster();
 
-	constructor( renderer, camera ) {
+class InteractiveGroup extends Group {
 
-		super();
+	listenToPointerEvents( renderer, camera ) {
 
 		const scope = this;
-
 		const raycaster = new Raycaster();
-		const tempMatrix = new Matrix4();
-
-		// Pointer Events
 
 		const element = renderer.domElement;
 
@@ -60,7 +55,12 @@ class InteractiveGroup extends Group {
 		element.addEventListener( 'mousemove', onPointerEvent );
 		element.addEventListener( 'click', onPointerEvent );
 
-		// WebXR Controller Events
+	}
+
+	listenToXRControllerEvents( controller ) {
+
+		const scope = this;
+
 		// TODO: Dispatch pointerevents too
 
 		const events = {
@@ -74,12 +74,9 @@ class InteractiveGroup extends Group {
 
 			const controller = event.target;
 
-			tempMatrix.identity().extractRotation( controller.matrixWorld );
-
-			raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
-			raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
+			_raycaster.setFromXRController( controller );
 
-			const intersections = raycaster.intersectObjects( scope.children, false );
+			const intersections = _raycaster.intersectObjects( scope.children, false );
 
 			if ( intersections.length > 0 ) {
 
@@ -97,17 +94,10 @@ class InteractiveGroup extends Group {
 
 		}
 
-		const controller1 = renderer.xr.getController( 0 );
-		controller1.addEventListener( 'move', onXRControllerEvent );
-		controller1.addEventListener( 'select', onXRControllerEvent );
-		controller1.addEventListener( 'selectstart', onXRControllerEvent );
-		controller1.addEventListener( 'selectend', onXRControllerEvent );
-
-		const controller2 = renderer.xr.getController( 1 );
-		controller2.addEventListener( 'move', onXRControllerEvent );
-		controller2.addEventListener( 'select', onXRControllerEvent );
-		controller2.addEventListener( 'selectstart', onXRControllerEvent );
-		controller2.addEventListener( 'selectend', onXRControllerEvent );
+		controller.addEventListener( 'move', onXRControllerEvent );
+		controller.addEventListener( 'select', onXRControllerEvent );
+		controller.addEventListener( 'selectstart', onXRControllerEvent );
+		controller.addEventListener( 'selectend', onXRControllerEvent );
 
 	}