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/

相关推荐
智码看视界30 分钟前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
AndrewHZ4 小时前
【3D算法技术】blender中,在曲面上如何进行贴图?
算法·3d·blender·贴图·三维建模·三维重建·pcg
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
码上暴富5 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
伍哥的传说6 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达6 小时前
Lodash方法总结
开发语言·前端·javascript