91 Three.js Texture紋理屬性詳解
阿新 • • 發佈：2019-01-27
建構函式
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )案例
// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat 屬性
| 名稱 | 描述 |
|---|---|
| id | 此紋理例項的唯一編號。 |
| uuid | 此物件例項的UUID。這會自動分配，所以不應該編輯。 |
| name | 物件的名稱，可以重複，預設值為空字串 |
| image | 一個Image物件，通常使用 ImageUtils 或 ImageLoader 類來建立。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.AlphaFormat：對應於GL_ALPHA。Alpha 值 THREE.RGBFormat：Red, Green, Blue 三原色值 THREE.RGBAFormat：Red, Green, Blue 和 Alpha 值 THREE.LuminanceFormat：灰度值 THREE.LuminanceAlphaFormat：灰度值和 Alpha 值 THREE.RGBEFormat |
| type | 預設紋理格式為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以在下次使用紋理時觸發更新。對於設定換行模式尤為重要。 |
方法
| 名稱 | 描述 |
|---|---|
| .updateMatrix () | 更新紋理的UV-變換.matrix從紋理特性.offset，.repeat， .rotation和.center。 |
| .clone( texture : Texture ) | 製作紋理的副本。請注意，這不是“深層複製”，影象是共享的。 |
| .toJSON( meta ) | meta - 包含元資料的可選物件。 將材質轉換為three.js JSON格式。 |
| .dispose () | 使用一個’dispose’事件型別來呼叫 EventDispatcher.dispatchEvent 方法(自定義事件類)。 |
| .transformUv ( uv ) | 根據此紋理的.offset，.repeat， .wrapS，.wrapT和.flipY屬性的值轉換uv 。 |