@plastic-software/three 0.180.0 → 0.181.2

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

@@ -0,0 +1,423 @@
+import { EventDispatcher } from 'three';
+
+class Value extends EventDispatcher {
+
+	constructor() {
+
+		super();
+
+		this.domElement = document.createElement( 'div' );
+		this.domElement.className = 'param-control';
+
+		this._onChangeFunction = null;
+
+		this.addEventListener( 'change', ( e ) => {
+
+			// defer to avoid issues when changing multiple values in the same call stack
+
+			requestAnimationFrame( () => {
+
+				if ( this._onChangeFunction ) this._onChangeFunction( e.value );
+
+			} );
+
+		} );
+
+	}
+
+	setValue( /*val*/ ) {
+
+		this.dispatchChange();
+
+		return this;
+
+	}
+
+	getValue() {
+
+		return null;
+
+	}
+
+	dispatchChange() {
+
+		this.dispatchEvent( { type: 'change', value: this.getValue() } );
+
+	}
+
+	onChange( callback ) {
+
+		this._onChangeFunction = callback;
+
+		return this;
+
+	}
+
+}
+
+class ValueNumber extends Value {
+
+	constructor( { value = 0, step = 0.1, min = - Infinity, max = Infinity } ) {
+
+		super();
+
+		this.input = document.createElement( 'input' );
+		this.input.type = 'number';
+		this.input.value = value;
+		this.input.step = step;
+		this.input.min = min;
+		this.input.max = max;
+		this.input.addEventListener( 'change', this._onChangeValue.bind( this ) );
+		this.domElement.appendChild( this.input );
+		this.addDragHandler();
+
+	}
+
+	_onChangeValue() {
+
+		const value = parseFloat( this.input.value );
+		const min = parseFloat( this.input.min );
+		const max = parseFloat( this.input.max );
+
+		if ( value > max ) {
+
+			this.input.value = max;
+
+		} else if ( value < min ) {
+
+			this.input.value = min;
+
+		} else if ( isNaN( value ) ) {
+
+			this.input.value = min;
+
+		}
+
+		this.dispatchChange();
+
+	}
+
+	addDragHandler() {
+
+		let isDragging = false;
+		let startY, startValue;
+
+		this.input.addEventListener( 'mousedown', ( e ) => {
+
+			isDragging = true;
+			startY = e.clientY;
+			startValue = parseFloat( this.input.value );
+			document.body.style.cursor = 'ns-resize';
+
+		} );
+
+		document.addEventListener( 'mousemove', ( e ) => {
+
+			if ( isDragging ) {
+
+				const deltaY = startY - e.clientY;
+				const step = parseFloat( this.input.step ) || 1;
+				const min = parseFloat( this.input.min );
+				const max = parseFloat( this.input.max );
+
+				let stepSize = step;
+
+				if ( ! isNaN( max ) && isFinite( min ) ) {
+
+					stepSize = ( max - min ) / 100;
+
+				}
+
+				const change = deltaY * stepSize;
+
+				let newValue = startValue + change;
+				newValue = Math.max( min, Math.min( newValue, max ) );
+
+				const precision = ( String( step ).split( '.' )[ 1 ] || [] ).length;
+				this.input.value = newValue.toFixed( precision );
+
+				this.input.dispatchEvent( new Event( 'input' ) );
+
+				this.dispatchChange();
+
+			}
+
+		} );
+
+		document.addEventListener( 'mouseup', () => {
+
+			if ( isDragging ) {
+
+				isDragging = false;
+				document.body.style.cursor = 'default';
+
+			}
+
+		} );
+
+	}
+
+	getValue() {
+
+		return parseFloat( this.input.value );
+
+	}
+
+}
+
+class ValueCheckbox extends Value {
+
+	constructor( { value = false } ) {
+
+		super();
+
+		const label = document.createElement( 'label' );
+		label.className = 'custom-checkbox';
+
+		const checkbox = document.createElement( 'input' );
+		checkbox.type = 'checkbox';
+		checkbox.checked = value;
+		this.checkbox = checkbox;
+
+		const checkmark = document.createElement( 'span' );
+		checkmark.className = 'checkmark';
+
+		label.appendChild( checkbox );
+		label.appendChild( checkmark );
+		this.domElement.appendChild( label );
+
+		checkbox.addEventListener( 'change', () => {
+
+			this.dispatchChange();
+
+		} );
+
+	}
+
+	getValue() {
+
+		return this.checkbox.checked;
+
+	}
+
+}
+
+class ValueSlider extends Value {
+
+	constructor( { value = 0, min = 0, max = 1, step = 0.01 } ) {
+
+		super();
+
+		this.slider = document.createElement( 'input' );
+		this.slider.type = 'range';
+		this.slider.min = min;
+		this.slider.max = max;
+		this.slider.step = step;
+
+		const numberValue = new ValueNumber( { value, min, max, step } );
+		this.numberInput = numberValue.input;
+		this.numberInput.style.width = '60px';
+		this.numberInput.style.flexShrink = '0';
+
+		this.slider.value = value;
+
+		this.domElement.append( this.slider, this.numberInput );
+
+		this.slider.addEventListener( 'input', () => {
+
+			this.numberInput.value = this.slider.value;
+
+			this.dispatchChange();
+
+		} );
+
+		numberValue.addEventListener( 'change', () => {
+
+			this.slider.value = parseFloat( this.numberInput.value );
+
+			this.dispatchChange();
+
+		} );
+
+	}
+
+	setValue( val ) {
+
+		this.slider.value = val;
+		this.numberInput.value = val;
+
+		return super.setValue( val );
+
+	}
+
+	getValue() {
+
+		return parseFloat( this.slider.value );
+
+	}
+
+	step( value ) {
+
+		this.slider.step = value;
+		this.numberInput.step = value;
+
+		return this;
+
+	}
+
+}
+
+class ValueSelect extends Value {
+
+	constructor( { options = [], value = '' } ) {
+
+		super();
+
+		const select = document.createElement( 'select' );
+
+		const createOption = ( name, optionValue ) => {
+
+			const optionEl = document.createElement( 'option' );
+			optionEl.value = name;
+			optionEl.textContent = name;
+
+			if ( optionValue == value ) optionEl.selected = true;
+
+			select.appendChild( optionEl );
+
+			return optionEl;
+
+		};
+
+		if ( Array.isArray( options ) ) {
+
+			options.forEach( opt => createOption( opt, opt ) );
+
+		} else {
+
+			Object.entries( options ).forEach( ( [ key, value ] ) => createOption( key, value ) );
+
+		}
+
+		this.domElement.appendChild( select );
+
+		//
+
+		select.addEventListener( 'change', () => {
+
+			this.dispatchChange();
+
+		} );
+
+		this.options = options;
+		this.select = select;
+
+	}
+
+	getValue() {
+
+		const options = this.options;
+
+		if ( Array.isArray( options ) ) {
+
+			return options[ this.select.selectedIndex ];
+
+		} else {
+
+			return options[ this.select.value ];
+
+		}
+
+	}
+
+}
+
+class ValueColor extends Value {
+
+	constructor( { value = '#ffffff' } ) {
+
+		super();
+
+		const colorInput = document.createElement( 'input' );
+		colorInput.type = 'color';
+		colorInput.value = this._getColorHex( value );
+		this.colorInput = colorInput;
+
+		this._value = value;
+
+		colorInput.addEventListener( 'input', () => {
+
+			const colorValue = colorInput.value;
+
+			if ( this._value.isColor ) {
+
+				this._value.setHex( parseInt( colorValue.slice( 1 ), 16 ) );
+
+			} else {
+
+				this._value = colorValue;
+
+			}
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( colorInput );
+
+	}
+
+	_getColorHex( color ) {
+
+		if ( color.isColor ) {
+
+			color = color.getHex();
+
+		}
+
+		if ( typeof color === 'number' ) {
+
+			color = `#${ color.toString( 16 ) }`;
+
+		} else if ( color[ 0 ] !== '#' ) {
+
+			color = '#' + color;
+
+		}
+
+		return color;
+
+	}
+
+	getValue() {
+
+		let value = this._value;
+
+		if ( typeof value === 'string' ) {
+
+			value = parseInt( value.slice( 1 ), 16 );
+
+		}
+
+		return value;
+
+	}
+
+}
+
+class ValueButton extends Value {
+
+	constructor( { text = 'Button', value = () => {} } ) {
+
+		super();
+
+		const button = document.createElement( 'button' );
+		button.textContent = text;
+		button.onclick = value;
+		this.domElement.appendChild( button );
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor, ValueButton };

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

@@ -0,0 +1,56 @@
+export function createValueSpan( id = null ) {
+
+	const span = document.createElement( 'span' );
+	span.className = 'value';
+
+	if ( id !== null ) span.id = id;
+
+	return span;
+
+}
+
+export function setText( element, text ) {
+
+	const el = element instanceof HTMLElement ? element : document.getElementById( element );
+
+	if ( el && el.textContent !== text ) {
+
+		el.textContent = text;
+
+	}
+
+}
+
+export function getText( element ) {
+
+	const el = element instanceof HTMLElement ? element : document.getElementById( element );
+
+	return el ? el.textContent : null;
+
+}
+
+export function splitPath( fullPath ) {
+
+	const lastSlash = fullPath.lastIndexOf( '/' );
+
+	if ( lastSlash === - 1 ) {
+
+		return {
+			path: '',
+			name: fullPath.trim()
+		};
+
+	}
+
+	const path = fullPath.substring( 0, lastSlash ).trim();
+	const name = fullPath.substring( lastSlash + 1 ).trim();
+
+	return { path, name };
+
+}
+
+export function splitCamelCase( str ) {
+
+	return str.replace( /([a-z0-9])([A-Z])/g, '$1 $2' ).trim();
+
+}

package/examples/jsm/interactive/HTMLMesh.js

@@ -295,17 +295,12 @@ function html2canvas( element ) {
 		} else if ( element instanceof HTMLCanvasElement ) {
 
 			// Canvas element
-
 			const rect = element.getBoundingClientRect();
-
 			x = rect.left - offset.left - 0.5;
 			y = rect.top - offset.top - 0.5;
-
-		        context.save();
-			const dpr = window.devicePixelRatio;
-			context.scale( 1 / dpr, 1 / dpr );
-			context.drawImage( element, x, y );
-			context.restore();
+			const width = rect.width;
+			const height = rect.height;
+			context.drawImage( element, x, y, width, height );
 
 		} else if ( element instanceof HTMLImageElement ) {
 
@@ -521,12 +516,13 @@ function html2canvas( element ) {
 	if ( canvas === undefined ) {
 
 		canvas = document.createElement( 'canvas' );
-		canvas.width = offset.width;
-		canvas.height = offset.height;
 		canvases.set( element, canvas );
 
 	}
 
+	canvas.width = offset.width;
+	canvas.height = offset.height;
+
 	const context = canvas.getContext( '2d'/*, { alpha: false }*/ );
 
 	const clipper = new Clipper( context );

package/examples/jsm/interactive/InteractiveGroup.js

@@ -52,7 +52,7 @@ class InteractiveGroup extends Group {
 		/**
 		 * The internal raycaster.
 		 *
-		 * @type {?HTMLDOMElement}
+		 * @type {?HTMLElement}
 		 * @default null
 		 */
 		this.element = null;

package/examples/jsm/interactive/SelectionBox.js

@@ -92,6 +92,12 @@ class SelectionBox {
 		 * @type {Object}
 		 */
 		this.instances = {};
+		/**
+		 * The selected batches of batched meshes.
+		 *
+		 * @type {Object}
+		 */
+		this.batches = {};
 
 		/**
 		 * How deep the selection frustum of perspective cameras should extend.
@@ -259,6 +265,30 @@ class SelectionBox {
 
 				}
 
+			} else if ( object.isBatchedMesh ) {
+
+				this.batches[ object.uuid ] = [];
+
+				for ( let instanceId = 0, count = 0; count < object.instanceCount; instanceId ++ ) {
+
+					// skip invalid instances in the batchedMesh
+
+					if ( object.validateInstanceId( instanceId ) === false ) continue;
+
+					count ++;
+
+					object.getMatrixAt( instanceId, _matrix );
+					_matrix.decompose( _center, _quaternion, _scale );
+					_center.applyMatrix4( object.matrixWorld );
+
+					if ( frustum.containsPoint( _center ) ) {
+
+						this.batches[ object.uuid ].push( instanceId );
+
+					}
+
+				}
+
 			} else {
 
 				if ( object.geometry.boundingSphere === null ) object.geometry.computeBoundingSphere();

package/examples/jsm/lights/RectAreaLightTexturesLib.js

@@ -15,7 +15,7 @@ import {
  * in data textures for further use in the renderer.
  *
  * Reference: Real-Time Polygonal-Light Shading with Linearly Transformed Cosines
- * by Eric Heitz, Jonathan Dupuy, Stephen Hill and David Neubelt. [Code]{@link https://github.com/selfshadow/ltc_code/}.
+ * by Eric Heitz, Jonathan Dupuy, Stephen Hill and David Neubelt. [Code](https://github.com/selfshadow/ltc_code/).
  *
  * NOTE: This is a temporary location for the BRDF approximation texture data
  * based off of Eric Heitz's work (see citation). BRDF data for

package/examples/jsm/loaders/3MFLoader.js

@@ -24,7 +24,7 @@ import * as fflate from '../libs/fflate.module.js';
 const COLOR_SPACE_3MF = SRGBColorSpace;
 
 /**
- * A loader for the [3D Manufacturing Format (3MF)]{@link https://3mf.io/specification/} format.
+ * A loader for the [3D Manufacturing Format (3MF)](https://3mf.io/specification/) format.
  *
  * The following features from the core specification are supported:
  *

package/examples/jsm/loaders/ColladaLoader.js

@@ -45,7 +45,7 @@ import { TGALoader } from '../loaders/TGALoader.js';
  * A loader for the Collada format.
  *
  * The Collada format is very complex so this loader only supports a subset of what
- * is defined in the [official specification]{@link https://www.khronos.org/files/collada_spec_1_5.pdf}.
+ * is defined in the [official specification](https://www.khronos.org/files/collada_spec_1_5.pdf).
  *
  * Assets with a Z-UP coordinate system are transformed it into Y-UP by a simple rotation.
  * The vertex data are not converted.
@@ -112,7 +112,7 @@ class ColladaLoader extends Loader {
 	 * an array of animation clips and kinematics.
 	 *
 	 * @param {string} text - The raw Collada data as a string.
-	 * @param {string} path - The asset path.
+	 * @param {string} [path] - The asset path.
 	 * @return {?{scene:Group,animations:Array<AnimationClip>,kinematics:Object}} An object representing the parsed asset.
 	 */
 	parse( text, path ) {

package/examples/jsm/loaders/DDSLoader.js

@@ -44,7 +44,7 @@ class DDSLoader extends CompressedTextureLoader {
 	 */
 	parse( buffer, loadMipmaps ) {
 
-		const dds = { mipmaps: [], width: 0, height: 0, format: null, mipmapCount: 1 };
+		const dds = { mipmaps: [], width: 0, height: 0, format: null, mipmapCount: 1, isCubemap: false };
 
 		// Adapted from @toji's DDS utils
 		// https://github.com/toji/webgl-texture-utils/blob/master/texture-util/dds.js