Three.js教程：自定義頂點(diǎn)UV坐標(biāo)

推薦：將NSDT場(chǎng)景編輯器加入你的3D工具鏈

其他工具集： NSDT簡(jiǎn)石數(shù)字孿生

學(xué)習(xí)自定義頂點(diǎn)UV坐標(biāo)之前，首先保證你對(duì)BufferGeometry的頂點(diǎn)數(shù)據(jù)、紋理貼圖都有一定的理解。

頂點(diǎn)UV坐標(biāo)的作用是從紋理貼圖上提取像素映射到網(wǎng)格模型Mesh的幾何體表面上。

瀏覽器控制臺(tái)查看threejs幾何體默認(rèn)的UV坐標(biāo)數(shù)據(jù)。

const geometry = new THREE.PlaneGeometry(200, 100); //矩形平面 // const geometry = new THREE.BoxGeometry(100, 100, 100); //長(zhǎng)方體 // const geometry = new THREE.SphereGeometry(100, 30, 30);//球體 console.log('uv',geometry.attributes.uv); 復(fù)制代碼

頂點(diǎn)UV坐標(biāo)可以在0~1.0之間任意取值，紋理貼圖左下角對(duì)應(yīng)的UV坐標(biāo)是(0,0)，右上角對(duì)應(yīng)的坐標(biāo)(1,1)

頂點(diǎn)UV坐標(biāo)geometry.attributes.uv和頂點(diǎn)位置坐標(biāo)geometry.attributes.position是一一對(duì)應(yīng)的，

UV頂點(diǎn)坐標(biāo)你可以根據(jù)需要在0~1之間任意設(shè)置，具體怎么設(shè)置，要看你想把圖片的哪部分映射到Mesh的幾何體表面上。

/**紋理坐標(biāo)0~1之間隨意定義*/ const uvs = new Float32Array([     0, 0, //圖片左下角     1, 0, //圖片右下角     1, 1, //圖片右上角     0, 1, //圖片左上角 ]); // 設(shè)置幾何體attributes屬性的位置normal屬性 geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2個(gè)為一組,表示一個(gè)頂點(diǎn)的紋理坐標(biāo) 復(fù)制代碼

獲取紋理貼圖左下角四分之一部分的像素值

const uvs = new Float32Array([     0, 0,      0.5, 0,      0.5, 0.5,      0, 0.5,  ]);

作者：yvette
鏈接：https://juejin.cn/post/7223187660470517816
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。