@needle-tools/three 0.145.4 → 0.146.2

package/examples/jsm/capabilities/WebGPU.js

@@ -14,7 +14,9 @@ class WebGPU {
 
 	static getErrorMessage() {
 
-		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a>';
+		let message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a>';
+
+		if ( !! window.chrome ) message += '<br>Try: <b>chrome://flags/#enable-unsafe-webgpu</b>';
 
 		const element = document.createElement( 'div' );
 		element.id = 'webgpumessage';

package/examples/jsm/controls/OrbitControls.js

@@ -603,22 +603,62 @@ class OrbitControls extends EventDispatcher {
 			switch ( event.code ) {
 
 				case scope.keys.UP:
-					pan( 0, scope.keyPanSpeed );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, scope.keyPanSpeed );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.BOTTOM:
-					pan( 0, - scope.keyPanSpeed );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, - scope.keyPanSpeed );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.LEFT:
-					pan( scope.keyPanSpeed, 0 );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( scope.keyPanSpeed, 0 );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.RIGHT:
-					pan( - scope.keyPanSpeed, 0 );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( - scope.keyPanSpeed, 0 );
+
+					}
+
 					needsUpdate = true;
 					break;
 

package/examples/jsm/exporters/GLTFExporter.js

@@ -20,16 +20,10 @@ import {
 	Scene,
 	Source,
 	sRGBEncoding,
-	Texture,
 	CompressedTexture,
-	PlaneGeometry,
-	ShaderMaterial,
-	Mesh,
-	PerspectiveCamera,
-	WebGLRenderer,
-	Uniform,
 	Vector3
 } from 'three';
+import { decompress } from './../utils/TextureUtils.js';
 
 class GLTFExporter {
 
@@ -49,12 +43,6 @@ class GLTFExporter {
 
 		} );
 
-		this.register( function ( writer ) {
-
-			return new GLTFMaterialsPBRSpecularGlossiness( writer );
-
-		} );
-
 		this.register( function ( writer ) {
 
 			return new GLTFMaterialsTransmissionExtension( writer );
@@ -551,13 +539,6 @@ class GLTFWriter {
 
 		}
 
-		// Clean up in case we had to create a temporary renderer for blitting compressed textures.
-		if (this.temporaryRenderer) {
-
-			this.temporaryRenderer.dispose();
-
-		}
-
 	}
 
 	/**
@@ -736,49 +717,6 @@ class GLTFWriter {
 
 	}
 
-	buildReadableTexture( map, maxTextureSize ) {
-
-		const fullscreenQuadGeometry = new PlaneGeometry( 2, 2, 1, 1 );
-		const fullscreenQuadMaterial = new ShaderMaterial( {
-			uniforms: { blitTexture: new Uniform( map ) },
-			vertexShader: `
-				varying vec2 vUv;
-				void main(){
-					vUv = uv;
-					gl_Position = vec4(position.xy * 1.0,0.,.999999);
-				}`,
-			fragmentShader: `
-				uniform sampler2D blitTexture; 
-				varying vec2 vUv;
-				void main(){ 
-					gl_FragColor = vec4(vUv.xy, 0, 1);
-					gl_FragColor = texture2D( blitTexture, vUv);
-				}`
-		} );
-
-		const fullscreenQuad = new Mesh( fullscreenQuadGeometry, fullscreenQuadMaterial );
-		fullscreenQuad.frustrumCulled = false;
-
-		const temporaryCam = new PerspectiveCamera();
-		const temporaryScene = new Scene();
-		temporaryScene.add( fullscreenQuad );
-
-		if (!this.temporaryRenderer) {
-
-			this.temporaryRenderer = new WebGLRenderer( { antialias: false } );
-
-		}
-
-		this.temporaryRenderer.setSize( Math.min(map.image.width, maxTextureSize), Math.min(map.image.height, maxTextureSize) );
-		this.temporaryRenderer.clear();
-		this.temporaryRenderer.render( temporaryScene, temporaryCam );
-
-		const readableTexture = new Texture( this.temporaryRenderer.domElement );
-		readableTexture.userData.mimeType = 'image/png';
-		return readableTexture;
-
-	}
-
 	buildMetalRoughTexture( metalnessMap, roughnessMap ) {
 
 		if ( metalnessMap === roughnessMap ) return metalnessMap;
@@ -807,17 +745,17 @@ class GLTFWriter {
 
 		console.warn( 'THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.' );
 
-		if ( typeof CompressedTexture !== 'undefined') {
+		if ( typeof CompressedTexture !== 'undefined' ) {
 
 			if ( metalnessMap instanceof CompressedTexture ) {
 
-				metalnessMap = this.buildReadableTexture( metalnessMap );
+				metalnessMap = decompress( metalnessMap );
 
 			}
 
 			if ( roughnessMap instanceof CompressedTexture ) {
 
-				roughnessMap = this.buildReadableTexture( roughnessMap );
+				roughnessMap = decompress( roughnessMap );
 
 			}
 
@@ -1215,6 +1153,7 @@ class GLTFWriter {
 					console.error( 'GLTFExporter: Only RGBAFormat is supported.', image );
 
 				}
+
 				if ( image.width > options.maxTextureSize || image.height > options.maxTextureSize ) {
 
 					console.warn( 'GLTFExporter: Image size is bigger than maxTextureSize', image );
@@ -1341,13 +1280,14 @@ class GLTFWriter {
 		let modifiedMap = map;
 
 		// make non-readable textures (e.g. CompressedTexture) readable by blitting them into a new texture
-		// TODO: how to detect that a texture isn't readable?
 		if ( typeof CompressedTexture !== 'undefined' && map instanceof CompressedTexture ) {
 
-			modifiedMap = this.buildReadableTexture( map, options.maxTextureSize );
+			modifiedMap = decompress( map, options.maxTextureSize );
+			// remove from cache, as the underlaying canvas is always the same between decompressed textures
+			cache.images.delete( modifiedMap.image );
 
 		}
-		
+
 		let mimeType = modifiedMap.userData.mimeType;
 
 		if ( mimeType === 'image/webp' ) mimeType = 'image/png';
@@ -1423,9 +1363,11 @@ class GLTFWriter {
 		}
 
 		// pbrMetallicRoughness.metallicRoughnessTexture
-		if ( material.metalnessMap || material.roughnessMap ) {
+		const metalnessMap = material.metalnessMap?.image ? material.metalnessMap : undefined;
+		const roughnessMap = material.roughnessMap?.image ? material.roughnessMap : undefined;
+		if ( metalnessMap || roughnessMap ) {
 
-			const metalRoughTexture = this.buildMetalRoughTexture( material.metalnessMap, material.roughnessMap );
+			const metalRoughTexture = this.buildMetalRoughTexture( metalnessMap, roughnessMap );
 
 			const metalRoughMapDef = { index: this.processTexture( metalRoughTexture ) };
 			this.applyTextureTransform( metalRoughMapDef, metalRoughTexture );
@@ -1434,7 +1376,7 @@ class GLTFWriter {
 		}
 
 		// pbrMetallicRoughness.baseColorTexture or pbrSpecularGlossiness diffuseTexture
-		if ( material.map ) {
+		if ( material.map?.image ) {
 
 			const baseColorMapDef = { index: this.processTexture( material.map ) };
 			this.applyTextureTransform( baseColorMapDef, material.map );
@@ -1463,7 +1405,7 @@ class GLTFWriter {
 			}
 
 			// emissiveTexture
-			if ( material.emissiveMap ) {
+			if ( material.emissiveMap?.image ) {
 
 				const emissiveMapDef = { index: this.processTexture( material.emissiveMap ) };
 				this.applyTextureTransform( emissiveMapDef, material.emissiveMap );
@@ -1474,7 +1416,7 @@ class GLTFWriter {
 		}
 
 		// normalTexture
-		if ( material.normalMap ) {
+		if ( material.normalMap?.image ) {
 
 			const normalMapDef = { index: this.processTexture( material.normalMap ) };
 
@@ -1492,7 +1434,7 @@ class GLTFWriter {
 		}
 
 		// occlusionTexture
-		if ( material.aoMap ) {
+		if ( material.aoMap?.image ) {
 
 			const occlusionMapDef = {
 				index: this.processTexture( material.aoMap ),
@@ -2413,62 +2355,6 @@ class GLTFMaterialsUnlitExtension {
 
 }
 
-/**
- * Specular-Glossiness Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness
- */
-class GLTFMaterialsPBRSpecularGlossiness {
-
-	constructor( writer ) {
-
-		this.writer = writer;
-		this.name = 'KHR_materials_pbrSpecularGlossiness';
-
-	}
-
-	writeMaterial( material, materialDef ) {
-
-		if ( ! material.isGLTFSpecularGlossinessMaterial ) return;
-
-		const writer = this.writer;
-		const extensionsUsed = writer.extensionsUsed;
-
-		const extensionDef = {};
-
-		if ( materialDef.pbrMetallicRoughness.baseColorFactor ) {
-
-			extensionDef.diffuseFactor = materialDef.pbrMetallicRoughness.baseColorFactor;
-
-		}
-
-		const specularFactor = [ 1, 1, 1 ];
-		material.specular.toArray( specularFactor, 0 );
-		extensionDef.specularFactor = specularFactor;
-		extensionDef.glossinessFactor = material.glossiness;
-
-		if ( materialDef.pbrMetallicRoughness.baseColorTexture ) {
-
-			extensionDef.diffuseTexture = materialDef.pbrMetallicRoughness.baseColorTexture;
-
-		}
-
-		if ( material.specularMap ) {
-
-			const specularMapDef = { index: writer.processTexture( material.specularMap ) };
-			writer.applyTextureTransform( specularMapDef, material.specularMap );
-			extensionDef.specularGlossinessTexture = specularMapDef;
-
-		}
-
-		materialDef.extensions = materialDef.extensions || {};
-		materialDef.extensions[ this.name ] = extensionDef;
-		extensionsUsed[ this.name ] = true;
-
-	}
-
-}
-
 /**
  * Clearcoat Materials Extension
  *

package/examples/jsm/exporters/USDZExporter.js

@@ -7,14 +7,17 @@ import {
 	Mesh, 
 	ShaderMaterial, 
 	WebGLRenderer, 
+	MathUtils,
 	Matrix4, 
 	RepeatWrapping, 
 	MirroredRepeatWrapping, 
 	DoubleSide
 } from 'three';
-import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
-import { generateUUID } from 'three/src/math/mathutils.js';
+import * as fflate from '../libs/fflate.module.js';
 
+function makeNameSafe(str){
+	return str.replace(/[^a-zA-Z0-9_]/g, '');
+}
 
 class USDZDocument {
 
@@ -111,7 +114,7 @@ class USDZDocument {
 	customLayerData = {
 		string creator = "Three.js USDZExporter"
 	}
-	defaultPrim = "${this.name}"
+	defaultPrim = "${makeNameSafe(this.name)}"
 	metersPerUnit = 1
 	upAxis = "Y"
 	startTimeCode = 0
@@ -131,7 +134,7 @@ export class USDZObject {
 
 	static createEmptyParent( object ) {
 
-		const emptyParent = new USDZObject( generateUUID(), object.name + '_empty_' + ( this._id ++ ), object.matrix );
+		const emptyParent = new USDZObject( MathUtils.generateUUID(), object.name + '_empty_' + ( this._id ++ ), object.matrix );
 		const parent = object.parent;
 		parent.add( emptyParent );
 		emptyParent.add( object );
@@ -141,13 +144,14 @@ export class USDZObject {
 
 	}
 
-	constructor( id, name, matrix, mesh, material ) {
+	constructor( id, name, matrix, mesh, material, camera ) {
 
 		this.uuid = id;
-		this.name = name;
+		this.name = makeNameSafe(name);
 		this.matrix = matrix;
 		this.geometry = mesh;
 		this.material = material;
+		this.camera = camera;
 		this.parent = null;
 		this.children = [];
 		this._eventListeners = {};
@@ -170,7 +174,7 @@ export class USDZObject {
 
 	clone() {
 
-		const clone = new USDZObject( generateUUID(), this.name, this.matrix, this.mesh, this.material );
+		const clone = new USDZObject( MathUtils.generateUUID(), this.name, this.matrix, this.mesh, this.material );
 		clone.isDynamic = this.isDynamic;
 		return clone;
 
@@ -340,8 +344,13 @@ class USDZExporterContext {
 
 class USDZExporter {
 
-	async parse( scene, extensions ) {
+	constructor(){
+		this.debug = false;
+	}
+
+	async parse( scene, extensions, sceneAnchoringOptions = { ar: { anchoring: { type: 'plane' }, planeAnchoring: { alignment: 'horizontal' } } } ) {
 
+		this.sceneAnchoringOptions = sceneAnchoringOptions;
 		const context = new USDZExporterContext( scene, this, extensions );
 		extensions = context.extensions;
 
@@ -368,7 +377,6 @@ class USDZExporter {
 
 		invokeAll( context, 'onAfterHierarchy' );
 
-
 		const header = context.document.buildHeader();
 		const final = header + '\n' + context.output;
 
@@ -376,7 +384,8 @@ class USDZExporter {
 		this.lastUsda = final;
 
 		// full output file
-		console.log( final );
+		if(this.debug)
+			console.log( final );
 
 		files[ modelFileName ] = fflate.strToU8( final );
 		context.output = null;
@@ -445,6 +454,11 @@ function traverseVisible( object, parentModel, context ) {
 		const name = getObjectId( object );
 		model = new USDZObject( object.uuid, name, object.matrix, geometry, material );
 
+	} else if ( object.isCamera ) {
+
+		const name = getObjectId( object );
+		model = new USDZObject( object.uuid, name, object.matrix, undefined, undefined, object );
+
 	} else {
 
 		const name = getObjectId( object );
@@ -505,6 +519,22 @@ function parseDocument( context ) {
 	const writer = new CodeWriter();
 
 	writer.beginBlock( `def Xform "${context.document.name}"` );
+	
+	writer.beginBlock( `def Scope "Scenes" (
+			kind = "sceneLibrary"
+		)`);
+
+	writer.beginBlock(`def Xform "Scene" (
+			customData = {
+				bool preliminary_collidesWithEnvironment = 0
+				string sceneName = "Scene"
+			}
+			sceneName = "Scene"
+		)`);
+
+	writer.appendLine(`token preliminary:anchoring:type = "${context.exporter.sceneAnchoringOptions.ar.anchoring.type}"`);
+	writer.appendLine(`token preliminary:planeAnchoring:alignment = "${context.exporter.sceneAnchoringOptions.ar.planeAnchoring.alignment}"`);
+	writer.appendLine();
 
 	for ( const child of context.document.children ) {
 
@@ -512,6 +542,8 @@ function parseDocument( context ) {
 
 	}
 
+	writer.closeBlock();
+	writer.closeBlock();
 	writer.closeBlock();
 
 	context.output += writer.toString();
@@ -699,11 +731,10 @@ export function buildXform( model, writer, context ) {
 	const matrix = model.matrix;
 	const geometry = model.geometry;
 	const material = model.material;
+	const camera = model.camera;
 	const name = model.name;
 	const transform = buildMatrix( matrix );
 
-	// console.log(model.name, model.getPath());
-
 	if ( matrix.determinant() < 0 ) {
 
 		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', path );
@@ -712,6 +743,8 @@ export function buildXform( model, writer, context ) {
 
 	if ( geometry )
 		writer.beginBlock( `def Xform "${name}" (prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>)` );
+	else if ( camera )
+		writer.beginBlock( `def Camera "${name}"` );
 	else
 		writer.beginBlock( `def Xform "${name}"` );
 
@@ -719,6 +752,29 @@ export function buildXform( model, writer, context ) {
 		writer.appendLine( `rel material:binding = </Materials/Material_${material.id}>` );
 	writer.appendLine( `matrix4d xformOp:transform = ${transform}` );
 	writer.appendLine( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
+
+	if ( camera  ) {
+		 
+		if ( camera.isOrthographicCamera ) {
+
+			writer.appendLine(`float2 clippingRange = (${camera.near}, ${camera.far})`);
+			writer.appendLine(`float horizontalAperture = ${(( Math.abs( camera.left ) + Math.abs( camera.right ) ) * 10).toPrecision( PRECISION )}`);
+			writer.appendLine(`float verticalAperture = ${(( Math.abs( camera.top ) + Math.abs( camera.bottom ) ) * 10).toPrecision( PRECISION )}`);
+			writer.appendLine(`token projection = "orthographic"`);
+	
+		} else {
+	
+			writer.appendLine(`float2 clippingRange = (${camera.near.toPrecision( PRECISION )}, ${camera.far.toPrecision( PRECISION )})`);
+			writer.appendLine(`float focalLength = ${camera.getFocalLength().toPrecision( PRECISION )}`);
+			writer.appendLine(`float focusDistance = ${camera.focus.toPrecision( PRECISION )}`);
+			writer.appendLine(`float horizontalAperture = ${camera.getFilmWidth().toPrecision( PRECISION )}`);
+			writer.appendLine(`token projection = "perspective"`);
+			writer.appendLine(`float verticalAperture = ${camera.getFilmHeight().toPrecision( PRECISION )}`);
+
+		}
+
+	}
+
 	if ( model.onSerialize ) {
 
 		model.onSerialize( writer, context );
@@ -984,7 +1040,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.map !== null ) {
+	if ( material.map?.image ) {
 
 		inputs.push( `${pad}color3f inputs:diffuseColor.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:rgb>` );
 
@@ -1007,7 +1063,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.emissiveMap !== null ) {
+	if ( material.emissiveMap?.image ) {
 
 		inputs.push( `${pad}color3f inputs:emissiveColor.connect = </Materials/Material_${material.id}/Texture_${material.emissiveMap.id}_emissive.outputs:rgb>` );
 
@@ -1019,7 +1075,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.normalMap !== null ) {
+	if ( material.normalMap?.image ) {
 
 		inputs.push( `${pad}normal3f inputs:normal.connect = </Materials/Material_${material.id}/Texture_${material.normalMap.id}_normal.outputs:rgb>` );
 
@@ -1027,7 +1083,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.aoMap !== null ) {
+	if ( material.aoMap?.image ) {
 
 		inputs.push( `${pad}float inputs:occlusion.connect = </Materials/Material_${material.id}/Texture_${material.aoMap.id}_occlusion.outputs:r>` );
 
@@ -1035,7 +1091,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.roughnessMap !== null && material.roughness === 1 ) {
+	if ( material.roughnessMap?.image && material.roughness === 1 ) {
 
 		inputs.push( `${pad}float inputs:roughness.connect = </Materials/Material_${material.id}/Texture_${material.roughnessMap.id}_roughness.outputs:g>` );
 
@@ -1047,7 +1103,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.metalnessMap !== null && material.metalness === 1 ) {
+	if ( material.metalnessMap?.image && material.metalness === 1 ) {
 
 		inputs.push( `${pad}float inputs:metallic.connect = </Materials/Material_${material.id}/Texture_${material.metalnessMap.id}_metallic.outputs:b>` );
 
@@ -1059,7 +1115,7 @@ function buildMaterial( material, textures ) {
 
 	}
 
-	if ( material.alphaMap !== null ) {
+	if ( material.alphaMap?.image ) {
 
 		inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
 		inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );

package/examples/jsm/interactive/HTMLMesh.js

@@ -36,6 +36,8 @@ class HTMLMesh extends Mesh {
 			material.dispose();
 
 			material.map.dispose();
+			
+			canvases.delete( dom );
 
 			this.removeEventListener( 'mousedown', onEvent );
 			this.removeEventListener( 'mousemove', onEvent );