如何使 Three.js ShaderMaterial 渐变透明

Question

我想使双色渐变透明。在下图中你可以看到。

左边是最终的网格，右边是一个面。我正在尝试使用顶点着色器和片段着色器来实现这一点。但不幸的是，我无法弄清楚。希望有人能帮助我

到目前为止我有这个：

 var custom3Material = new this.$three.ShaderMaterial({
                 uniforms: {
                   vlak3color1: { value: new this.$three.Color('#31c7de')},
                   vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')},
                   positionVlak3: {value: -3.5},
                 },
                 vertexShader: `
                
                   varying vec3 vUv; 

                   void main() {
                     vUv = position; 

                  
                     gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
                   }
                 `,
                 fragmentShader: `
                    
                  uniform vec3 vlak3color1;
                   uniform vec3 vlak3color2;
                   uniform float positionVlak3;

                
                   varying vec3 vUv;
                  
                   void main() {     
                    
                   gl_FragColor = vec4(mix(vlak3color1, vlak3color2, vUv.y-positionVlak3), 1);
                   }
               `,
              });

我希望之后可以调整2种颜色之间的位置和透明度

提前致谢！

Answer 1

您必须通过在其属性中添加 transparent: true 使您的 material 透明。
vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')} 令人困惑。你为什么要尝试制作 vec2 类型的颜色？只需摆脱类型，您不需要它。 Three.js 看到颜色时会自动识别类型。
gl_FragColor 的第四个值是 alpha。现在您将其设置为常量 1，因此您将获得完全不透明的颜色。尝试使用 smoothstep():

void main() {
    // y < 0 = transparent, > 1 = opaque
    float alpha = smoothstep(0.0, 1.0, vUv.y);

    // y < 1 = color1, > 2 = color2
    float colorMix = smoothstep(1.0, 2.0, vUv.y);

    gl_FragColor = vec4(mix(vlak3color1, vlak3color2, colorMix), alpha);
}

如何使 Three.js ShaderMaterial 渐变透明

How to make Three.js ShaderMaterial gradient to transparent

vertex-shader

fragment-shader

three.js

vue.js