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/

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室7 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室8 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀10 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js