6.Three.js贴图与uv映射(uv坐标)理解和实践
贴图是构建计算机三维物体的重要组成部分，通过加入贴图，才能使Three.js构造的三维物体更具真实性。
下面我们将建立一个简单的面，并尝试在面上贴上贴图，实现如下效果：
1.uv映射
什么是uv映射呢？试想我们如果想要在物体上贴上图片，我们是不是需要知道图片应该对其物体的边边角角正着贴，还是贴到正中央，还是把图片裁剪一部分后贴呢？因而我们需要存储如何设置贴图坐标与面坐标的一些映射信息，这个叫做uv映射。
下面是一张图片的uv坐标：
之前也有了解过，一个geometry需要存储顶点信息，而且需要存储面信息才能正确构造一个平面（5.Three.js坐标轴与绘制自定义几何体-CSDN博客），下面是一个平面的顶点的face索引信息：
在这个正方形中，有两个三角面 new THREE.Face3(0,1,2)，和new THREE.Face3(0,2,3)，这两个三角面拼接成一个平面（更复杂的平面结构也都是由很多三角面拼接而成的）。
我们在贴图的时候，就需要把图片的uv坐标和这些三角面角点一一对应，这种对应关系就是uv映射。
我们可以想象把图片和这个三角面重叠在一起，是不是 0角点，对应（0,1）图片uv坐标；1角点对应（0,0）图片uv坐标；2角点对应（1,0）图片uv坐标；3角点对应（1,1）图片uv坐标。
这时候我们按照一个个三角面进行贴图，那么三角面和uv坐标映射关系是：
faces = [
new THREE.Face3(0, 1, 2),
new THREE.Face3(0, 2, 3),
];
faceVertexUvs = [
[
[new THREE.Vector2(0, 1),new THREE.Vector2(0, 0),new THREE.Vector2(1, 0)],
[new THREE.Vector2(0, 1),new THREE.Vector2(1, 0),new THREE.Vector2(1, 1)]
],
]
2.构造贴图
我们成功设置正确的贴图映射关系后，只需在材质的map属性中，引入图片，图片就会按照我们设置的uv映射进行贴图啦,
创建面和贴图的代码如下：
//1.1：创建顶点，加入到geometry中
let geometry = new THREE.Geometry();
let vertices = [
new THREE.Vector3(0, 200, 0),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(200, 0, 0),
new THREE.Vector3(200, 200, 0),
];
geometry.vertices = vertices;
//1.2：使用顶点来创建几何体的各个三角面,加入到geometry中
let faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(0, 2, 3)];
geometry.faces = faces;
// 1.3：计算法向量
geometry.computeFaceNormals(); //计算法向量 这决定了对光做出的反应
//构建uv映射
geometry.faceVertexUvs = [
[
[
new THREE.Vector2(0, 1),
new THREE.Vector2(0, 0),
new THREE.Vector2(1, 0),
],
[
new THREE.Vector2(0, 1),
new THREE.Vector2(1, 0),
new THREE.Vector2(1, 1),
],
],
];
let material = new THREE.MeshLambertMaterial({
opacity: 0.8,
// color:"#ffffff",
side: THREE.DoubleSide,
transparent: true,
map: new THREE.TextureLoader().load("./img/test1.jpeg"),
});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
那如果在three.js创建的正方体（BoxGeometry）中，每个面都贴上一张的图片呢？原理也是相同的。思路：查看正方体的顶点和faces信息，重新构建它的uv映射，构建网格模型时赋予材质数组。