关于编辑器:Threejs教程自定义顶点UV坐标

举荐：将 NSDT 场景编辑器退出你的 3D 工具链其余工具集：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, 

]);