Three 之 three.js （webgl）shader 中 Texture 贴图 uv 坐标的相关简单说明，并简单测试 UV 重复旋转偏移效果

Three 之 three.js （webgl）shader 中 Texture 贴图 uv 坐标的相关简单说明，并简单测试 UV 重复旋转偏移效果

目录

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three 开发网页 3D 场景，three.js （webgl）shader 中 贴图 uv 坐标的相关说明，并简单测试UV旋转偏移效果，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

二、纹理坐标系统

uv 其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1；
u：图片在显示器水平的坐标
v：垂直方向
w：垂直于显示器表面
一般情况只是在表面贴图，就涉及不到w，所以常称为uv。

uv 纹理坐标设定与贴图规则

当opengl对一个四方形进行贴图时，会定义纹理贴图坐标，一串数组。

当纹理映射启动后绘图时，必须为OpenGL ES提供其他数据，即顶点数组中各顶点的纹理坐标。纹理坐标定义了图像的哪一部分将被映射到多边形。它的工作方式有点奇怪。

下面看下在android平台下Opengl纹理系统坐标，左下角为原点。

三、纹理贴图（代码实例 Texture repeat 重复）

1、使用纹理对象贴图

Texture ThreeJS本身做了封装，贴图十分方便，你可以在上直接查看教程或对象方法。

    const w=h=64,textureW=textureH=64;
    var geometry = new THREE.PlaneBufferGeometry(w, h); //矩形平面
    // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
    var textureLoader = new THREE.TextureLoader();
    // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
    textureLoader.load('./p.jpg', function (texture) {
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      // texture.repeat.set(2, 2);
      var material = new THREE.MeshLambertMaterial({
        map: texture, //设置颜色贴图属性值
      }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    //纹理贴图加载成功后，调用渲染函数执行渲染操作
    render();

其中：

加载的原图

加载后处理后的效果

代码说明：

纹理对象Texture本身是有UV旋转偏移方法的，但是如果调整纹理UV，用本身自带方法就需要频繁重新贴图，详细解析如下：

2、UV坐标与顶点坐标的关系

原始贴图，它的纹理坐标和顶点坐标对应情况，它们是一一对应的，大概是下图绘制的效果

原图

绘制示意图

四、简单 Texture UV 旋转偏移

通过旋转和偏移的值构建一个矩阵，用ThreeJS自带的矩阵库，因为它只有三维和四维的，所以把uv坐标写成了三维，即齐次坐标；

通过取得BufferGeometry的顶点坐标，再去计算原始的UV坐标。不过要注意的只有是或继承BufferGeometry 的对象才能取得uv、position信息；

最后通过矩阵转换每一点UV坐标，设置为BufferGeometry的UV。

      //geometry可以通过mesh对象取得，pos是保存顶点坐标的数组
      let pos = geometry.getAttribute("position").array;

      
      let uv = [];
      const startP = [pos[0],pos[1]];
      //UV偏移不能太大，一般在0到1之间
      const offsetU = 0.05,offsetV = 0.02,rotation = Math.PI/4;
      let m = new THREE.Matrix3();
      m.setUvTransform( -offsetU, -offsetV, 1, 1, rotation, 0, 0 );
      
      //取得正常情况下的UV坐标
      for (let index = 0; index*3 < pos.length; index++) {
        if(index === 0) uv.push(...[0,0,1]);
        else{
          const currentP = [pos[index*3],pos[index*3+1]]
          uv.push(...[Math.abs((currentP[0]-startP[0])/w),Math.abs((currentP[1]-startP[1])/h),1]);
        }
      }

      let uvAttr = new THREE.BufferAttribute(new Float32Array(uv) , 3) ;
      uvAttr = m.applyToBufferAttribute (uvAttr);
      geometry.attributes.uv = uvAttr;

这么简单的代码就可以实现UV旋转偏移，但是我们一般会把它封装成函数，通过页面上的Input调整offsetU, offsetV，rotation的值。上面几行的代码，效果如下：

原图

处理后的图

四、其他

1、Texture 在 Three js 中的属性 和 方法

属性

Image对象可以包括图像 (比如 PNG, JPG, GIF, DDS), 视频 (e.g., MP4, OGG/OGV),

或者六幅图像的集合用于一个立方体贴图。 要使用视频作为一个纹理，

你需要把一个HTML5视频元素作为纹理图像的源，

并在视频播放时不断更新这个纹理-VideoTexture类会自动处理。| |mipmap|用户指定的mipmap数组（可选）| |mapping|如何将图像应用到对象。默认为 UV贴图（THREE.UVMapping）类型，这里U,V 坐标用来应用映射，要求是单个纹理。
其他类型包括：
THREE.CubeReflectionMapping：立方体反射映射
THREE.CubeRefractionMapping：立方体折射映射
THREE.EquirectangularReflectionMapping：圆柱反射映射
THREE.EquirectangularRefractionMapping：圆柱折射映射
THREE.SphericalReflectionMapping：球面反射映射| |wrapS|缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元（texels）的外边界。

THREE.ClampToEdgeWrapping：夹边。超过1.0的值被固定为1.0。超过1.0的其它地方的纹理，

沿用最后像素的纹理。用于当叠加过滤时，需要从0.0到1.0精确覆盖且没有模糊边界的纹理。

其他两个选项是：
THREE.RepeatWrapping：平铺重复。超过1.0的值都被置为0.0。纹理被重复一次。

在渲染具有诸如砖墙之类纹理的物体时，如果使用包含一整张砖墙的纹理贴图会占用较多的内存，

通常只需载入一张具有一块或多块砖瓦的较小的纹理贴图，

再把它按照重叠纹理寻址模式在物体表面映射多次，就可以达到和使用整张砖墙贴图同样的效果。
THREE.MirroredRepeatWrapping：镜像重复。每到边界处纹理翻转，意思就是每个1.0 u

或者v处纹理被镜像翻转。| |wrapT|缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元（texels）的外边界。

其他两个选项是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。
注意: 平铺图像纹理仅在图像尺寸是2的幂次方（2，4，8，16，32，64，128，256，512，

1024，2048，…）时工作。每个维度的值不一定是相同的，但每一个维度都必须是2的幂次方。

这是WebGL的限制，不是Three.js的。| |magFilter|该属性定义当一个纹理单元（texel）覆盖多个像素点时纹理如何采样。

缺省为 THREE.LinearFilter，表示获取4个最近的纹理单元执行双向线性插值计算(显示效果好)。

另外的选项是 THREE.NearestFilter, 表示使用最近的texel(性能优)。| |minFilter|该属性定义当一个纹理单元（texel）不足以覆盖单个像素点时纹理如何采样。缺省为 THREE.LinearMipMapLinearFilter, 表示使用多级纹理贴图（mipmapping）以及一个三线性滤波器。
其他选项是：
THREE.NearestFilter：最近滤镜。在纹理基层上执行最邻近过滤。
THREE.NearestMipMapNearestFilter：选择最临近的mip层，并执行最临近的过滤。
THREE.NearestMipMapLinearFilter：在mip层之间执行线性插补，并执行最临近的过滤。
THREE.LinearFilter：在纹理基层上执行线性过滤。
THREE.LinearMipMapNearestFilter：选择最临近的mip层，并执行线性过滤。
THREE.LinearMipMapLinearFilter：在mip层之间执行线性插补，并执行线性过滤。| |anisotropy|表示纹理的各向异性。沿纹理单元密度最高方向的轴线所取样本数。默认情况下，这个值为1。

较高的值比基础MipMap要更清晰，但需要更多的采样。

使用renderer.getMaxAnisotropy()方法来找到GPU最大有效各向异性值；

这个值通常是2的幂次方。| |format|缺省纹理格式为THREE.RGBAFormat。其他格式有：
THREE.UnsignedByteType：无符号8位整形值(1个字节)
THREE.ByteType：带符号8位整形值(1个字节)
THREE.ShortType：带符号16位整形值(2个字节)
THREE.UnsignedShortType：无符号16未整形值(2个字节)
THREE.IntType：带符号32位整形值(4个字节)
THREE.UnsignedIntType：无符号32位整形值(4个字节)
THREE.FloatType：单精度浮点型(4个字节)
THREE.HalfFloatType：半浮点型| |offset|在U和V方向上，纹理在模型表面上重复绘制时的偏移。通常范围是0.0 到 1.0。注意：

offset属性是一个便捷修饰符，仅影响Texture对模型上第一组UV的应用。

如果纹理用作需要额外UV集的贴图（例如，大多数库存材料的aoMap或lightMap），

则必须手动分配这些UV以获得所需的偏移量。| |repeat|纹理在整个表面上重复多少次，在每个方向U和V上。如果在任一方向上repeat设置为大于1，

则相应的Wrap参数也应设置为 THREE.RepeatWrapping或THREE.MirroredRepeatWrapping

以实现所需的平铺影响。注意： repeat属性是一个便捷修饰符，

仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图

（例如，大多数库存材料的aoMap或lightMap），则必须手动分配这些UV以实现所需的重复。| |rotation|纹理围绕中心点旋转多少，以弧度表示。正值是逆时针的。缺省值是0。| |center|旋转发生的点。值（0.5,0.5）对应于纹理的中心。默认值是（0，0），左下角。| |matrixAutoUpdate|是否更新纹理的UV-变换.matrix从纹理特性.offset，.repeat， .rotation和.center。

默认情况下为真。如果直接指定uv-transform矩阵，则将其设置为false。| |matrix|纹理的uv转换矩阵。从质地特性渲染更新.offset，.repeat， .rotation和.center当纹理

的.matrixAutoUpdate属性为true。当.matrixAutoUpdate属性为false时，

可以手动设置此矩阵。默认值是单位矩阵。| |generateMipmaps|是否为纹理生成mipmap（如果可能）。默认情况下为真。如果您手动创建mipmap，

请将其设置为false。| |premultiplyAlpha|在默认情况下，这是PNG图像的标准。如果RGB值已被预乘alpha，则设置为true。| |flipY|默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。| |unpackAlignment|默认值为4。指定内容中每个像素行起点的对齐要求。有效值有 1

(字节对齐byte-alignment), 2 (行起点按偶数字节对齐),

4 (字对齐word-alignment), 和 8（行起点按双字对齐）。

参阅：glPixelStorei 以了解更多信息。| |encoding|编码方式。默认设置为 THREE.LinearEncoding，但是支持 sRGB, RGBE, RGBM,

RGBD, LogLuv 和 Gamma。 重要：如果纹理中的这个值在材料已用后被改变，

则需要触发一个Material.needsUpdate操作，以便该值在着色器中得到实现。| |version|从0开始计算needsUpdate更新次数| |onUpdate|一个回调函数，当纹理被更新时调用（例如，当needsUpdate被设置为true并且纹理

被使用时）。| |needsUpdate|将其设置为true以在下次使用纹理时触发更新。对于设置换行模式尤为重要。|

方法