super-three 0.179.0 → 0.184.0

package/examples/jsm/controls/FirstPersonControls.js

@@ -22,7 +22,7 @@ class FirstPersonControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Object3D} object - The object that is managed by the controls.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( object, domElement = null ) {
 
@@ -60,14 +60,6 @@ class FirstPersonControls extends Controls {
 		 */
 		this.autoForward = false;
 
-		/**
-		 * Whether it's possible to look around or not.
-		 *
-		 * @type {boolean}
-		 * @default true
-		 */
-		this.activeLook = true;
-
 		/**
 		 * Whether or not the camera's height influences the forward movement speed.
 		 * Use the properties `heightCoef`, `heightMin` and `heightMax` for configuration.
@@ -141,14 +133,16 @@ class FirstPersonControls extends Controls {
 		this._pointerX = 0;
 		this._pointerY = 0;
 
+		this._pointerDownX = 0;
+		this._pointerDownY = 0;
+
+		this._pointerCount = 0;
+
 		this._moveForward = false;
 		this._moveBackward = false;
 		this._moveLeft = false;
 		this._moveRight = false;
 
-		this._viewHalfX = 0;
-		this._viewHalfY = 0;
-
 		this._lat = 0;
 		this._lon = 0;
 
@@ -167,8 +161,6 @@ class FirstPersonControls extends Controls {
 
 			this.connect( domElement );
 
-			this.handleResize();
-
 		}
 
 		this._setOrientation();
@@ -187,6 +179,8 @@ class FirstPersonControls extends Controls {
 		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
+
 	}
 
 	disconnect() {
@@ -194,11 +188,13 @@ class FirstPersonControls extends Controls {
 		window.removeEventListener( 'keydown', this._onKeyDown );
 		window.removeEventListener( 'keyup', this._onKeyUp );
 
-		this.domElement.removeEventListener( 'pointerdown', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerDown );
+		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
 		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
+		this.domElement.style.touchAction = ''; // Restore touch scroll
+
 	}
 
 	dispose() {
@@ -207,25 +203,6 @@ class FirstPersonControls extends Controls {
 
 	}
 
-	/**
-	 * Must be called if the application window is resized.
-	 */
-	handleResize() {
-
-		if ( this.domElement === document ) {
-
-			this._viewHalfX = window.innerWidth / 2;
-			this._viewHalfY = window.innerHeight / 2;
-
-		} else {
-
-			this._viewHalfX = this.domElement.offsetWidth / 2;
-			this._viewHalfY = this.domElement.offsetHeight / 2;
-
-		}
-
-	}
-
 	/**
 	 * Rotates the camera towards the defined target position.
 	 *
@@ -282,13 +259,7 @@ class FirstPersonControls extends Controls {
 		if ( this._moveUp ) this.object.translateY( actualMoveSpeed );
 		if ( this._moveDown ) this.object.translateY( - actualMoveSpeed );
 
-		let actualLookSpeed = delta * this.lookSpeed;
-
-		if ( ! this.activeLook ) {
-
-			actualLookSpeed = 0;
-
-		}
+		const actualLookSpeed = delta * this.lookSpeed;
 
 		let verticalLookRatio = 1;
 
@@ -298,8 +269,12 @@ class FirstPersonControls extends Controls {
 
 		}
 
-		this._lon -= this._pointerX * actualLookSpeed;
-		if ( this.lookVertical ) this._lat -= this._pointerY * actualLookSpeed * verticalLookRatio;
+		if ( this.mouseDragOn ) {
+
+			this._lon -= this._pointerX * actualLookSpeed;
+			if ( this.lookVertical ) this._lat -= this._pointerY * actualLookSpeed * verticalLookRatio;
+
+		}
 
 		this._lat = Math.max( - 85, Math.min( 85, this._lat ) );
 
@@ -332,6 +307,15 @@ class FirstPersonControls extends Controls {
 
 	}
 
+	/**
+	 * @deprecated, r184. This method is no longer needed.
+	 */
+	handleResize() {
+
+		console.warn( 'THREE.FirstPersonControls: handleResize() has been removed.' );
+
+	}
+
 }
 
 function onPointerDown( event ) {
@@ -342,7 +326,16 @@ function onPointerDown( event ) {
 
 	}
 
-	if ( this.activeLook ) {
+	this.domElement.setPointerCapture( event.pointerId );
+
+	this._pointerCount ++;
+
+	if ( event.pointerType === 'touch' ) {
+
+		this._moveForward = this._pointerCount === 1;
+		this._moveBackward = this._pointerCount >= 2;
+
+	} else {
 
 		switch ( event.button ) {
 
@@ -353,13 +346,28 @@ function onPointerDown( event ) {
 
 	}
 
+	this._pointerDownX = event.pageX;
+	this._pointerDownY = event.pageY;
+
+	this._pointerX = 0;
+	this._pointerY = 0;
+
 	this.mouseDragOn = true;
 
 }
 
 function onPointerUp( event ) {
 
-	if ( this.activeLook ) {
+	this.domElement.releasePointerCapture( event.pointerId );
+
+	this._pointerCount --;
+
+	if ( event.pointerType === 'touch' ) {
+
+		this._moveForward = this._pointerCount === 1;
+		this._moveBackward = false;
+
+	} else {
 
 		switch ( event.button ) {
 
@@ -370,23 +378,19 @@ function onPointerUp( event ) {
 
 	}
 
-	this.mouseDragOn = false;
+	this._pointerX = 0;
+	this._pointerY = 0;
+
+	if ( this._pointerCount === 0 ) this.mouseDragOn = false;
 
 }
 
 function onPointerMove( event ) {
 
-	if ( this.domElement === document ) {
+	if ( this.mouseDragOn === false ) return;
 
-		this._pointerX = event.pageX - this._viewHalfX;
-		this._pointerY = event.pageY - this._viewHalfY;
-
-	} else {
-
-		this._pointerX = event.pageX - this.domElement.offsetLeft - this._viewHalfX;
-		this._pointerY = event.pageY - this.domElement.offsetTop - this._viewHalfY;
-
-	}
+	this._pointerX = event.pageX - this._pointerDownX;
+	this._pointerY = event.pageY - this._pointerDownY;
 
 }
 

package/examples/jsm/controls/FlyControls.js

@@ -29,7 +29,7 @@ class FlyControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Object3D} object - The object that is managed by the controls.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( object, domElement = null ) {
 
@@ -109,6 +109,8 @@ class FlyControls extends Controls {
 		this.domElement.addEventListener( 'pointercancel', this._onPointerCancel );
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
+
 	}
 
 	disconnect() {
@@ -122,6 +124,8 @@ class FlyControls extends Controls {
 		this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
 		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
+		this.domElement.style.touchAction = ''; // Restore touch scroll
+
 	}
 
 	dispose() {

package/examples/jsm/controls/MapControls.js

@@ -1,7 +1,12 @@
-import { MOUSE, TOUCH } from 'three';
+import { MOUSE, TOUCH, Plane, Raycaster, Vector2, Vector3 } from 'three';
 
 import { OrbitControls } from './OrbitControls.js';
 
+const _plane = new Plane();
+const _raycaster = new Raycaster();
+const _mouse = new Vector2();
+const _panCurrent = new Vector3();
+
 /**
  * This class is intended for transforming a camera over a map from bird's eye perspective.
  * The class shares its implementation with {@link OrbitControls} but uses a specific preset
@@ -55,6 +60,55 @@ class MapControls extends OrbitControls {
 		 */
 		this.touches = { ONE: TOUCH.PAN, TWO: TOUCH.DOLLY_ROTATE };
 
+		this._panWorldStart = new Vector3();
+
+	}
+
+	_handleMouseDownPan( event ) {
+
+		super._handleMouseDownPan( event );
+
+		this._panOffset.set( 0, 0, 0 );
+
+		if ( this.screenSpacePanning === true ) return;
+
+		_plane.setFromNormalAndCoplanarPoint( this.object.up, this.target );
+
+		const element = this.domElement;
+		const rect = element.getBoundingClientRect();
+		_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
+		_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+		_raycaster.setFromCamera( _mouse, this.object );
+		_raycaster.ray.intersectPlane( _plane, this._panWorldStart );
+
+	}
+
+	_handleMouseMovePan( event ) {
+
+		if ( this.screenSpacePanning === true ) {
+
+			super._handleMouseMovePan( event );
+			return;
+
+		}
+
+		const element = this.domElement;
+		const rect = element.getBoundingClientRect();
+		_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
+		_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+		_raycaster.setFromCamera( _mouse, this.object );
+
+		if ( _raycaster.ray.intersectPlane( _plane, _panCurrent ) ) {
+
+			_panCurrent.sub( this._panWorldStart );
+			this._panOffset.copy( _panCurrent ).negate();
+
+			this.update();
+
+		}
+
 	}
 
 }

package/examples/jsm/controls/OrbitControls.js

@@ -91,7 +91,7 @@ class OrbitControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Object3D} object - The object that is managed by the controls.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( object, domElement = null ) {
 
@@ -391,6 +391,8 @@ class OrbitControls extends Controls {
 		 */
 		this.zoom0 = this.object.zoom;
 
+		this._cursorStyle = 'auto';
+
 		// the target DOM element for key events
 		this._domElementKeyEvents = null;
 
@@ -462,6 +464,34 @@ class OrbitControls extends Controls {
 
 	}
 
+	/**
+	 * Defines the visual representation of the cursor.
+	 *
+	 * @type {('auto'|'grab')}
+	 * @default 'auto'
+	 */
+	set cursorStyle( type ) {
+
+		this._cursorStyle = type;
+
+		if ( type === 'grab' ) {
+
+			this.domElement.style.cursor = 'grab';
+
+		} else {
+
+			this.domElement.style.cursor = 'auto';
+
+		}
+
+	}
+
+	get cursorStyle() {
+
+		return this._cursorStyle;
+
+	}
+
 	connect( element ) {
 
 		super.connect( element );
@@ -475,15 +505,15 @@ class OrbitControls extends Controls {
 		const document = this.domElement.getRootNode(); // offscreen canvas compatibility
 		document.addEventListener( 'keydown', this._interceptControlDown, { passive: true, capture: true } );
 
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
 
 	}
 
 	disconnect() {
 
 		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 		this.domElement.removeEventListener( 'pointercancel', this._onPointerUp );
 
 		this.domElement.removeEventListener( 'wheel', this._onMouseWheel );
@@ -494,7 +524,7 @@ class OrbitControls extends Controls {
 		const document = this.domElement.getRootNode(); // offscreen canvas compatibility
 		document.removeEventListener( 'keydown', this._interceptControlDown, { capture: true } );
 
-		this.domElement.style.touchAction = 'auto';
+		this.domElement.style.touchAction = ''; // Restore touch scroll
 
 	}
 
@@ -541,7 +571,7 @@ class OrbitControls extends Controls {
 	 * Adds key event listeners to the given DOM element.
 	 * `window` is a recommended argument for using this method.
 	 *
-	 * @param {HTMLDOMElement} domElement - The DOM element
+	 * @param {HTMLElement} domElement - The DOM element
 	 */
 	listenToKeyEvents( domElement ) {
 
@@ -594,6 +624,67 @@ class OrbitControls extends Controls {
 
 	}
 
+	/**
+	 * Programmatically pan the camera.
+	 *
+	 * @param {number} deltaX - The horizontal pan amount in pixels.
+	 * @param {number} deltaY - The vertical pan amount in pixels.
+	 */
+	pan( deltaX, deltaY ) {
+
+		this._pan( deltaX, deltaY );
+		this.update();
+
+	}
+
+	/**
+	 * Programmatically dolly in (zoom in for perspective camera).
+	 *
+	 * @param {number} dollyScale - The dolly scale factor.
+	 */
+	dollyIn( dollyScale ) {
+
+		this._dollyIn( dollyScale );
+		this.update();
+
+	}
+
+	/**
+	 * Programmatically dolly out (zoom out for perspective camera).
+	 *
+	 * @param {number} dollyScale - The dolly scale factor.
+	 */
+	dollyOut( dollyScale ) {
+
+		this._dollyOut( dollyScale );
+		this.update();
+
+	}
+
+	/**
+	 * Programmatically rotate the camera left (around the vertical axis).
+	 *
+	 * @param {number} angle - The rotation angle in radians.
+	 */
+	rotateLeft( angle ) {
+
+		this._rotateLeft( angle );
+		this.update();
+
+	}
+
+	/**
+	 * Programmatically rotate the camera up (around the horizontal axis).
+	 *
+	 * @param {number} angle - The rotation angle in radians.
+	 */
+	rotateUp( angle ) {
+
+		this._rotateUp( angle );
+		this.update();
+
+	}
+
 	update( deltaTime = null ) {
 
 		const position = this.object.position;
@@ -1458,8 +1549,8 @@ function onPointerDown( event ) {
 
 		this.domElement.setPointerCapture( event.pointerId );
 
-		this.domElement.addEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.addEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerup', this._onPointerUp );
 
 	}
 
@@ -1481,6 +1572,12 @@ function onPointerDown( event ) {
 
 	}
 
+	if ( this._cursorStyle === 'grab' ) {
+
+		this.domElement.style.cursor = 'grabbing';
+
+	}
+
 }
 
 function onPointerMove( event ) {
@@ -1509,13 +1606,19 @@ function onPointerUp( event ) {
 
 			this.domElement.releasePointerCapture( event.pointerId );
 
-			this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-			this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+			this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+			this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 
 			this.dispatchEvent( _endEvent );
 
 			this.state = _STATE.NONE;
 
+			if ( this._cursorStyle === 'grab' ) {
+
+				this.domElement.style.cursor = 'grab';
+
+			}
+
 			break;
 
 		case 1:

package/examples/jsm/controls/PointerLockControls.js

@@ -35,7 +35,7 @@ const _MOUSE_SENSITIVITY = 0.002;
 const _PI_2 = Math.PI / 2;
 
 /**
- * The implementation of this class is based on the [Pointer Lock API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API}.
+ * The implementation of this class is based on the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API).
  * `PointerLockControls` is a perfect choice for first person 3D games.
  *
  * ```js
@@ -64,7 +64,7 @@ class PointerLockControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Camera} camera - The camera that is managed by the controls.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( camera, domElement = null ) {
 
@@ -141,14 +141,6 @@ class PointerLockControls extends Controls {
 
 	}
 
-	getObject() {
-
-		console.warn( 'THREE.PointerLockControls: getObject() has been deprecated. Use controls.object instead.' ); // @deprecated r169
-
-		return this.object;
-
-	}
-
 	/**
 	 * Returns the look direction of the camera.
 	 *

package/examples/jsm/controls/TrackballControls.js

@@ -59,7 +59,7 @@ class TrackballControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Object3D} object - The object that is managed by the controls.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( object, domElement = null ) {
 
@@ -281,7 +281,7 @@ class TrackballControls extends Controls {
 		this.domElement.addEventListener( 'wheel', this._onMouseWheel, { passive: false } );
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
 
 	}
 
@@ -291,13 +291,13 @@ class TrackballControls extends Controls {
 		window.removeEventListener( 'keyup', this._onKeyUp );
 
 		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 		this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
 		this.domElement.removeEventListener( 'wheel', this._onMouseWheel );
 		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
-		this.domElement.style.touchAction = 'auto'; // disable touch scroll
+		this.domElement.style.touchAction = ''; // Restore touch scroll
 
 	}
 
@@ -660,8 +660,8 @@ function onPointerDown( event ) {
 
 		this.domElement.setPointerCapture( event.pointerId );
 
-		this.domElement.addEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.addEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerup', this._onPointerUp );
 
 	}
 
@@ -719,8 +719,8 @@ function onPointerUp( event ) {
 
 		this.domElement.releasePointerCapture( event.pointerId );
 
-		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
-		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
 
 	}
 

package/examples/jsm/controls/TransformControls.js

@@ -80,7 +80,7 @@ class TransformControls extends Controls {
 	 * Constructs a new controls instance.
 	 *
 	 * @param {Camera} camera - The camera of the rendered scene.
-	 * @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
 	 */
 	constructor( camera, domElement = null ) {
 
@@ -251,6 +251,33 @@ class TransformControls extends Controls {
 		 */
 		defineProperty( 'showZ', true );
 
+		/**
+		 * Whether the xy-plane helper should be visible or not.
+		 *
+		 * @name TransformControls#showXY
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXY', true );
+
+		/**
+		 * Whether the yz-plane helper should be visible or not.
+		 *
+		 * @name TransformControls#showYZ
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showYZ', true );
+
+		/**
+		 * Whether the xz-axis helper should be visible or not.
+		 *
+		 * @name TransformControls#showXZ
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXZ', true );
+
 		/**
 		 * The minimum allowed X position during translation.
 		 *
@@ -373,7 +400,7 @@ class TransformControls extends Controls {
 		this.domElement.addEventListener( 'pointermove', this._onPointerHover );
 		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
 
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
+		this.domElement.style.touchAction = 'none'; // Disable touch scroll
 
 	}
 
@@ -384,7 +411,7 @@ class TransformControls extends Controls {
 		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
 		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
 
-		this.domElement.style.touchAction = 'auto';
+		this.domElement.style.touchAction = ''; // Restore touch scroll
 
 	}
 
@@ -1784,6 +1811,11 @@ class TransformControlsGizmo extends Object3D {
 			handle.visible = handle.visible && ( handle.name.indexOf( 'Z' ) === - 1 || this.showZ );
 			handle.visible = handle.visible && ( handle.name.indexOf( 'E' ) === - 1 || ( this.showX && this.showY && this.showZ ) );
 
+			// Hide disabled plane helpers
+			handle.visible = handle.visible && ( handle.name.indexOf( 'XY' ) === - 1 || this.showXY );
+			handle.visible = handle.visible && ( handle.name.indexOf( 'YZ' ) === - 1 || this.showYZ );
+			handle.visible = handle.visible && ( handle.name.indexOf( 'XZ' ) === - 1 || this.showXZ );
+
 			// highlight selected axis
 
 			handle.material._color = handle.material._color || handle.material.color.clone();

package/examples/jsm/csm/CSM.js

@@ -13,6 +13,7 @@ import { CSMShader } from './CSMShader.js';
 const _cameraToLightMatrix = new Matrix4();
 const _lightSpaceFrustum = new CSMFrustum( { webGL: true } );
 const _center = new Vector3();
+const _origin = new Vector3();
 const _bbox = new Box3();
 const _uniformArray = [];
 const _logArray = [];
@@ -367,7 +368,7 @@ export class CSM {
 
 		// for each frustum we need to find its min-max box aligned with the light orientation
 		// the position in _lightOrientationMatrix does not matter, as we transform there and back
-		_lightOrientationMatrix.lookAt( new Vector3(), this.lightDirection, _up );
+		_lightOrientationMatrix.lookAt( _origin, this.lightDirection, _up );
 		_lightOrientationMatrixInverse.copy( _lightOrientationMatrix ).invert();
 
 		for ( let i = 0; i < frustums.length; i ++ ) {