Changing the transparency of a specific texture of a model

Hey Everyone,

I relatively new to JS but I have been able to create a project that displays a 3d model and orbit around it which is a good start. But the part that I’m having trouble with is targeting a specific material within my 3D model and applying a transparent effect to it.

I have been able to work out the names of the parts that I am wanting to target, but I have absolutely no idea how to even start to code this.

Any help would be greatly appreciated.

First, you have to identify the object in your asset that should be affected by your change. Sometimes it’s the entire model, sometimes it’s a specific part (e.g. head of a character model). When authoring the model (e.g. in Blender), it’s best to provide unique names to nodes so you can easily select them via Object3D.getObjectByName().

If you have selected the right object, you can then change transparency by setting the transparent property to true. You can then modulate the opacity property to define the degree of transparency.

When using transparency, it’s sometimes recommended to set depthWrite to false, too. But this depends on the use case.

Thank you for your help, that really is a big help it gives me a place to start.

1 Like