three Texture 纹理

在3D图形和计算机视觉中，纹理是一种应用于3D模型或2D对象表面的图像，用来在不增加几何复杂度的前提下增加视觉细节。这在游戏开发、动画以及像Three.js这样的渲染引擎中非常重要。

Texture 有三十二个属性五个方法

• id : Integer 只读 - 表示该纹理实例的唯一数字。
• isTexture : Boolean 判断是纹理
• uuid : String 该对象实例的UUID。 这个值是自动分配的，因此不应当对其进行编辑。
• name : String 该对象的名称，可选，且无需唯一。默认值是一个空字符串。
• image : Image 一个图片对象，通常由TextureLoader.load方法创建。 该对象可以是被three.js所支持的任意图片（例如PNG、JPG、GIF、DDS）或视频（例如MP4、OGG/OGV）格式。要使用视频来作为纹理贴图，你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像， 并在视频播放时不断地更新这个纹理贴图。——VideoTexture 类会对此自动进行处理。
• mipmaps : Array 用户所给定的mipmap数组（可选）。

    // 在 Three.js 中，可以为纹理启用 mipmaps，通常 mipmaps 会自动生成。你可以通过设置纹理的 `mipmaps` 属性来控制 mipmaps 数组，或通过设置 `texture.generateMipmaps` 来自动生成。
    const texture = new THREE.TextureLoader().load('path_to_texture.jpg'); 
    texture.generateMipmaps = true; // 启用自动生成 mipmaps 
    texture.minFilter = THREE.LinearMipmapLinearFilter; // 选择合适的 mipmaps 过滤方式

• mapping : number 图像将如何应用到物体（对象）上。默认值是THREE.UVMapping对象类型， 即UV坐标将被用于纹理映射。 请参阅texture constants（映射模式常量）来了解其他映射类型。 // 以下是常用属性列表

    // 在 Three.js 中，mapping 属性（以数值表示）用于定义纹理在表面上如何映射。它通过不同的映射方式，控制纹理贴在几何表面上的规则和样式。
    THREE.UVMapping 最常用的映射方式，按照模型的 UV 坐标将纹理贴图精确应用到表面。适用于大多数需要精细控制的贴图场景。
    THREE.CubeReflectionMapping 用于反射立方体纹理的映射，使对象表面反射周围环境。常用于环境反射贴图，比如模拟金属和玻璃表面。
    THREE.CubeRefractionMapping 和 CubeReflectionMapping 类似，但用于折射环境，使对象产生透明效果，常用于玻璃或水的效果。
    THREE.EquirectangularReflectionMapping 将等距柱状图像映射到对象表面，用于模拟球形环境的反射。
    THREE.EquirectangularRefractionMapping 用于折射球形环境图，生成环境的折射效果。
    THREE.CubeUVReflectionMapping 类似 CubeReflectionMapping，但优化了分辨率和质量。
    THREE.CubeUVRefractionMapping 类似 CubeRefractionMapping，用于高质量折射效果。

• channel : Integer 在 Three.js 等图形渲染系统中， .channel 属性可以用来选择纹理所映射到的 UV 坐标集。使用不同的 UV 通道，可以灵活地对同一个模型应用多种纹理映射方式。

许多 3D 模型具有多个 UV 集，以便为不同的纹理分配不同的 UV 映射。例如：
    第一套 UV 坐标 `uv` 用于基础颜色纹理。
    第二套 UV 坐标 `uv1` 用于光照或环境遮蔽贴图。
    第三套 UV 坐标 `uv2` 可以应用于细节贴图，控制材质的细微变化。
    // 加载基础颜色纹理 
    const colorTexture = new THREE.TextureLoader().load('path_to_color_texture.jpg'); 
    colorTexture.channel = 0; // 使用第1套 UV (uv) 映射颜色纹理

• wrapS : number 在 Three.js 中，wrapS 属性用于控制纹理在水平方向（S 轴，即 U 轴）上的重复方式。它指定了当纹理超出原始 UV 范围 [0, 1] 时，应该如何处理纹理的显示。 // 以下是常用属性列表

    THREE.RepeatWrapping：
        常量值：`1000`
        作用：让纹理在水平方向重复平铺。这意味着在 UV 超出 [0, 1] 范围时，纹理会不断地重复。
        示例用途：用于需要无缝重复的地面或墙面纹理。
    THREE.ClampToEdgeWrapping：
        常量值：`1001`
        作用：将纹理的边缘颜色延伸到 UV 超出 [0, 1] 的区域，使纹理的边缘保持不变。
        示例用途：用于避免纹理重复而保持边缘平滑的情况，比如贴图在图像的边缘不应该重复的物体。
    THREE.MirroredRepeatWrapping：
        常量值：`1002`
        作用：让纹理在水平方向上镜像重复。当超出 [0, 1] 的 UV 值时，纹理会以镜像效果重复。
        示例用途：适用于希望纹理无缝重复但有对称效果的场景，比如某些地砖或织物图案。
        
    // 加载纹理
    const texture = new THREE.TextureLoader().load(imgPng);
    // 设置纹理在 S 轴方向上的包裹方式为 RepeatWrapping，使其水平重复
    texture.wrapS = THREE.RepeatWrapping;
    // 设置纹理在 T 轴方向上的包裹方式也为 RepeatWrapping，使其垂直重复
    texture.wrapT = THREE.RepeatWrapping;
    // 设置重复次数
    texture.repeat.set(2, 2); // 在 S 和 T 方向各重复 2 次
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个网格并添加到场景
    const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
    scene.add(plane);

• wrapT : number 在 Three.js 中，wrapT 属性用于控制纹理在垂直方向（T 轴，即 V 轴）上的重复方式。它定义了当纹理的 UV 超出 [0, 1] 范围时，如何处理纹理在垂直方向的显示效果。 // 以下是常用属性列表

    THREE.RepeatWrapping：
        常量值：`1000`
        作用：让纹理在垂直方向重复。当 UV 超出 [0, 1] 的范围时，纹理会继续重复。
        用途示例：适用于需要无缝垂直重复的场景，如墙面、地板等。
    THREE.ClampToEdgeWrapping：
        常量值：`1001`
        作用：将纹理边缘的颜色扩展到 UV 超出 [0, 1] 的区域，因此边缘会延伸。
        用途示例：适用于避免纹理重复并保持边缘不变的情况，如贴图在图像的边缘不应重复的物体。
    THREE.MirroredRepeatWrapping：
        常量值：`1002`
        作用：在垂直方向上以镜像方式重复。当 UV 超出 [0, 1] 时，纹理会以镜像的形式继续重复。
        用途示例：适用于对称重复效果的纹理，例如一些地毯或花纹图案。

• magFilter : number 在 Three.js 中，magFilter 属性用于控制当纹理被放大显示（像素比纹理分辨率更大）时的采样方式。它决定了纹理放大时的清晰度或模糊度。 // 以下是常用属性列表

    THREE.NearestFilter：
        常量值：`1003`
        作用：使用邻近采样，即选择最接近的纹理像素（texel），不会进行额外的插值。这种方式通常会导致“像素化”效果，适用于像素风格的效果。
        用途示例：适合需要锐利边缘的低分辨率纹理，比如像素艺术风格的渲染。
    THREE.LinearFilter：
        常量值：`1006`
        作用：使用线性插值采样，基于周围的纹理像素（texels）进行插值，使放大的纹理看起来更加平滑。
        用途示例：适合一般场景中使用的高分辨率纹理，常见于自然贴图、角色纹理等需要平滑效果的图形。
    // 加载纹理
    const texture = new THREE.TextureLoader().load(imgPng);
    // 设置放大滤镜方式
    texture.magFilter = THREE.LinearFilter; // 使用线性插值，使放大后的纹理更平滑
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• minFilter : number 在 Three.js 中，minFilter 属性用于控制当纹理缩小显示（纹理的像素比纹理分辨率更小）时的采样方式。它决定了在渲染时如何处理缩小的纹理，以提高视觉效果。 // 以下是常用属性列表

    THREE.NearestFilter：
        常量值：`1003`
        作用：使用邻近采样，从最接近的纹理像素（texel）获取颜色，没有进行插值。这种方式可能导致显著的锯齿效果。
        用途示例：适合需要锐利边缘的低分辨率纹理，例如像素艺术风格的纹理。
    THREE.LinearFilter：
        常量值：`1006`
        作用：使用线性插值，基于周围的纹理像素进行插值，使缩小的纹理看起来更加平滑。
        用途示例：适合高分辨率纹理，常用于自然贴图、角色纹理等。
    THREE.NearestMipmapNearestFilter：
        常量值：`1004`
        作用：使用最近邻滤波的方式选取最接近的 mipmap，并应用最近邻采样。
        用途示例：适合某些需要清晰细节的应用，可能适合某些特定的风格。
    THREE.LinearMipmapNearestFilter：
        常量值：`1005`
        作用：使用线性插值从最接近的 mipmap 进行采样。
        用途示例：在减少纹理的细节损失时，可以获得更好的视觉效果。
    THREE.NearestMipmapLinearFilter：
        常量值：`1008`
        作用：选择最接近的 mipmap，然后使用线性插值。
        用途示例：在某些情况下，可以获得比使用最近邻采样更好的效果。
    THREE.LinearMipmapLinearFilter：
        常量值：`1007`
        作用：选择最接近的 mipmap，然后使用线性插值进行采样。这通常会提供最平滑的效果。
        用途示例：适合需要最佳图像质量的场景。
        
    // 加载纹理
    const texture = new THREE.TextureLoader().load(imgPng);
    // 设置缩小滤镜方式
    texture.minFilter = THREE.LinearMipmapLinearFilter; // 使用线性插值和 mipmap，获得最佳质量
    // 启用 mipmap
    texture.generateMipmaps = true; // 启用 mipmap 生成
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个平面并添加到场景
    const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
    scene.add(plane);

• anisotropy : number 在 Three.js 中，anisotropy 属性用于控制纹理的各向异性过滤程度。各向异性过滤是一种用于提高纹理在斜视角度下（即与观察方向呈现角度时）的清晰度和细节的方法。通过增加各向异性过滤级别，可以显著改善纹理的视觉质量，尤其是在斜视或低视角观察时。

    1：无各向异性过滤，效果较差。
    2-4：低等级的各向异性过滤，效果一般。
    8-16：高等级的各向异性过滤，效果更好，适合要求高的场景。
    
    // 加载纹理
    const texture = new THREE.TextureLoader().load(imgPng);
    // 设置各向异性过滤级别
    texture.anisotropy = 16; // 设置为 16，获得最佳效果
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• format : number在 Three.js 中，format 属性用于定义纹理的存储格式。它决定了纹理的颜色数据是如何被存储和处理的。这对于纹理的性能和渲染效果有着重要影响。 // 以下是常用属性列表

    THREE.RGBAFormat：
        常量值：`1027`
        作用：每个像素使用红色、绿色、蓝色和透明度（Alpha）通道。适用于需要透明度的纹理。
    THREE.RGBFormat：
        常量值：`1026`
        作用：每个像素使用红色、绿色和蓝色通道。适用于不需要透明度的纹理。
    THREE.LuminanceFormat：
        常量值：`1025`
        作用：每个像素仅使用亮度信息，通常用于灰度纹理。
    THREE.LuminanceAlphaFormat：
        常量值：`1028`
        作用：每个像素使用亮度和透明度通道。
    THREE.DepthFormat：
        常量值：`1029`
        作用：用于存储深度信息。
        
    // 加载纹理
    const texture = new THREE.TextureLoader().load(imgPng);
    // 设置纹理格式
    texture.format = THREE.RGBAFormat; // 使用 RGBA 格式，支持透明度
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个平面并添加到场景
    const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
    scene.add(plane);

• internalFormat : String 在 Three.js 中，internalFormat 属性用于指定纹理的内部格式。这一属性主要用于 WebGL 中纹理的创建和渲染，定义了如何在 GPU 中存储纹理数据。它与纹理的可用格式和性能密切相关。 此项的默认值由.format和.type混合并决定。如果要主动设置困难度较高 // 以下是常用属性列表

    "RGBA" ：
        说明：每个像素存储红色、绿色、蓝色和透明度通道。
        用途：适用于需要透明度的纹理。
    "RGB" ：
        说明：每个像素存储红色、绿色和蓝色通道。
        用途：适合不需要透明度的纹理。
    "LUMINANCE" ：
        说明：每个像素仅存储亮度信息。
        用途：用于灰度纹理。
    "LUMINANCE_ALPHA" ：
        说明：每个像素存储亮度和透明度通道。
        用途：适合需要灰度与透明度的纹理。
    "DEPTH_COMPONENT" ：
        说明：用于深度纹理，存储深度信息。
        用途：适合进行深度测试或阴影映射。

• type : number 在Three.js中，type 属性用于指定纹理数据的类型。它通常用于控制纹理在GPU中的存储格式。type 属性的可选值包括不同的数字常量，每个常量都对应不同的数据类型。

    `THREE.UnsignedByteType` (值为 `0`):
        表示无符号的字节类型（0-255），适用于普通的RGBA或RGB纹理。
    `THREE.FloatType` (值为 `1`):
        表示浮点数类型，用于高动态范围纹理。
    `THREE.HalfFloatType` (值为 `2`):
        表示半精度浮点数类型，通常用于性能优化，尤其是在纹理较大时。
    `THREE.UnsignedShort4444Type` (值为 `3`):
        适用于特殊的颜色格式，通常用于小型纹理。
    `THREE.UnsignedShort5551Type` (值为 `4`):
        适用于另一种特殊的颜色格式。
        
    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置纹理类型为无符号字节类型
    texture.type = THREE.UnsignedByteType; // 使用无符号字节类型
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• offset : Vector2 在Three.js中，offset 属性用于定义纹理的偏移量，通常是一个 Vector2 对象。这个属性允许开发者在UV坐标上对纹理进行平移，从而实现纹理的移动效果。

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置纹理的偏移量
    texture.offset.set(0.5, 0.5); // 将纹理偏移到右下角
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• repeat : Vector2 在Three.js中，repeat 属性用于控制纹理的重复次数，通常也是一个 Vector2 对象。通过设置 repeat 属性，开发者可以定义纹理在UV坐标上的重复频率，以实现纹理的平铺效果。

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置纹理的重复次数
    texture.repeat.set(4, 4); // 将纹理在U和V方向上重复4次
    // 设置纹理的平铺模式
    texture.wrapS = THREE.RepeatWrapping; // 设置S方向（U）的平铺模式
    texture.wrapT = THREE.RepeatWrapping; // 设置T方向（V）的平铺模式
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• rotation : number 在Three.js中，rotation 属性用于控制纹理的旋转角度，单位为弧度。通过设置 rotation 属性，开发者可以对纹理进行旋转，从而实现多种视觉效果。

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置纹理的旋转角度
    texture.rotation = Math.PI / 4; // 将纹理旋转45度（PI/4弧度）
    // 设置纹理的中心点
    texture.center.set(0.5, 0.5); // 将中心点设置为纹理的中心（默认值）
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• center : Vector2 旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。
• matrixAutoUpdate : Boolean 是否从纹理的.offset、.repeat、.rotation和.center属性更新纹理的UV变换矩阵（uv-transform .matrix）。 默认值为true。 如果你要直接指定纹理的变换矩阵，请将其设为false。
• matrix : Matrix3 在Three.js中，matrix 属性用于存储纹理的变换矩阵。它是一个 Matrix3 对象，通常用于进行复杂的纹理变换，如旋转、缩放和偏移。通过设置 matrix 属性，开发者可以对纹理进行更高效的变换操作，而不必分别设置 offset、repeat、rotation 等属性。

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 创建变换矩阵
    const matrix = new THREE.Matrix3();
    // 设置变换矩阵的缩放和旋转
    matrix.set(
        1, 0, 0,     // 第一列
        0, 1, 0,     // 第二列
        0, 0, 1      // 第三列
    );
    // 例如，旋转45度和缩放2倍（可以通过修改矩阵的值来实现）
    const rotation = Math.PI / 4; // 45度旋转
    const scale = 2; // 2倍缩放
    // 应用旋转和缩放到矩阵
    matrix.set(
        Math.cos(rotation) * scale, -Math.sin(rotation), 0,
        Math.sin(rotation), Math.cos(rotation) * scale, 0,
        0, 0, 1
    );
    // 将变换矩阵应用到纹理
    texture.matrix = matrix;
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• generateMipmaps : Boolean 是否为纹理生成mipmap（如果可用）。默认为true。 如果你手动生成mipmap，请将其设为false。
• premultiplyAlpha : Boolean 如果设置为true并且alpha通道存在的话，上传到GPU时alpha的数值将会与颜色通道的数值相乘。默认为false。注意此项属性不会影响到ImageBitmap。 如果你想要则需要在bitmap创建的时候进行配置，如何配置请查看ImageBitmapLoader。
• flipY : Boolean 如果设置为true，纹理在上传到GPU的时候会进行纵向的翻转。默认值为true。注意此项属性不会影响到ImageBitmap。 如果你想要则需要在bitmap创建的时候进行配置，如何配置请查看ImageBitmapLoader。
• unpackAlignment : number 在Three.js中，unpackAlignment 属性用于控制纹理在GPU中解包时的对齐方式。它是一个数字，通常用于确保纹理数据在内存中的排列方式符合GPU的要求。这对于优化纹理的加载和处理速度非常重要。默认值：4 指定内存中每个像素行起点的对齐要求。 允许的值为1（字节对齐）、2（行对齐到偶数字节）、4（字对齐）和8（行从双字边界开始）。 请参阅glPixelStorei来了解详细信息。

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置解包对齐
    texture.unpackAlignment = 1; // 通过 texture.unpackAlignment = 1 将解包对齐设置为1字节对齐。这在某些情况下可能会提高性能，但也可能导致其他问题，因此需要谨慎使用。
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
    scene.add(cube);

• colorSpace : string 在Three.js中，colorSpace 属性用于指定纹理的颜色空间。它主要用于在处理纹理时确定颜色值的解释方式。这对于确保颜色在不同设备和环境中的一致性尤为重要。// 以下是常用属性列表

    THREE.SRGBColorSpace：表示线性颜色空间，适用于在着色器中执行计算时需要保持线性的颜色值。
    THREE.LinearColorSpace：表示标准RGB颜色空间，适用于需要 gamma 校正的纹理。
    
    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    // 设置颜色空间
    texture.colorSpace = THREE.SRGBColorSpace; // 使用标准sRGB颜色空间
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.PlaneGeometry(5, 5, 5), material);
    scene.add(cube);

• version : Integer 这个值起始值为0，计算 .needsUpdate : Boolean被设置为true的次数。
• onUpdate : Function 一个回调函数，在纹理被更新后调用。 （例如，当needsUpdate被设为true且纹理被使用。）

    // 加载纹理
    const texture = await new THREE.TextureLoader().load(imgPng);
    texture.onUpdate = function() {
        // 在这里执行你的更新逻辑，比如改变纹理的内容
        console.log('纹理已更新');
    };
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: texture });
    // 创建一个立方体并添加到场景
    const cube = new THREE.Mesh(new THREE.PlaneGeometry(5, 5, 5), material);
    scene.add(cube);

• needsUpdate : Boolean 将其设置为true，以便在下次使用纹理时触发一次更新。 这对于设置包裹模式尤其重要。
• userData : Object 保存关于纹理的自定义信息的对象。不应该放函数引用，因为函数不会拷贝。

    // 使用 userData 属性来存储自定义数据 
    texture.userData = { 
        id: 'myTexture', 
        description: '这是一个自定义纹理', 
        properties: { isDynamic: true, lastUpdated: Date.now(), } 
    };

• source : Source 纹理的数据源信息。可以在不同的纹理之间引用相同的数据源，这在使用精灵表的情况下很好用，因为在这种情况下不同的纹理只是使用了不同的偏移，但是其数据源是相同的。

    // 访问纹理的原始数据源
    console.log(texture.source); // 输出纹理的源信息
    // 你可以获取纹理的原始图像数据
    const image = texture.source.data; // 如果纹理来源于图像，通常会是一个 Image 或 Canvas 对象
    console.log(image); // 输出原始图像对象

方法

• updateMatrix () : undefined 从纹理的.offset、.repeat、 .rotation和.center属性来更新纹理的UV变换矩阵（uv-transform .matrix）。
• clone () : Texture 拷贝纹理。请注意。这不是“深拷贝”，图像是共用的。 除此之外，拷贝一个纹理并不会将此纹理自动标记并上传。你需要在图片的属性变更或者源数据完全加载完的时候并准备好的时候将Texture.needsUpdate设置为true。
• toJSON ( meta : Object ) : Object meta -- 可选，包含有元数据的对象。 将Texture对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。
• dispose () : undefined 使用“废置”事件类型调用EventDispatcher.dispatchEvent。
• transformUv ( uv : Vector2 ) : Vector2 基于纹理的.offset、.repeat、 .wrapS、.wrapT和.flipY属性值来变换uv。