super-three 0.181.0 → 0.184.0

package/examples/jsm/inspector/ui/Tab.js

@@ -1,6 +1,35 @@
-export class Tab {
+import { EventDispatcher } from 'three';
 
-	constructor( title ) {
+/**
+ * Tab class
+ * @param {string} title - The title of the tab
+ * @param {Object} options - Options for the tab
+ * @param {boolean} [options.allowDetach=true] - Whether the tab can be detached into a separate window
+ * @param {boolean} [options.builtin=false] - Whether the tab should appear in the profiler-toggle button
+ * @param {string} [options.icon] - SVG icon HTML for the builtin button
+ *
+ * @example
+ * // Create a tab that can be detached (default behavior)
+ * const tab1 = new Tab('My Tab');
+ *
+ * // Create a tab that cannot be detached
+ * const tab2 = new Tab('Fixed Tab', { allowDetach: false });
+ *
+ * // Create a builtin tab that appears in the profiler-toggle
+ * const tab3 = new Tab('Builtin Tab', { builtin: true });
+ *
+ * // Create a builtin tab with custom icon
+ * const tab4 = new Tab('Settings', { builtin: true, icon: '<svg>...</svg>' });
+ *
+ * // Control builtin tab visibility
+ * tab3.showBuiltin(); // Show the builtin button and mini-content
+ * tab3.hideBuiltin(); // Hide the builtin button and mini-content
+ */
+export class Tab extends EventDispatcher {
+
+	constructor( title, options = {} ) {
+
+		super();
 
 		this.id = title.toLowerCase();
 		this.button = document.createElement( 'button' );
@@ -11,11 +40,46 @@ export class Tab {
 		this.content.id = `${this.id}-content`;
 		this.content.className = 'profiler-content';
 
-		this.isActive = false;
+		this._isActive = false;
 		this.isVisible = true;
+		this.isDetached = false;
+		this.detachedWindow = null;
+		this.allowDetach = options.allowDetach !== undefined ? options.allowDetach : true;
+		this.builtin = options.builtin !== undefined ? options.builtin : false;
+		this.icon = options.icon || null;
+		this.builtinButton = null; // Reference to the builtin button in profiler-toggle
+		this.miniContent = null; // Reference to the mini-panel content container
+		this.profiler = null; // Reference to the profiler instance
+		this.onVisibilityChange = null; // Callback for visibility changes
+
+	}
+
+	get inspector() {
+
+		return this.profiler.inspector;
+
+	}
+
+	get isActive() {
+
+		const isProfilerVisible = this.profiler && this.profiler.panel.classList.contains( 'visible' );
+
+		if ( ! isProfilerVisible ) return false;
+
+		return this.isDetached || this._isActive;
+
+	}
+
+	set isActive( value ) {
+
+		this._isActive = value;
 
 	}
 
+	init( /*inspector*/ ) { }
+
+	update( /*inspector*/ ) { }
+
 	setActive( isActive ) {
 
 		this.button.classList.toggle( 'active', isActive );
@@ -32,6 +96,22 @@ export class Tab {
 
 		this.isVisible = true;
 
+		// Show detached window if tab is detached
+		if ( this.isDetached && this.detachedWindow ) {
+
+			this.detachedWindow.panel.style.display = '';
+
+		}
+
+		// Notify profiler of visibility change
+		if ( this.onVisibilityChange ) {
+
+			this.onVisibilityChange();
+
+		}
+
+		this.showBuiltin();
+
 	}
 
 	hide() {
@@ -41,6 +121,145 @@ export class Tab {
 
 		this.isVisible = false;
 
+		// Hide detached window if tab is detached
+		if ( this.isDetached && this.detachedWindow ) {
+
+			this.detachedWindow.panel.style.display = 'none';
+
+		}
+
+		// Notify profiler of visibility change
+		if ( this.onVisibilityChange ) {
+
+			this.onVisibilityChange();
+
+		}
+
+		this.hideBuiltin();
+
+	}
+
+	showBuiltin() {
+
+		if ( ! this.builtin ) return;
+
+		// Show the builtin-tabs-container
+		if ( this.profiler && this.profiler.builtinTabsContainer ) {
+
+			this.profiler.builtinTabsContainer.style.display = '';
+
+		}
+
+		// Show the button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.style.display = '';
+
+		}
+
+		// Show and activate the mini-panel with content
+		if ( this.miniContent && this.profiler ) {
+
+			// Hide all other mini-panel contents
+			this.profiler.miniPanel.querySelectorAll( '.mini-panel-content' ).forEach( content => {
+
+				content.style.display = 'none';
+
+			} );
+
+			// Remove active state from all builtin buttons
+			this.profiler.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ).forEach( btn => {
+
+				btn.classList.remove( 'active' );
+
+			} );
+
+			// Activate this tab's button
+			if ( this.builtinButton ) {
+
+				this.builtinButton.classList.add( 'active' );
+
+			}
+
+			// Move content to mini-panel if not already there
+			if ( ! this.miniContent.firstChild ) {
+
+				while ( this.content.firstChild ) {
+
+					this.miniContent.appendChild( this.content.firstChild );
+
+				}
+
+			}
+
+			// Show the mini-panel and content
+			this.miniContent.style.display = 'block';
+			this.profiler.miniPanel.classList.add( 'visible' );
+
+		}
+
+	}
+
+	hideBuiltin() {
+
+		if ( ! this.builtin ) return;
+
+		// Hide the button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.style.display = 'none';
+
+		}
+
+		// Hide the mini-panel content
+		if ( this.miniContent ) {
+
+			this.miniContent.style.display = 'none';
+
+			// Move content back to main panel
+			if ( this.miniContent.firstChild ) {
+
+				while ( this.miniContent.firstChild ) {
+
+					this.content.appendChild( this.miniContent.firstChild );
+
+				}
+
+			}
+
+		}
+
+		// Deactivate button
+		if ( this.builtinButton ) {
+
+			this.builtinButton.classList.remove( 'active' );
+
+		}
+
+		// Hide mini-panel if no content is visible
+		if ( this.profiler ) {
+
+			const hasVisibleContent = Array.from( this.profiler.miniPanel.querySelectorAll( '.mini-panel-content' ) )
+				.some( content => content.style.display !== 'none' );
+
+			if ( ! hasVisibleContent ) {
+
+				this.profiler.miniPanel.classList.remove( 'visible' );
+
+			}
+
+			// Hide the builtin-tabs-container if all builtin buttons are hidden
+			const hasVisibleBuiltinButtons = Array.from( this.profiler.builtinTabsContainer.querySelectorAll( '.builtin-tab-btn' ) )
+				.some( btn => btn.style.display !== 'none' );
+
+			if ( ! hasVisibleBuiltinButtons ) {
+
+				this.profiler.builtinTabsContainer.style.display = 'none';
+
+			}
+
+		}
+
 	}
 
 }

package/examples/jsm/inspector/ui/Values.js

@@ -157,6 +157,14 @@ class ValueNumber extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.input.value = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return parseFloat( this.input.value );
@@ -194,6 +202,14 @@ class ValueCheckbox extends Value {
 
 	}
 
+	setValue( val ) {
+
+		this.checkbox.checked = val;
+
+		return super.setValue( val );
+
+	}
+
 	getValue() {
 
 		return this.checkbox.checked;
@@ -216,7 +232,7 @@ class ValueSlider extends Value {
 
 		const numberValue = new ValueNumber( { value, min, max, step } );
 		this.numberInput = numberValue.input;
-		this.numberInput.style.width = '60px';
+		this.numberInput.style.flexBasis = '80px';
 		this.numberInput.style.flexShrink = '0';
 
 		this.slider.value = value;
@@ -420,4 +436,41 @@ class ValueButton extends Value {
 
 }
 
-export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor, ValueButton };
+class ValueString extends Value {
+
+	constructor( { value = '' } ) {
+
+		super();
+
+		const input = document.createElement( 'input' );
+		input.type = 'text';
+		input.value = value;
+		this.input = input;
+
+		input.addEventListener( 'input', () => {
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( input );
+
+	}
+
+	setValue( val ) {
+
+		this.input.value = val;
+
+		return super.setValue( val );
+
+	}
+
+	getValue() {
+
+		return this.input.value;
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueString, ValueCheckbox, ValueSlider, ValueSelect, ValueColor, ValueButton };

package/examples/jsm/inspector/ui/utils.js

@@ -54,3 +54,16 @@ export function splitCamelCase( str ) {
 	return str.replace( /([a-z0-9])([A-Z])/g, '$1 $2' ).trim();
 
 }
+
+export function formatBytes( bytes, decimals = 2 ) {
+
+	if ( bytes === 0 ) return '0 Bytes';
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = [ 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ];
+	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+
+	return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
+
+}

package/examples/jsm/interaction/InteractionManager.js

@@ -0,0 +1,226 @@
+import {
+	Matrix4,
+	Vector3
+} from 'three';
+
+const _pixelToLocal = new Matrix4();
+const _mvp = new Matrix4();
+const _viewport = new Matrix4();
+const _size = new Vector3();
+
+/**
+ * Manages interaction for 3D objects independently of the scene graph.
+ *
+ * For objects with an {@link HTMLTexture}, the manager computes CSS `matrix3d`
+ * transforms each frame so the underlying HTML elements stay aligned with
+ * their meshes. Because the elements are children of the canvas, the browser
+ * dispatches pointer events to them natively.
+ *
+ * ```js
+ * const interactions = new InteractionManager();
+ * interactions.connect( renderer, camera );
+ *
+ * // Objects live anywhere in the scene graph
+ * scene.add( mesh );
+ *
+ * // Register for interaction separately
+ * interactions.add( mesh );
+ *
+ * // In the animation loop
+ * interactions.update();
+ * ```
+ * @three_import import { InteractionManager } from 'three/addons/interaction/InteractionManager.js';
+ */
+class InteractionManager {
+
+	constructor() {
+
+		/**
+		 * The registered interactive objects.
+		 *
+		 * @type {Array<Object3D>}
+		 */
+		this.objects = [];
+
+		/**
+		 * The canvas element.
+		 *
+		 * @type {?HTMLCanvasElement}
+		 * @default null
+		 */
+		this.element = null;
+
+		/**
+		 * The camera used for computing the element transforms.
+		 *
+		 * @type {?Camera}
+		 * @default null
+		 */
+		this.camera = null;
+
+		this._cachedCssW = - 1;
+		this._cachedCssH = - 1;
+
+	}
+
+	/**
+	 * Adds one or more objects to the manager.
+	 *
+	 * @param {...Object3D} objects - The objects to add.
+	 * @return {this}
+	 */
+	add( ...objects ) {
+
+		for ( const object of objects ) {
+
+			if ( this.objects.indexOf( object ) === - 1 ) {
+
+				this.objects.push( object );
+
+			}
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Removes one or more objects from the manager.
+	 *
+	 * @param {...Object3D} objects - The objects to remove.
+	 * @return {this}
+	 */
+	remove( ...objects ) {
+
+		for ( const object of objects ) {
+
+			const index = this.objects.indexOf( object );
+
+			if ( index !== - 1 ) {
+
+				this.objects.splice( index, 1 );
+
+			}
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Stores the renderer and camera needed for computing element transforms.
+	 *
+	 * @param {(WebGPURenderer|WebGLRenderer)} renderer - The renderer.
+	 * @param {Camera} camera - The camera.
+	 */
+	connect( renderer, camera ) {
+
+		this.camera = camera;
+		this.element = renderer.domElement;
+
+	}
+
+	/**
+	 * Updates the element transforms for all registered objects.
+	 * Call this once per frame in the animation loop.
+	 */
+	update() {
+
+		const canvas = this.element;
+		const camera = this.camera;
+
+		if ( canvas === null || camera === null ) return;
+
+		// Viewport: NDC (-1,1) to canvas CSS pixels, Y flipped.
+		// Using CSS pixels (clientWidth/clientHeight) so the resulting matrix
+		// can be applied directly as a CSS transform without DPR conversion.
+
+		const cssW = canvas.clientWidth;
+		const cssH = canvas.clientHeight;
+
+		if ( cssW !== this._cachedCssW || cssH !== this._cachedCssH ) {
+
+			_viewport.set(
+				cssW / 2, 0, 0, cssW / 2,
+				0, - cssH / 2, 0, cssH / 2,
+				0, 0, 1, 0,
+				0, 0, 0, 1
+			);
+
+			this._cachedCssW = cssW;
+			this._cachedCssH = cssH;
+
+		}
+
+		for ( const object of this.objects ) {
+
+			const texture = object.material.map;
+
+			if ( ! texture || ! texture.isHTMLTexture ) continue;
+
+			const element = texture.image;
+
+			if ( ! element ) continue;
+
+			// Position at canvas origin so the CSS matrix3d maps correctly.
+			element.style.position = 'absolute';
+			element.style.left = '0';
+			element.style.top = '0';
+			element.style.transformOrigin = '0 0';
+
+			const elemW = element.offsetWidth;
+			const elemH = element.offsetHeight;
+
+			// Get mesh dimensions from geometry bounding box
+
+			const geometry = object.geometry;
+
+			if ( ! geometry.boundingBox ) geometry.computeBoundingBox();
+
+			geometry.boundingBox.getSize( _size );
+
+			// Map element pixel coords (0,0)-(elemW,elemH) to mesh local coords.
+			// Front face: top-left at (-sizeX/2, sizeY/2, maxZ), bottom-right at (sizeX/2, -sizeY/2, maxZ).
+
+			_pixelToLocal.set(
+				_size.x / elemW, 0, 0, - _size.x / 2,
+				0, - _size.y / elemH, 0, _size.y / 2,
+				0, 0, 1, geometry.boundingBox.max.z,
+				0, 0, 0, 1
+			);
+
+			// Model-View-Projection
+
+			_mvp.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
+			_mvp.multiply( object.matrixWorld );
+			_mvp.multiply( _pixelToLocal );
+
+			// Apply viewport
+
+			_mvp.premultiply( _viewport );
+
+			// The browser performs the perspective divide (by w) when applying the matrix3d.
+
+			element.style.transform = 'matrix3d(' + _mvp.elements.join( ',' ) + ')';
+
+		}
+
+	}
+
+	/**
+	 * Disconnects this manager, clearing the renderer and camera references.
+	 */
+	disconnect() {
+
+		this.camera = null;
+		this.element = null;
+		this._cachedCssW = - 1;
+		this._cachedCssH = - 1;
+
+	}
+
+}
+
+export { InteractionManager };