how to generically import a gltf model in threejs?

Question

I need to create a generic advanced viewer in three js which could generate Gltf files. How could I get every information about each component of the model?

I try to search into the loader class with loader.load() of THREE.GLTFLOADER, I found the information ( in scene.children which are the models' components) but I can't make it generic.

Is there any libraries or function that give you each component? like the function .getElementById, something like .GetAllComponents or .GetMaterialsTextures (like i need to get every path for texture and model'components)

I don't ask u to give me the answer I will not learn.

var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( 'js/draco_decoder.js' );

let loader = new THREE.GLTFLoader(); // I use this as all the video i saw but i you coud explain it (does it help to pack data or just to encode?)
loader.setDRACOLoader( dracoLoader );

loader.load('assets/BM1294_EOS_TABLE_220X280_OUVERT/BM1294.gltf',
function(gltf){
    console.log(gltf);
    let mesh = gltf.scene.children[0]; //one of my model
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
    scene.add(mesh);
});

Thank you If you help :)

Have you considered to use Object3D.getObjectByName()? You can invoke this method on your loaded gltf.scene and query single components of your asset by (node) names. — Mugen87
I'm referring to the names of glTF components like meshes, materials etc.. — Mugen87
ok, but when I look for the name of the mesh I already got the object, what is the utility of this? I just want the path of the resources of each mesh etc and store them and use it late (change dynamically the color) — Mathias VIGIER

Don McCurdy Don McCurdy · Accepted Answer · 2019-09-05T21:40:45

If you want to modify plain JSON, without using threejs objects, you should probably load the JSON outside of GLTFLoader first. For example:

// Load JSON using the native fetch() API.
fetch('model.gltf')
  .then((response) => response.json())
  .then((json) => {
    // View and edit the glTF JSON content.
    console.log(json);
    json.materials[0].baseColorFactor = [1, 0, 0, 1];

    // Parse the modified glTF JSON using THREE.GLTFLoader.
    const jsonString = JSON.stringify(json);
    const loader = new THREE.GLTFLoader();
    loader.parse( jsonString, '', ( gltf ) => {
      // Add the result to the scene.
      scene.add(gltf.scene);
    });
  });

NOTE: This assumes you are using the .gltf extension. Files ending in .glb are binary, and parsing them isn't covered by this answer. You can convert easily between the two variants with glTF-Pipeline.

Modifying the glTF content in complex ways will require some understanding of the format specification, and is somewhat outside the scope of a Stack Overflow question. You may find it easier to load threejs objects using GLTFLoader normally and modify those, instead.

how to generically import a gltf model in threejs?

1 Answers