Search code examples
javascriptthree.jsshaderautodesk-forge

Opacity of material in THREE.js

I'm using lambert shader and in the exaple it sets the material like this:

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

Before I had a simple shader that set the material like this where I could control the alpha:

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

But it looks like the lambert shader doesn't have a color vector4.

Any idea on how to control the alpha?

I use the same example for the lambert shader from here: https://forge.autodesk.com/blog/forge-viewer-custom-shaders-part-2

And the simple shader was from: http://adndevblog.typepad.com/cloud_and_mobile/2017/01/forge-viewer-custom-shaders-part-1.html

Solution

  • you will have to use the material opacity. be sure to mark it as transparent first:

    this.material.uniforms.transparent = true;

    then set an opacity:

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

    if you already rendered the scene, you might have to mark it to update:

    this.material.uniforms.needsUpdate = true;

    for textures use .alphaMap