FBXLoader: Support more texture formats. (#28515)

* #28514 extend FBXLoader textures type

* updated tiff image

* Update FBXLoader.js

* Update webgl_loader_fbx.html

* simplified loadTexture logic

* lazy importing loaders

* Revert "lazy importing loaders"

This reverts commit b19dfb84450f0e6b16a4244b83ca48537f5d8d9f.

* reverted non native textures example

* reverted non native textures example

---------

Co-authored-by: Michael Herzog <[email protected]>
Co-authored-by: mrdoob <[email protected]>

examples/jsm/loaders/FBXLoader.js

@@ -407,72 +407,50 @@ class FBXTreeParser {
 	// load a texture specified as a blob or data URI, or via an external URL using TextureLoader
 	loadTexture( textureNode, images ) {
 
-		let fileName;
-
-		const currentPath = this.textureLoader.path;
-
-		const children = connections.get( textureNode.id ).children;
+		const nonNativeExtensions = new Set( [ 'tga', 'tif', 'tiff', 'exr', 'dds', 'hdr', 'ktx2' ] );
 
-		if ( children !== undefined && children.length > 0 && images[ children[ 0 ].ID ] !== undefined ) {
+		const extension = textureNode.FileName.split( '.' ).pop().toLowerCase();
 
-			fileName = images[ children[ 0 ].ID ];
+		const loader = nonNativeExtensions.has( extension ) ? this.manager.getHandler( `.${extension}` ) : this.textureLoader;
 
-			if ( fileName.indexOf( 'blob:' ) === 0 || fileName.indexOf( 'data:' ) === 0 ) {
+		if ( ! loader ) {
 
-				this.textureLoader.setPath( undefined );
-
-			}
+			console.warn(
+				`FBXLoader: ${extension.toUpperCase()} loader not found, creating placeholder texture for`,
+				textureNode.RelativeFilename
+			);
+			return new Texture();
 
 		}
 
-		let texture;
-
-		const extension = textureNode.FileName.slice( - 3 ).toLowerCase();
-
-		if ( extension === 'tga' ) {
-
-			const loader = this.manager.getHandler( '.tga' );
+		const loaderPath = loader.path;
 
-			if ( loader === null ) {
-
-				console.warn( 'FBXLoader: TGA loader not found, creating placeholder texture for', textureNode.RelativeFilename );
-				texture = new Texture();
-
-			} else {
+		if ( ! loaderPath ) {
 
-				loader.setPath( this.textureLoader.path );
-				texture = loader.load( fileName );
+			loader.setPath( this.textureLoader.path );
 
-			}
+		}
 
-		} else if ( extension === 'dds' ) {
+		const children = connections.get( textureNode.id ).children;
 
-			const loader = this.manager.getHandler( '.dds' );
+		let fileName;
 
-			if ( loader === null ) {
+		if ( children !== undefined && children.length > 0 && images[ children[ 0 ].ID ] !== undefined ) {
 
-				console.warn( 'FBXLoader: DDS loader not found, creating placeholder texture for', textureNode.RelativeFilename );
-				texture = new Texture();
+			fileName = images[ children[ 0 ].ID ];
 
-			} else {
+			if ( fileName.indexOf( 'blob:' ) === 0 || fileName.indexOf( 'data:' ) === 0 ) {
 
-				loader.setPath( this.textureLoader.path );
-				texture = loader.load( fileName );
+				loader.setPath( undefined );
 
 			}
 
-		} else if ( extension === 'psd' ) {
-
-			console.warn( 'FBXLoader: PSD textures are not supported, creating placeholder texture for', textureNode.RelativeFilename );
-			texture = new Texture();
-
-		} else {
-
-			texture = this.textureLoader.load( fileName );
-
 		}
 
-		this.textureLoader.setPath( currentPath );
+		const texture = loader.load( fileName );
+
+		// revert to initial path
+		loader.setPath( loaderPath );
 
 		return texture;
 

examples/webgl_loader_fbx.html

@@ -32,11 +32,13 @@
 			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer, stats, object, loader, guiMorphsFolder;
-			const clock = new THREE.Clock();
+			const manager = new THREE.LoadingManager();
 
+			let camera, scene, renderer, stats, object, loader, guiMorphsFolder;
 			let mixer;
 
+			const clock = new THREE.Clock();
+
 			const params = {
 				asset: 'Samba Dancing'
 			};
@@ -87,7 +89,7 @@
 				grid.material.transparent = true;
 				scene.add( grid );
 			
-				loader = new FBXLoader( );
+				loader = new FBXLoader( manager );
 				loadAsset( params.asset );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -126,8 +128,18 @@
 
 						object.traverse( function ( child ) {
 
-							if ( child.material ) child.material.dispose();
-							if ( child.material && child.material.map ) child.material.map.dispose();
+							if ( child.material ) {
+
+								const materials = Array.isArray( child.material ) ? child.material : [ child.material ];
+								materials.forEach( material => {
+
+									if ( material.map ) material.map.dispose();
+									material.dispose();
+			
+								} );
+			
+							}
+			
 							if ( child.geometry ) child.geometry.dispose();
 
 						} );