How can i change opacity of my GLTF?

Questions
1

Hi; i’m looking to set opacity to a gltf file… is there a way for that ?
Thank’s a lot !

new THREE.GLTFLoader().load('model/scene.gltf', result => { 
  model = result.scene.children[0]; 
  model.position.set(0,5.5,-2);

  model.traverse(n => { if ( n.isMesh ) {
    n.castShadow = true; 
    n.receiveShadow = true;
    if(n.material.map) n.material.map.anisotropy = 1; 
  }});

  scene.add(model);

  animate();
});
2

Hi :slight_smile:
Opacity is a property of a material. You can change mesh.material.opacity to any value between 0.0 and 1.0.
However if your material uses transparency, remember to also set material.transparent = true.

Edit: I see now, that model is probably just a group. In that case you have to find each mesh, you want to set opacity to, and edit it’s material, like I wrote above.

2 Likes
3

:smile: Thnk’s a lot

I’m new to javascript; i just followed a good tutorial ^^
i’ve black screen when i write:

    new THREE.GLTFLoader().load('model/scene.gltf', result => { 
  model = result.scene.children[0]; 
  model.position.set(0,5.5,-2);
  model.material.opacity(0.5);

  model.traverse(n => { if ( n.isMesh ) {
    n.castShadow = true; 
    n.receiveShadow = true;
    if(n.material.map) n.material.map.anisotropy = 1;

  }});

  scene.add(model);

  animate();
});
4

While tinkering with the model is obviously fine, I’d recommend to first set it up to how you want it to look in an external 3D application (for example in Blender). Looking at your code, I can’t really tell which object you want to be transparent.
If you console.log( gltf.scene ), you will be able to inspect your model’s all children objects.

In any case, once you find the mesh you want to make transparent, instead of:

mesh.material.opacity(0.5);

you should do:

mesh.material.opacity = 0.5;
mesh.material.transparent = true;

5

@QuentinG You probably get a black screen because of a runtime error. Certain objects in the result.scene hierarchy are of type THREE.Group or THREE.Object3D which have no material property. Hence, you have to define opacity in your traverse callback and only if material exists.

6

Ok ok…
For the moment i’ve only my 3D object with 2 lights and no material (i’m suppose)
So my 3D object is white.
If i understand i need to make transparency in blender, or can i set a mesh material and change opacity after ?

new THREE.GLTFLoader().load('model/parc_planar50_material.glb', result => { 
  model1 = result.scene.children[0]; 
  model1.position.set(-10,0,0);
  scene.add(model1);
 animate();
});
7

First of all, please tell us if the screen is still black. Are there any errors in the console? What do they say? Do you get a visual result if instead of loading a model, you add just a normal sphere?

let sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 1 ), new THREE.MeshStandardMaterial() );
scene.add( sphere );

In Three.js it’s impossible to have a mesh without a material. The GLTFLoader creates Three.js materials and assigns them to your models automatically during loading. You can easily edit the material, like I mentioned in the previous post, or assign a new one if you want to.

You can achieve transparency both in Blender and in your app. The choice is up to you :slight_smile:

8

Thank’s a lot ! :smile:
Finaly i did it in blender :smile:

  • create with blender a material with small alpha value;
  • Export in glb with materials;
  • add in the script with:

new THREE.GLTFLoader().load(‘model/opacity3.glb’, result => {
model1 = result.scene.children[0];
model1.position.set(-10,0,0);
model1.material.opacity = 0.1;
model1.material.transparent = true;

scene.add(model1);
animate();
});

1 Like