基于three.js的shader入门教程 五

threejs交流群511163089

UV贴图

模型长的五颜六色的，一般都不是靠每个顶点带个color的attribute来的

而是用的贴图

那么贴图呐 图 是一个平面 坐标只有x和y 这就构成UV了 u就是x v就是y

怎么贴 每个顶点还是带attribute 但是只需要带uv带上一个的xy这样在渲染这个顶点的时候 能在图上取xy处的颜色作为渲染色

THREE里头你的模型如果带了UV这个东东 直接内置在顶点着色器了 vec2 uv

如果你的geometry的attribute没有uv那你得自己构造uv，一般添加uv和贴图这个操作都是建模软件里搞

一个uniform把图传进去再进片源着色器取色就可以使用了

uniform sampler2D tex;
varying vec2 vUv;
void main()
{
    gl_FragColor=texture2D(tex,vUv);
}

js里
THREE.Texture或者TextureLoader都能弄出贴图来