水平渐变
7 / 30
使用 vUv.x 与 mix() 创建从左到右的基础渐变。
用 vUv.x 作为 mix 的因子，创建从左到右的两色渐变。
渐变因子
mix(a, b, t) 里的 t 决定颜色偏向哪边。把 vUv.x 当 t，左边是颜色 a，右边是颜色 b：
示例颜色
代码里两种颜色是：
a = vec3(0.15, 0.2, 0.95)— 深蓝色b = vec3(1.0, 0.6, 0.15)— 橙色
左边是深蓝，右边是橙，中间平滑过渡。
试着改一改
修改 a 和 b 试试不同的颜色组合：
| 组合 | a | b |
|---|---|---|
| 紫→青 | vec3(0.5, 0.0, 1.0) | vec3(0.0, 0.9, 0.9) |
| 黑→白 | vec3(0.0) | vec3(1.0) |
| 红→黄 | vec3(1.0, 0.0, 0.0) | vec3(1.0, 1.0, 0.0) |
练习
练习代码里因子 t 被设成了 0.0（画面全是颜色 a）。把 t 改成 vUv.x，让颜色从左到右渐变。
答案解析
就改这一行。vUv.x 在左边是 0，右边是 1，mix 用它在两色间平滑插值。
把 t = vUv.x 改成 t = 1.0 - vUv.x 试试，渐变方向会反过来。