我想使两个颜色的渐变透明。在下面的图像中,您可以看到。
左为最终网格,右为单个面。我正在尝试通过顶点着色器和片段着色器来实现这一点。但不幸的是,我无法弄清楚。希望有人可以帮助我
到目前为止,我已经拥有了
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);
}
`,
});
我希望以后可以调整两种颜色和透明度之间的位置
谢谢!
答案 0 :(得分:3)
transparent: true
使材料透明。vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')}
令人困惑。您为什么要制作vec2
类型的颜色?只需摆脱类型,您就不需要它。 Three.js在看到颜色时会自动识别该类型。gl_FragColor
的第四个值是字母。现在,您将其设置为常数1
,因此您将获得完全不透明的颜色。尝试使用smoothstep()
使它从0-1消失: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);
}