[Vuejs]-How to make Three.js ShaderMaterial gradient to transparent

by

3👍

✅

  1. You must make your material transparent by adding transparent: true to its attributes.
  2. vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')} is confusing. Why are you trying to make a color of type vec2? Just get rid of the type, you don’t need it. Three.js automatically recognizes the type when it sees it’s a Color.
  3. The fourth value of gl_FragColor is the alpha. Right now you’re setting it to a constant 1, so you’re getting a fully-opaque color. Try to make it fade from 0 – 1 with 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);
}
👤M –

Leave a comment