Three.js 几何体顶点纹理坐标UV - 文章教程

Three.js 几何体顶点纹理坐标UV

发布于 2021-10-05 字数 2939 浏览 836 评论 0

Three.js 几何体顶点纹理坐标 UV

本篇文章偏向于总结,建议阅读之前先对纹理贴图的映射、BufferGeometryGeometry 等相关知识有一定的了解,所以这里关于纹理映射不做深入介绍

通过 Three.js 的一些几何体API创建一个球体、立方体或圆柱体会自动生成几何体用于纹理映射的uv坐标。如果你直接调用基类BufferGeometryGeometry创建一个几何体肯定是空的几何体,也就是没有顶点数据,没有顶点数据自然就没有顶点纹理坐标数据。

关键词:纹理映射、顶点纹理坐标、.attributes.uv.attributes.uv2.faceVertexUvs[0]、光照贴图

查看纹理映射的uv坐标

const geometry = new THREE.BoxGeometry(7, 6, 8);
console.log('几何体第一组uv坐标',geometry.faceVertexUvs[0]);
const geometry = new THREE.BoxBufferGeometry(7, 6, 8);
console.log('几何体第一组uv坐标',geometry.attributes.uv);

光照贴图添加阴影(两组纹理坐标uv、uv2)

颜色贴图、法线贴图、高光贴图、金属度贴图…共用一组纹理坐标uv,用来设置阴影的光照贴图lightMap使用另外一组纹理坐标uv2进行映射。对于BufferGeometryGeometry两类几何体设置两组UV坐标的方式不同,具体参考下面代码。

对于几何体Geometry通过.faceVertexUvs属性包含相应的顶点纹理坐标数据,.faceVertexUvs的属性值是数组,一组纹理坐标作为该属性值数组的一个元素出现。调用three.js的几何体API一般默认创建一组用于颜色等贴图映射的纹理坐标.faceVertexUvs[0].faceVertexUvs[0]也是一个数组,.faceVertexUvs[0]的元素都是使用Three.js的二维向量对象Vector2表示的顶点纹理坐标xy。

通过.faceVertexUvs[1]=.faceVertexUvs[0]设置几何体第二组用于光照贴图映射的纹理坐标uv2。

//创建一个平面几何体作为投影面
const plane = new THREE.PlaneGeometry(300, 200);
plane.faceVertexUvs[1] = plane.faceVertexUvs[0];
const texLoader = new THREE.TextureLoader();
const planeMat = new THREE.MeshLambertMaterial({
  color: 0x999999,
  // 设置光照贴图
  lightMap:texLoader.load('shadow.png'),
  lightMapIntensity:0.5,//烘培光照的强度. 默认 1.
});
const mesh = new THREE.Mesh(plane, planeMat);

对于缓冲区类型几何体BufferGeometry通过.attributes.uv.attributes.uv2两个属性分别定义两组顶点纹理坐标,如果BufferGeometryGeometry相互转化,.faceVertexUvs[0].attributes.uv对应,.faceVertexUvs[1].attributes.uv2对应。

一般三维建模软件导出的几何体都是BufferGeometry类型的几何体,自然顶点的纹理坐标都是.attributes.uv.attributes.uv2这种形式。

const plane = new THREE.PlaneBufferGeometry(300, 200);
geometry.attributes.uv2 = geometry.attributes.uv

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
23906 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0