super-three 0.161.0 → 0.162.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

@@ -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

@@ -1288,7 +1288,17 @@ 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 ) ) {
+
+					ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
+
+				} else {
+
+					throw new Error( 'THREE.GLTFExporter: Invalid image type. Use HTMLImageElement, HTMLCanvasElement or ImageBitmap.' );
+
+				}
 
 			}
 

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 );
 
 	}