6.Three.js贴图与uv映射(uv坐标)理解和实践

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映射，构建网格模型时赋予材质数组。

视频演示地址：https://www.bilibili.com/video/BV1GHyVYGEcB/