|
|
相关文章推荐
|
任性的冰淇淋 · 【文章精选】李晚莲、曾锋丨公共突发事件网络谣 ...· 3 月前 · |
|
|
安静的黄瓜 · 清洁设备十大品牌-抖音· 1 年前 · |
|
|
重感情的热水瓶 · 2/23竞彩足球推荐；欧联杯赛事分析三串一实 ...· 1 年前 · |
|
|
捣蛋的硬盘 · 里程碑式的协议将在中国保护100个欧洲地理标 ...· 1 年前 · |
如何使Three.js ShaderMaterial梯度变为透明
问
如何使Three.js ShaderMaterial梯度变为透明
EN
EN
Stack Overflow用户
提问于
2020-07-29 18:37:38
回答 1
查看 1.6K
关注 0
票数 0
我想让双色渐变透明。在下面的图片中你可以看到。
左边是最后一个网格，右边是一个单一的面。我试着用一个顶点着色器和一个片段着色器来实现这一点。但不幸的是，我搞不懂。希望有人能帮我
到目前为止，我有这样的看法：
代码语言：
javascript
复制
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);
});我希望以后能调整两种颜色之间的位置和透明度。
提前感谢！
EN
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-29 20:47:50
attributes.
-
vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')}
-
您必须通过将
transparent: true添加到它的transparent: true来使您的材料变得透明，这是令人困惑的。你为什么要做一个vec2类型的颜色？只要摆脱这种类型，你就不需要了。当Three.js看到它是一个颜色时，它会自动识别这个类型。
，
-
，
gl_FragColor的第四个值是alpha。现在你把它设置为一个常数1，所以你得到了一个完全不透明的颜色。尝试用smoothstep()
使它从0-1褪色。
代码语言：
javascript
复制
void main() {
// y < 0 = transparent, > 1 = opaque
float alpha = smoothstep(0.0, 1.0, vUv.y);
推荐文章
|
|
安静的黄瓜 · 清洁设备十大品牌-抖音 1 年前 |