add webgl_loader_multiple example that supports glTF and FBX loading,…

… proper disposal, and animation

* added webgl_loader_multiple as example of how to load multiple files one after each other
* added bounds fitting
* added FBX import as second file type example
* added material upgrade of FBX materials to MeshStandardMaterial to receive IBL
* fix minDistance possibly being greater than maxDistance, fix animation loading and playback
* switched to animationLoop

workaround for having a nicely blurred background from the environment

alternative blur approach: use texture mipmaps directly. less pretty

clean up, add link to PR that will introduce background bluriness

fix env bluriness (harder with mipmaps), fix HDRI Haven url

update screenshot

replace blurred background hack with new backgroundBlurriness

feat: add USDZ loading, glTF export and USDZ export, FBX material conversion

USDZExporter: fix default plane anchoring orientation and add precision specifiers (mrdoob#25012)

Fixes mrdoob#25011

[XR] Feat: Allow passing GLTFLoader into OculusHandModel/XRHandMeshModel (mrdoob#25013)

* feat: allow passing GLTFLoader into OculusHandModel/XRHandMeshModel

* apply review feedback

USDZExporter: guard against missing image data in textures

USDZLoader: add hierarchy support and fix loading files exported with USDZExporter

GLTFExporter: guard against missing image data in textures

simplify null check

cleanup child name and add example for texture traversal after loading

added file input button, added download button for OBJ

fix: GLTF and USDZ exporters break with missing images in textures

adjust title and description, convert OBJ mats to MeshStandardMaterial so they use IBL

updated screenshot

examples/files.json

@@ -216,6 +216,7 @@
 		"webgl_tonemapping",
 		"webgl_video_kinect",
 		"webgl_video_panorama_equirectangular",
+		"webgl_loader_multiple",
 		"webgl_water",
 		"webgl_water_flowmap"
 	],

examples/jsm/exporters/GLTFExporter.js

@@ -1449,9 +1449,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 ),
@@ -1486,7 +1488,7 @@ class GLTFWriter {
 			}
 
 			// emissiveTexture
-			if ( material.emissiveMap ) {
+			if ( material.emissiveMap?.image ) {
 
 				const emissiveMapDef = {
 					index: this.processTexture( material.emissiveMap ),
@@ -1500,7 +1502,7 @@ class GLTFWriter {
 		}
 
 		// normalTexture
-		if ( material.normalMap ) {
+		if ( material.normalMap?.image ) {
 
 			const normalMapDef = {
 				index: this.processTexture( material.normalMap ),
@@ -1521,7 +1523,7 @@ class GLTFWriter {
 		}
 
 		// occlusionTexture
-		if ( material.aoMap ) {
+		if ( material.aoMap?.image ) {
 
 			const occlusionMapDef = {
 				index: this.processTexture( material.aoMap ),

examples/jsm/exporters/USDZExporter.js

@@ -525,7 +525,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	}
 
-	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>` );
 
@@ -548,7 +548,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	}
 
-	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>` );
 
@@ -560,23 +560,23 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	}
 
-	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>` );
 
 		samplers.push( buildTexture( material.normalMap, 'normal' ) );
 
 	}
 
-	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>` );
 
 		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
 
 	}
 
-	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>` );
 
@@ -588,7 +588,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	}
 
-	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>` );
 
@@ -600,7 +600,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	}
 
-	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` );