The transparency level of materials in THREE.js

Question

When using the lambert shader, I encountered an issue with setting the material. In the example provided, it sets the material as follows:

this.material.uniforms.emissive.value = new THREE.Color(
  Math.random(),
  Math.random(),
  Math.random());

Prior to this, I was using a simple shader that allowed me to control the alpha channel in the color like this:

this.material.uniforms.color.value = new THREE.Vector4(
  Math.random(),
  Math.random(),
  Math.random(),
  0.3)

However, it seems the lambert shader does not support a color vector4.

Does anyone have suggestions on how to manipulate the alpha channel?

The example I followed for the lambert shader can be found here:

And the reference for the simple shader was from:

Answer 1

Answer №1

To achieve transparency in your material, you need to utilize the opacity property. Make sure you set it as transparent initially:

this.material.uniforms.transparent = true;

Next, specify the desired opacity level:

this.material.uniforms.opacity.value = 0.3;

If you have already rendered the scene, ensure to flag it for updating:

this.material.uniforms.needsUpdate = true;

For textures with transparency, use .alphaMap

Answer 2

To achieve transparency in your material, you need to utilize the opacity property. Make sure you set it as transparent initially:

this.material.uniforms.transparent = true;

Next, specify the desired opacity level:

this.material.uniforms.opacity.value = 0.3;

If you have already rendered the scene, ensure to flag it for updating:

this.material.uniforms.needsUpdate = true;

For textures with transparency, use .alphaMap