GLTFLoader: Export KHR_materials_variants extension handler from the …

…loader
mrdoob · Dec 1, 2020 · b3a06d9 · b3a06d9
1 parent 6b4c81b
commit b3a06d9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 223 deletions.
diff --git a/examples/js/loaders/GLTFLoader.js b/examples/js/loaders/GLTFLoader.js
@@ -35,12 +35,6 @@ THREE.GLTFLoader = ( function () {
 
 		} );
 
-		this.register( function ( parser ) {
-
-			return new GLTFMaterialsVariantsExtension( parser );
-
-		} );
-
 		this.register( function ( parser ) {
 
 			return new GLTFLightsExtension( parser );
@@ -360,7 +354,6 @@ THREE.GLTFLoader = ( function () {
 		KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',
 		KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',
 		KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
-		KHR_MATERIALS_VARIANTS: 'KHR_materials_variants',
 		KHR_TEXTURE_BASISU: 'KHR_texture_basisu',
 		KHR_TEXTURE_TRANSFORM: 'KHR_texture_transform',
 		KHR_MESH_QUANTIZATION: 'KHR_mesh_quantization',
@@ -744,110 +737,6 @@ THREE.GLTFLoader = ( function () {
 
 	};
 
-	/**
-	 * Materials variants extension
-	 *
-	 * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_variants
-	 */
-	function GLTFMaterialsVariantsExtension( parser ) {
-
-		this.parser = parser;
-		this.name = EXTENSIONS.KHR_MATERIALS_VARIANTS;
-		this.addExtensionsToUserData = true;
-
-	}
-
-	GLTFMaterialsVariantsExtension.prototype.afterRoot = function ( gltf ) {
-
-		var parser = this.parser;
-		var json = parser.json;
-		var name = this.name;
-
-		if ( ! json.extensions || ! json.extensions[ name ] ) return null;
-
-		var extensionDef = json.extensions[ name ];
-		var variantsDef = extensionDef.variants || [];
-		var variants = [];
-
-		for ( var i = 0, il = variantsDef.length; i < il; i ++ ) {
-
-			variants.push( variantsDef[ i ].name );
-
-		}
-
-		for ( var i = 0, il = gltf.scenes.length; i < il; i ++ ) {
-
-			gltf.scenes[ i ].userData.variants = variants;
-
-		}
-
-		gltf.userData.variants = variants;
-
-		gltf.userData.selectVariant = function selectVariant ( variantName ) {
-
-			var scenes = gltf.scenes;
-			var pending = [];
-
-			for ( var i = 0, il = scenes.length; i < il; i ++ ) {
-
-				var scene = scenes[ i ];
-
-				var variantIndex = variants.indexOf( variantName );
-
-				if ( variantIndex === - 1 ) continue;
-
-				scene.traverse( function ( object ) {
-
-					if ( ! object.isMesh || ! object.userData.gltfExtensions ||
-						! object.userData.gltfExtensions[ name ] ) return;
-
-					var meshVariantDef = object.userData.gltfExtensions[ name ];
-					var mappings = meshVariantDef.mappings || [];
-					var materialIndex = - 1;
-
-					for ( var j = 0, jl = mappings.length; j < jl; j ++ ) {
-
-						var mapping = mappings[ j ];
-
-						if ( mapping.variants.indexOf( variantIndex ) !== - 1 ) {
-
-							materialIndex = mapping.material;
-							break;
-
-						}
-
-					}
-
-					if ( materialIndex >= 0 ) {
-
-						if ( ! object.userData.originalMaterial ) {
-
-							object.userData.originalMaterial = object.material;
-
-						}
-
-						pending.push( parser.getDependency( 'material', materialIndex ).then( function ( material ) {
-
-							object.material = material;
-
-						} ) );
-
-					} else if ( object.userData.originalMaterial ) {
-
-						object.material = object.userData.originalMaterial;
-
-					}
-
-				} );
-
-			}
-
-			return Promise.all( pending );
-
-		};
-
-	};
-
 	/**
 	 * WebP Texture Extension
 	 *

diff --git a/examples/jsm/loaders/GLTFLoader.js b/examples/jsm/loaders/GLTFLoader.js
@@ -100,12 +100,6 @@ var GLTFLoader = ( function () {
 
 		} );
 
-		this.register( function ( parser ) {
-
-			return new GLTFMaterialsVariantsExtension( parser );
-
-		} );
-
 		this.register( function ( parser ) {
 
 			return new GLTFLightsExtension( parser );
@@ -425,7 +419,6 @@ var GLTFLoader = ( function () {
 		KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',
 		KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',
 		KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
-		KHR_MATERIALS_VARIANTS: 'KHR_materials_variants',
 		KHR_TEXTURE_BASISU: 'KHR_texture_basisu',
 		KHR_TEXTURE_TRANSFORM: 'KHR_texture_transform',
 		KHR_MESH_QUANTIZATION: 'KHR_mesh_quantization',
@@ -809,110 +802,6 @@ var GLTFLoader = ( function () {
 
 	};
 
-	/**
-	 * Materials variants extension
-	 *
-	 * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_variants
-	 */
-	function GLTFMaterialsVariantsExtension( parser ) {
-
-		this.parser = parser;
-		this.name = EXTENSIONS.KHR_MATERIALS_VARIANTS;
-		this.addExtensionsToUserData = true;
-
-	}
-
-	GLTFMaterialsVariantsExtension.prototype.afterRoot = function ( gltf ) {
-
-		var parser = this.parser;
-		var json = parser.json;
-		var name = this.name;
-
-		if ( ! json.extensions || ! json.extensions[ name ] ) return null;
-
-		var extensionDef = json.extensions[ name ];
-		var variantsDef = extensionDef.variants || [];
-		var variants = [];
-
-		for ( var i = 0, il = variantsDef.length; i < il; i ++ ) {
-
-			variants.push( variantsDef[ i ].name );
-
-		}
-
-		for ( var i = 0, il = gltf.scenes.length; i < il; i ++ ) {
-
-			gltf.scenes[ i ].userData.variants = variants;
-
-		}
-
-		gltf.userData.variants = variants;
-
-		gltf.userData.selectVariant = function selectVariant ( variantName ) {
-
-			var scenes = gltf.scenes;
-			var pending = [];
-
-			for ( var i = 0, il = scenes.length; i < il; i ++ ) {
-
-				var scene = scenes[ i ];
-
-				var variantIndex = variants.indexOf( variantName );
-
-				if ( variantIndex === - 1 ) continue;
-
-				scene.traverse( function ( object ) {
-
-					if ( ! object.isMesh || ! object.userData.gltfExtensions ||
-						! object.userData.gltfExtensions[ name ] ) return;
-
-					var meshVariantDef = object.userData.gltfExtensions[ name ];
-					var mappings = meshVariantDef.mappings || [];
-					var materialIndex = - 1;
-
-					for ( var j = 0, jl = mappings.length; j < jl; j ++ ) {
-
-						var mapping = mappings[ j ];
-
-						if ( mapping.variants.indexOf( variantIndex ) !== - 1 ) {
-
-							materialIndex = mapping.material;
-							break;
-
-						}
-
-					}
-
-					if ( materialIndex >= 0 ) {
-
-						if ( ! object.userData.originalMaterial ) {
-
-							object.userData.originalMaterial = object.material;
-
-						}
-
-						pending.push( parser.getDependency( 'material', materialIndex ).then( function ( material ) {
-
-							object.material = material;
-
-						} ) );
-
-					} else if ( object.userData.originalMaterial ) {
-
-						object.material = object.userData.originalMaterial;
-
-					}
-
-				} );
-
-			}
-
-			return Promise.all( pending );
-
-		};
-
-	};
-
 	/**
 	 * WebP Texture Extension
 	 *

diff --git a/examples/jsm/loaders/gltf_plugins/KHR_materials_variants.js b/examples/jsm/loaders/gltf_plugins/KHR_materials_variants.js
@@ -0,0 +1,103 @@
+/**
+ * Materials variants extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_variants
+ */
+export default function GLTFMaterialsVariantsExtension( parser ) {
+
+	this.parser = parser;
+	this.name = 'KHR_materials_variants';
+	this.addExtensionsToUserData = true;
+
+}
+
+GLTFMaterialsVariantsExtension.prototype.afterRoot = function ( gltf ) {
+
+	var parser = this.parser;
+	var json = parser.json;
+	var name = this.name;
+
+	if ( ! json.extensions || ! json.extensions[ name ] ) return null;
+
+	var extensionDef = json.extensions[ name ];
+	var variantsDef = extensionDef.variants || [];
+	var variants = [];
+
+	for ( var i = 0, il = variantsDef.length; i < il; i ++ ) {
+
+		variants.push( variantsDef[ i ].name );
+
+	}
+
+	for ( var i = 0, il = gltf.scenes.length; i < il; i ++ ) {
+
+		gltf.scenes[ i ].userData.variants = variants;
+
+	}
+
+	gltf.userData.variants = variants;
+
+	gltf.userData.selectVariant = function selectVariant ( variantName ) {
+
+		var scenes = gltf.scenes;
+		var pending = [];
+
+		for ( var i = 0, il = scenes.length; i < il; i ++ ) {
+
+			var scene = scenes[ i ];
+
+			var variantIndex = variants.indexOf( variantName );
+
+			if ( variantIndex === - 1 ) continue;
+
+			scene.traverse( function ( object ) {
+
+				if ( ! object.isMesh || ! object.userData.gltfExtensions ||
+					! object.userData.gltfExtensions[ name ] ) return;
+
+				var meshVariantDef = object.userData.gltfExtensions[ name ];
+				var mappings = meshVariantDef.mappings || [];
+				var materialIndex = - 1;
+
+				for ( var j = 0, jl = mappings.length; j < jl; j ++ ) {
+
+					var mapping = mappings[ j ];
+
+					if ( mapping.variants.indexOf( variantIndex ) !== - 1 ) {
+
+						materialIndex = mapping.material;
+						break;
+
+					}
+
+				}
+
+				if ( materialIndex >= 0 ) {
+
+					if ( ! object.userData.originalMaterial ) {
+
+						object.userData.originalMaterial = object.material;
+
+					}
+
+					pending.push( parser.getDependency( 'material', materialIndex ).then( function ( material ) {
+
+						object.material = material;
+
+					} ) );
+
+				} else if ( object.userData.originalMaterial ) {
+
+					object.material = object.userData.originalMaterial;
+
+				}
+
+			} );
+
+		}
+
+		return Promise.all( pending );
+
+	};
+
+};
diff --git a/examples/webgl_loader_gltf_variants.html b/examples/webgl_loader_gltf_variants.html
@@ -24,6 +24,8 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
+			import GLTFMaterialsVariantsExtension from './jsm/loaders/gltf_plugins/KHR_materials_variants.js';
+
 			let camera, scene, renderer;
 			let gui;
 
@@ -59,7 +61,12 @@
 
 						// model
 
-						const loader = new GLTFLoader().setPath( 'models/gltf/MaterialsVariantsShoe/glTF/' );
+						const loader = new GLTFLoader().register( function ( parser ) {
+
+							return new GLTFMaterialsVariantsExtension( parser );
+
+						} ).setPath( 'models/gltf/MaterialsVariantsShoe/glTF/' );
+
 						loader.load( 'MaterialsVariantsShoe.gltf', function ( gltf ) {
 
 							gltf.scene.scale.set( 10.0, 10.0, 10.0 );