@plastic-software/three 0.181.2 → 0.182.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

@@ -482,8 +482,8 @@ class OrbitControls extends Controls {
 	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 );
@@ -1458,8 +1458,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 );
 
 	}
 
@@ -1509,8 +1509,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 );
 
 			this.dispatchEvent( _endEvent );
 

package/examples/jsm/controls/TrackballControls.js

@@ -291,8 +291,8 @@ 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 );
@@ -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/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/environments/RoomEnvironment.js

@@ -36,6 +36,8 @@ class RoomEnvironment extends Scene {
 
 		super();
 
+		this.name = 'RoomEnvironment';
+
 		const geometry = new BoxGeometry();
 		geometry.deleteAttribute( 'uv' );
 

package/examples/jsm/geometries/DecalGeometry.js

@@ -35,7 +35,7 @@ class DecalGeometry extends BufferGeometry {
 	 * @param {Mesh} [mesh] - The base mesh the decal should be projected on.
 	 * @param {Vector3} [position] - The position of the decal projector.
 	 * @param {Euler} [orientation] - The orientation of the decal projector.
-	 * @param {Vector3} [size] - Tje scale of the decal projector.
+	 * @param {Vector3} [size] - The scale of the decal projector.
 	 */
 	constructor( mesh = new Mesh(), position = new Vector3(), orientation = new Euler(), size = new Vector3( 1, 1, 1 ) ) {
 

package/examples/jsm/helpers/LightProbeHelperGPU.js

@@ -2,7 +2,7 @@ import {
 	Mesh,
 	NodeMaterial,
 	SphereGeometry
-} from 'three';
+} from 'three/webgpu';
 import { float, Fn, getShIrradianceAt, normalWorld, uniformArray, uniform, vec4 } from 'three/tsl';
 
 /**

package/examples/jsm/helpers/TextureHelperGPU.js

@@ -6,7 +6,7 @@ import {
 	PlaneGeometry,
 	DoubleSide,
 	Vector3,
-} from 'three';
+} from 'three/webgpu';
 import { texture as textureNode, cubeTexture, texture3D, float, vec4, attribute } from 'three/tsl';
 import { mergeGeometries } from '../utils/BufferGeometryUtils.js';
 

package/examples/jsm/inspector/Inspector.js

@@ -8,7 +8,29 @@ import { Viewer } from './tabs/Viewer.js';
 import { setText, splitPath, splitCamelCase } from './ui/utils.js';
 
 import { QuadMesh, NodeMaterial, CanvasTarget, setConsoleFunction, REVISION, NoToneMapping } from 'three/webgpu';
-import { renderOutput, vec3, vec4 } from 'three/tsl';
+import { renderOutput, vec2, vec3, vec4, Fn, screenUV, step, OnMaterialUpdate, uniform } from 'three/tsl';
+
+const aspectRatioUV = /*@__PURE__*/ Fn( ( [ uv, textureNode ] ) => {
+
+	const aspect = uniform( 0 );
+
+	OnMaterialUpdate( () => {
+
+		const { width, height } = textureNode.value;
+
+		aspect.value = width / height;
+
+	} );
+
+	const centered = uv.sub( 0.5 );
+	const corrected = vec2( centered.x.div( aspect ), centered.y );
+	const finalUV = corrected.add( 0.5 );
+
+	const inBounds = step( 0.0, finalUV.x ).mul( step( finalUV.x, 1.0 ) ).mul( step( 0.0, finalUV.y ) ).mul( step( finalUV.y, 1.0 ) );
+
+	return vec3( finalUV, inBounds );
+
+} );
 
 class Inspector extends RendererInspector {
 
@@ -20,7 +42,10 @@ class Inspector extends RendererInspector {
 
 		const profiler = new Profiler();
 
-		const parameters = new Parameters();
+		const parameters = new Parameters( {
+			builtin: true,
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 6l8 0" /><path d="M16 6l4 0" /><path d="M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 12l2 0" /><path d="M10 12l10 0" /><path d="M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 18l11 0" /><path d="M19 18l1 0" /></svg>'
+		} );
 		parameters.hide();
 		profiler.addTab( parameters );
 
@@ -31,18 +56,22 @@ class Inspector extends RendererInspector {
 		const performance = new Performance();
 		profiler.addTab( performance );
 
-		const console = new Console();
-		profiler.addTab( console );
+		const consoleTab = new Console();
+		profiler.addTab( consoleTab );
 
-		profiler.setActiveTab( performance.id );
+		profiler.loadLayout();
 
-		//
+		if ( ! profiler.activeTabId ) {
+
+			profiler.setActiveTab( performance.id );
+
+		}
 
 		this.statsData = new Map();
 		this.canvasNodes = new Map();
 		this.profiler = profiler;
 		this.performance = performance;
-		this.console = console;
+		this.console = consoleTab;
 		this.parameters = parameters;
 		this.viewer = viewer;
 		this.once = {};
@@ -178,7 +207,12 @@ class Inspector extends RendererInspector {
 		if ( this.parameters.isVisible === false ) {
 
 			this.parameters.show();
-			this.profiler.setActiveTab( this.parameters.id );
+
+			if ( this.parameters.isDetached === false ) {
+
+				this.profiler.setActiveTab( this.parameters.id );
+
+			}
 
 		}
 
@@ -266,7 +300,17 @@ class Inspector extends RendererInspector {
 
 			const { path, name } = splitPath( splitCamelCase( node.getName() || '(unnamed)' ) );
 
-			let output = vec4( vec3( node ), 1 );
+			const target = node.context( { getUV: ( textureNode ) => {
+
+				const uvData = aspectRatioUV( screenUV, textureNode );
+				const correctedUV = uvData.xy;
+				const mask = uvData.z;
+
+				return correctedUV.mul( mask );
+
+			} } );
+
+			let output = vec4( vec3( target ), 1 );
 			output = renderOutput( output, NoToneMapping, renderer.outputColorSpace );
 			output = output.context( { inspector: true } );
 

package/examples/jsm/inspector/RendererInspector.js

@@ -1,5 +1,5 @@
 
-import { InspectorBase, TimestampQuery } from 'three/webgpu';
+import { InspectorBase, TimestampQuery, warnOnce } from 'three/webgpu';
 
 class ObjectStats {
 
@@ -330,7 +330,17 @@ export class RendererInspector extends InspectorBase {
 
 	inspect( node ) {
 
-		this.currentNodes.push( node );
+		const currentNodes = this.currentNodes;
+
+		if ( currentNodes !== null ) {
+
+			currentNodes.push( node );
+
+		} else {
+
+			warnOnce( 'RendererInspector: Unable to inspect node outside of frame scope. Use "renderer.setAnimationLoop()".' );
+
+		}
 
 	}
 

package/examples/jsm/inspector/tabs/Console.js

@@ -2,9 +2,9 @@ import { Tab } from '../ui/Tab.js';
 
 class Console extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Console' );
+		super( 'Console', options );
 
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';

package/examples/jsm/inspector/tabs/Parameters.js

@@ -299,9 +299,9 @@ class ParametersGroup {
 
 class Parameters extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Parameters' );
+		super( 'Parameters', options );
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );

package/examples/jsm/inspector/tabs/Performance.js

@@ -6,9 +6,9 @@ import { createValueSpan, setText } from '../ui/utils.js';
 
 class Performance extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Performance' );
+		super( 'Performance', options );
 
 		const perfList = new List( 'Name', 'CPU', 'GPU', 'Total' );
 		perfList.setGridStyle( 'minmax(200px, 2fr) 80px 80px 80px' );

package/examples/jsm/inspector/tabs/Viewer.js

@@ -6,13 +6,13 @@ import { RendererUtils, NoToneMapping, LinearSRGBColorSpace } from 'three/webgpu
 
 class Viewer extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Viewer' );
+		super( 'Viewer', options );
 
 		const nodeList = new List( 'Viewer', 'Name' );
 		nodeList.setGridStyle( '150px minmax(200px, 2fr)' );
-		nodeList.domElement.style.minWidth = '600px';
+		nodeList.domElement.style.minWidth = '400px';
 
 		const scrollWrapper = document.createElement( 'div' );
 		scrollWrapper.className = 'list-scroll-wrapper';
@@ -70,7 +70,7 @@ class Viewer extends Tab {
 
 	update( renderer, canvasDataList ) {
 
-		if ( ! this.isActive ) return;
+		if ( ! this.isActive && ! this.isDetached ) return;
 
 		//