UV 可视化
12 / 30
将 UV 坐标直接转为颜色值，便于理解 vUv 的颜色映射。
vUv 是顶点着色器传入的归一化坐标，范围是 0 到 1。把它直接映射成颜色，就能「看见」UV 坐标长什么样。
怎么把 UV 变成颜色
vec3 需要三个分量（红、绿、蓝），而 vUv 只有两个（x、y）。补一个固定的蓝色值就够了：
这样：
vUv.x控制红色：左边红 = 0，右边红 = 1vUv.y控制绿色：下边绿 = 0，上边绿 = 1- 蓝色固定为 0
结果是一张四角颜色不同的色块图，这就是 UV 坐标的「地图」。
四个角的颜色
| 位置 | vUv | 颜色 |
|---|---|---|
| 左下角 | (0.0, 0.0) | 黑色 |
| 右下角 | (1.0, 0.0) | 红色 |
| 左上角 | (0.0, 1.0) | 绿色 |
| 右上角 | (1.0, 1.0) | 黄色 |
练习
练习代码的 color 是 vec3(0.0)（黑色）。修改它，用 vUv 输出上面描述的 UV 颜色图。
答案解析
vec3(vUv, 0.0) 把 vUv（一个 vec2）展开成 vec3 的前两个分量，第三个分量（蓝色）设为 0。
这是 GLSL 的构造函数简写——你可以用更小的向量拼接成更大的向量：
vec3(vUv, 0.0)=vec3(vUv.x, vUv.y, 0.0)
试试改成 vec3(0.0, vUv) 或 vec3(vUv.y, 0.0, vUv.x)，看颜色怎么变。