Three.js教程：自定义顶点UV坐标

推荐：将NSDT场景编辑器加入你的3D工具链

https://ted.sinoccdc.cn/

其他工具集： NSDT简石数字孪生

自定义顶点UV坐标
学习自定义顶点UV坐标之前，首先保证你对BufferGeometry的顶点数据、纹理贴图都有一定的理解。
#顶点UV坐标的作用
顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。
浏览器控制台查看threejs几何体默认的UV坐标数据。
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坐标范围
顶点UV坐标可以在0~1.0之间任意取值，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)

#自定义顶点UVgeometry.attributes.uv
顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的，
UV顶点坐标你可以根据需要在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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。