基於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都能弄出貼圖來

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章