Three.js 几何体顶点纹理坐标UV

Question

Three.js 几何体顶点纹理坐标 UV

本篇文章偏向于总结，建议阅读之前先对纹理贴图的映射、BufferGeometry、Geometry 等相关知识有一定的了解，所以这里关于纹理映射不做深入介绍

通过 Three.js 的一些几何体API创建一个球体、立方体或圆柱体会自动生成几何体用于纹理映射的uv坐标。如果你直接调用基类BufferGeometry或Geometry创建一个几何体肯定是空的几何体，也就是没有顶点数据，没有顶点数据自然就没有顶点纹理坐标数据。

关键词：纹理映射、顶点纹理坐标、.attributes.uv、.attributes.uv2、.faceVertexUvs[0]、光照贴图

查看纹理映射的uv坐标

const geometry = new THREE.BoxGeometry(7, 6, 8);
console.log('几何体第一组uv坐标',geometry.faceVertexUvs[0]);

const geometry = new THREE.BoxBufferGeometry(7, 6, 8);
console.log('几何体第一组uv坐标',geometry.attributes.uv);

光照贴图添加阴影(两组纹理坐标uv、uv2)

颜色贴图、法线贴图、高光贴图、金属度贴图...共用一组纹理坐标uv，用来设置阴影的光照贴图lightMap使用另外一组纹理坐标uv2进行映射。对于BufferGeometry和Geometry两类几何体设置两组UV坐标的方式不同，具体参考下面代码。

对于几何体Geometry通过.faceVertexUvs属性包含相应的顶点纹理坐标数据，.faceVertexUvs的属性值是数组，一组纹理坐标作为该属性值数组的一个元素出现。调用three.js的几何体API一般默认创建一组用于颜色等贴图映射的纹理坐标.faceVertexUvs[0]。.faceVertexUvs[0]也是一个数组，.faceVertexUvs[0]的元素都是使用Three.js的二维向量对象Vector2表示的顶点纹理坐标xy。

通过.faceVertexUvs[1]=.faceVertexUvs[0]设置几何体第二组用于光照贴图映射的纹理坐标uv2。

//创建一个平面几何体作为投影面
const plane = new THREE.PlaneGeometry(300, 200);
plane.faceVertexUvs[1] = plane.faceVertexUvs[0];
const texLoader = new THREE.TextureLoader();
const planeMat = new THREE.MeshLambertMaterial({
  color: 0x999999,
  // 设置光照贴图
  lightMap:texLoader.load('shadow.png'),
  lightMapIntensity:0.5,//烘培光照的强度. 默认 1.
});
const mesh = new THREE.Mesh(plane, planeMat);

对于缓冲区类型几何体BufferGeometry通过.attributes.uv和.attributes.uv2两个属性分别定义两组顶点纹理坐标，如果BufferGeometry和Geometry相互转化，.faceVertexUvs[0]与.attributes.uv对应，.faceVertexUvs[1]与.attributes.uv2对应。

一般三维建模软件导出的几何体都是BufferGeometry类型的几何体，自然顶点的纹理坐标都是.attributes.uv和.attributes.uv2这种形式。

const plane = new THREE.PlaneBufferGeometry(300, 200);
geometry.attributes.uv2 = geometry.attributes.uv