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

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

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

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

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

瀏覽器控制臺查看threejs幾何體默認的UV坐標數據。

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

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

頂點(diǎn)UV坐標geometry.attributes.uv和頂點(diǎn)位置坐標geometry.attributes.position是一一對應的，

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

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

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

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

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