super-three 0.181.0 → 0.185.0

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

@@ -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
 
 	}
 
@@ -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/TrackballControls.js

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

@@ -214,6 +214,17 @@ class TransformControls extends Controls {
 		 */
 		defineProperty( 'size', 1 );
 
+		/**
+		 * The viewport rectangle, in logical (CSS) pixels with the origin at the lower-left
+		 * of the canvas. Set this when the renderer uses a sub-canvas viewport so pointer
+		 * coordinates map to the correct region. If `null`, the full canvas is used.
+		 *
+		 * @name TransformControls#viewport
+		 * @type {?Vector4}
+		 * @default null
+		 */
+		this.viewport = null;
+
 		/**
 		 * Whether dragging is currently performed or not.
 		 *
@@ -251,6 +262,51 @@ 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 );
+
+		/**
+		 * Whether the xyze rotation helper should be visible or not.
+		 *
+		 * @name TransformControls#showXYZE
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXYZE', true );
+
+		/**
+		 * Whether the e rotation helper should be visible or not.
+		 *
+		 * @name TransformControls#showE
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showE', true );
+
 		/**
 		 * The minimum allowed X position during translation.
 		 *
@@ -373,7 +429,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 +440,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
 
 	}
 
@@ -540,35 +596,27 @@ class TransformControls extends Controls {
 
 				if ( space === 'world' ) {
 
-					if ( object.parent ) {
-
-						object.position.add( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
-
-					}
+					object.getWorldPosition( _tempVector );
 
 					if ( axis.search( 'X' ) !== - 1 ) {
 
-						object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap;
+						_tempVector.x = Math.round( _tempVector.x / this.translationSnap ) * this.translationSnap;
 
 					}
 
 					if ( axis.search( 'Y' ) !== - 1 ) {
 
-						object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap;
+						_tempVector.y = Math.round( _tempVector.y / this.translationSnap ) * this.translationSnap;
 
 					}
 
 					if ( axis.search( 'Z' ) !== - 1 ) {
 
-						object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap;
+						_tempVector.z = Math.round( _tempVector.z / this.translationSnap ) * this.translationSnap;
 
 					}
 
-					if ( object.parent ) {
-
-						object.position.sub( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
-
-					}
+					object.position.copy( object.parent.worldToLocal( _tempVector ) );
 
 				}
 
@@ -939,10 +987,29 @@ function getPointer( event ) {
 	} else {
 
 		const rect = this.domElement.getBoundingClientRect();
+		const viewport = this.viewport;
+
+		let originX, originY, regionWidth, regionHeight;
+
+		if ( viewport !== null ) {
+
+			originX = viewport.x;
+			originY = rect.height - viewport.y - viewport.w;
+			regionWidth = viewport.z;
+			regionHeight = viewport.w;
+
+		} else {
+
+			originX = 0;
+			originY = 0;
+			regionWidth = rect.width;
+			regionHeight = rect.height;
+
+		}
 
 		return {
-			x: ( event.clientX - rect.left ) / rect.width * 2 - 1,
-			y: - ( event.clientY - rect.top ) / rect.height * 2 + 1,
+			x: ( event.clientX - rect.left - originX ) / regionWidth * 2 - 1,
+			y: - ( event.clientY - rect.top - originY ) / regionHeight * 2 + 1,
 			button: event.button
 		};
 
@@ -1093,6 +1160,15 @@ class TransformControlsRoot extends Object3D {
 
 		}
 
+		// Cancel out the parent's transform so the gizmo stays world-aligned.
+
+		if ( this.parent ) {
+
+			_tempMatrix.copy( this.parent.matrixWorld ).invert();
+			_tempMatrix.decompose( this.position, this.quaternion, this.scale );
+
+		}
+
 		super.updateMatrixWorld( force );
 
 	}
@@ -1784,6 +1860,15 @@ 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 );
+
+			// Hide disabled rotation helpers
+			handle.visible = handle.visible && ( handle.name !== 'E' || this.showE );
+			handle.visible = handle.visible && ( handle.name !== 'XYZE' || this.showXYZE );
+
 			// 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 ++ ) {

package/examples/jsm/csm/CSMFrustum.js

@@ -27,6 +27,13 @@ class CSMFrustum {
 		 */
 		this.zNear = data.webGL === true ? - 1 : 0;
 
+		/**
+		 * The zFar value.
+		 *
+		 * @type {number}
+		 */
+		this.zFar = 1;
+
 		/**
 		 * An object representing the vertices of the near and
 		 * far plane in view space.
@@ -54,6 +61,15 @@ class CSMFrustum {
 
 		}
 
+		// In case of reversed depth buffer, zNear and zFar must be 1 and 0
+		// respectively regardless of the coordinate system.
+		if ( data.reversedDepth === true ) {
+
+			this.zNear = 1;
+			this.zFar = 0;
+
+		}
+
 	}
 
 	/**
@@ -66,6 +82,7 @@ class CSMFrustum {
 	setFromProjectionMatrix( projectionMatrix, maxFar ) {
 
 		const zNear = this.zNear;
+		const zFar = this.zFar;
 		const isOrthographic = projectionMatrix.elements[ 2 * 4 + 3 ] === 0;
 
 		inverseProjectionMatrix.copy( projectionMatrix ).invert();
@@ -85,10 +102,10 @@ class CSMFrustum {
 
 		} );
 
-		this.vertices.far[ 0 ].set( 1, 1, 1 );
-		this.vertices.far[ 1 ].set( 1, - 1, 1 );
-		this.vertices.far[ 2 ].set( - 1, - 1, 1 );
-		this.vertices.far[ 3 ].set( - 1, 1, 1 );
+		this.vertices.far[ 0 ].set( 1, 1, zFar );
+		this.vertices.far[ 1 ].set( 1, - 1, zFar );
+		this.vertices.far[ 2 ].set( - 1, - 1, zFar );
+		this.vertices.far[ 3 ].set( - 1, 1, zFar );
 		this.vertices.far.forEach( function ( v ) {
 
 			v.applyMatrix4( inverseProjectionMatrix );
@@ -128,6 +145,9 @@ class CSMFrustum {
 
 		target.length = breaks.length;
 
+		const near = this.vertices.near[ 0 ].z;
+		const far = this.vertices.far[ 0 ].z;
+
 		for ( let i = 0; i < breaks.length; i ++ ) {
 
 			const cascade = target[ i ];
@@ -142,9 +162,11 @@ class CSMFrustum {
 
 			} else {
 
+				const alpha = ( breaks[ i - 1 ] * far - near ) / ( far - near );
+
 				for ( let j = 0; j < 4; j ++ ) {
 
-					cascade.vertices.near[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i - 1 ] );
+					cascade.vertices.near[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], alpha );
 
 				}
 
@@ -160,9 +182,11 @@ class CSMFrustum {
 
 			} else {
 
+				const alpha = ( breaks[ i ] * far - near ) / ( far - near );
+
 				for ( let j = 0; j < 4; j ++ ) {
 
-					cascade.vertices.far[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i ] );
+					cascade.vertices.far[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], alpha );
 
 				}
 
@@ -202,6 +226,7 @@ class CSMFrustum {
  *
  * @typedef {Object} CSMFrustum~Data
  * @property {boolean} [webGL] - Whether this CSM frustum is used with WebGL or WebGPU.
+ * @property {boolean} [reversedDepth] - Whether reversed depth buffer is enabled.
  * @property {Matrix4} [projectionMatrix] - A projection matrix usually of the scene's camera.
  * @property {number} [maxFar] - The maximum far value.
  **/

package/examples/jsm/csm/CSMShadowNode.js

@@ -159,7 +159,10 @@ class CSMShadowNode extends ShadowBaseNode {
 
 		this.camera = camera;
 
-		const data = { webGL: renderer.coordinateSystem === WebGLCoordinateSystem };
+		const data = {
+			webGL: renderer.coordinateSystem === WebGLCoordinateSystem,
+			reversedDepth: renderer.reversedDepthBuffer
+		};
 		this.mainFrustum = new CSMFrustum( data );
 
 		const light = this.light;
@@ -574,8 +577,12 @@ class CSMShadowNode extends ShadowBaseNode {
 			const light = this.lights[ i ];
 			const parent = light.parent;
 
-			parent.remove( light.target );
-			parent.remove( light );
+			if ( parent !== null ) {
+
+				parent.remove( light.target );
+				parent.remove( light );
+
+			}
 
 		}