Semi-transparent model loaded from gltf?

Questions
,
1

Hi. I am new to three.js

I have a model loaded from a gltf file into a scene. I am wondering if there is an easy way to make the model semi-transparent? In web development you would set an opacity parameter to .5 or something like that. Is there an equivalent in three.js?

      const loader = new GLTFLoader();
      loader.load(path, (gltf) => {
        this.currentModel = gltf.scene;
        this.currentModel.position.set(  ... 
        this.currentModel.opacity.set(.5) // does something like this exist?

Abe

2

Yes, the trick is that the “model” is actually a scene graph of potentially many objects. Unless you know what’s in the model already, you’ll need to traverse it.

this.currentModel.traverse((object) => {
  if (object.material) {
    object.material.transparent = true;
    object.material.depthWrite = false;
    object.material.opacity = 0.5;
  }
});

The check for object.material is included because not all objects are THREE.Mesh types; there may be THREE.Group or other objects. In most cases the materials created by GLTFLoader use THREE.MeshStandardMaterial.

2 Likes
3

Perfect. Thank you!

4

Worked for me too. Thanks for this solution!

1 Like