WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com