Three.js教程：自定義頂點UV坐標

推薦：將NSDT場景編輯器加入你的3D工具鏈

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

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

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

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

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

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

頂點UV坐標geometry.attributes.uv和頂點位置坐標geometry.attributes.position是一一對應的，

UV頂點坐標你可以根據(jù)需要在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個為一組,表示一個頂點的紋理坐標 復制代碼

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

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

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