Set opacity with custom blending

Questions
,
1

I use custom blending for a shape and would like to fade it out.

I’ve tried setting the opacity, but it doesn’t work if I use a custom blendmode. How could I do it?

This is the material:

        var material = new THREE.MeshBasicMaterial({
          color: 0x171644,
          side: THREE.DoubleSide,
          depthWrite: false,
          transparent: true,
          opacity: 0.1
        });

        material.blending = THREE.CustomBlending;
        material.blendEquation = THREE.AddEquation;
        material.blendSrc = THREE.OneMinusDstColorFactor;
        material.blendDst = THREE.OneMinusDstColorFactor;

thanks!

2

You are using a blend factor that does not allow the evaluation of an alpha value (meaning the opacity). I suggest you closely study the semantics of the various blend factors. The following official example might help to do so:

https://threejs.org/examples/webgl_materials_blending_custom

Besides, the book Professional WebGL Programming: Developing 3D Graphics for the Web provides a very good chapter about blending in WebGL (Chapter 8).

3

I will look at this.Thanks!