Accessing GLTF mesh/material component

Questions
1

Hello,
I have a question about manipulate material from a GLTF file.
My file came from Blender and in Blender have two different colors in is parts.
This is Hierarchy of exported file opened in Gltf viewer:

Scene → Object3D → TT → Schienale004 →
Mesh.067_0 & Mesh.067_1

Schermata 2021-01-27 alle 00.51.41
Schermata 2021-01-27 alle 00.51.411088×196 28.9 KB

I need to change materials from the two mesh in hierarchy.
There is some way to do this?

tankyou

2

From your hierarchy :

const gltf = theImportedGltfScene;
const myMaterials = [material1, material2];
gltd.children[0].children[0].children.foreach((mesh, i) => {
    mesh.material.dispose();
    mesh.material = myMaterials[i]
});
render();
1 Like
3

Just as @local_dev said, one thing to make it a bit more secure (ie. independent of children array order), you can pick the meshes by their names while traversing:

const material1 = new Three.MeshStandardMaterial({ color: 0xff00ff });
const material2 = new Three.MeshStandardMaterial({ color: 0x00ff00 });

gltf.traverse(child => {
  if (child.name === "Mesh.067_0") {
    child.material.dispose();

    child.material = material1;
  }

  if (child.name === "Mesh.067_1") {
    child.material.dispose();

    child.material = material2;
  }
});

Alternatively, you can also pick these meshes with Object3D.getObjectById - outcome would be similar.

2 Likes
4

TankYou very, very much to all.
Code run perfect.

Cheers

5

hello,

i ve just reading this thread and i dont understand dispose() function  .

what this function do and why this function is called before assigned new material ?

thank

6

It’s all in the docs : Howto dispose of objects … Read the first paragraph.

7

ok i understand , dispose = delete

thank you very much for the link .

8

Just to clarify - dispose isn’t exactly delete, nor does it replace it (you still have to take care of deleting objects / references in JS yourself.)

When you’re creating a scene in three, the following happens (pretty much what docs say):

  1. You create a Scene object. It’s created on the JS memory heap (ie. collection of all JS things of your app.) This object will be removed by Garbage Collector (GC) from the heap only after you delete all references to it (for example - stop rendering this Scene, and switch to another one for a longer period.)
  2. When you create a new 3D object (ex. Three.Mesh), it is also only placed on the JS heap - and will be removed automatically after a longer period of uselessness.
  3. Things change when you add that 3D object to your scene. The moment your object becomes visible to the camera - vertex arrays and materials will be allocated on the GPU. And as above - things on the GPU will not be cleaned automatically by GC.

To actually wipe the memory clean after creating an object, you should take care of both stacks:

  1. First, remove the 3D object from its parent (otherwise, even if you disposed the GPU assets, they will be instantly reallocated on next render.)
  2. After object is not in the scene anymore, dispose it’s geometry, material, and any disposable stuff within that material (ex. textures.)
  3. Lastly, remove all references in JS by setting them to null or using said delete - delete myObject; in all places it could be referenced (arrays, objects, userData, callbacks, Promises.)

Here’s a small example of total disposal (line 31; instead of objects being deleted, they are popped from an array to remove the reference.)

Ideally, as long as you’re not using postprocessing, after removing the object - renderer.info.memory values should go back to zero (with postprocessing it should be 1-2 geometries and a small, static number of textures.) If they aren’t, you’re leaking memory - and will soon receive a pile of angry emails from your users about crashing their browser tabs.

1 Like
9

hello,

thank you very much for your detailed explanation . i m newbies in 3d and Three.js and your explanation help me . I have to learn a lot . i understand now , why probably i ve lot of crash in dev( modify code => , reload tab , etc , and after a number of reload , display become low and low and tab crash ) .