移动端是什么意思_潍坊最好的建设公司_怎么做网站排名_网络推广平台软件

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/