How to use a glTF material library concept?

This message peaked my interest:

So I’ve tested this with my custom exporter that wrote a MaterialLibrary.gltf. This file only contains the Asset and Materials properties. Another glTF with meshes will have it’s Material (property of MeshPrimitive) assigned an index as listed in the MaterialLibrary.gltf.

But loading the files in either the editor or glTF viewer results in nothing happening or an object is undefined error respectively.

Any help on how to apply a material library concept (i.e. sharing materials between multiple models)?

The editor and my viewer do expect each file to contain a model, but I think you can use THREE.GLTFLoader directly to do this. For example:

var loader = new THREE.GLTFLoader();
loader.load( 'MaterialLibrary.gltf', ( gltf ) => {
  var parser = gltf.parser;
  console.log(parser.json.materials); // glTF definitions of materials
  parser.getDependency( 'material', 5 ).then(( material5 ) => {
    console.log(material5); // THREE.MeshStandardMaterial
  } );
}, undefined, (e) => console.error(e));

You may find it helpful to use userData (mesh.userData.*) to associate things. GLTFLoader will populate .userData on meshes and materials based on the .extras glTF field.

Finally, note that there are certain cases where a glTF file containing 1 material may translate to a three.js model containing 2+ materials. See

1 Like