three.js Texture

2023-02-16 17:49 更新

創(chuàng)建一個紋理貼圖,將其應(yīng)用到一個表面,或者作為反射/折射貼圖。

構(gòu)造函數(shù)

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

代碼示例

// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

屬性

.id : Integer

只讀 - 表示該紋理實例的唯一數(shù)字。

.isTexture : Boolean

只讀標志,用于檢查給定對象是否屬于紋理類型。

.uuid : String

該對象實例的UUID。 這個值是自動分配的,因此不應(yīng)當(dāng)對其進行編輯。

.name : String

該對象的名稱,可選,且無需唯一。默認值是一個空字符串。

.image : Image

一個圖片對象,通常由TextureLoader.load方法創(chuàng)建。 該對象可以是被three.js所支持的任意圖片(例如PNG、JPG、GIF、DDS)或視頻(例如MP4、OGG/OGV)格式。

要使用視頻來作為紋理貼圖,你需要有一個正在播放的HTML5 Video元素來作為你紋理貼圖的源圖像, 并在視頻播放時不斷地更新這個紋理貼圖?!猇ideoTexture 類會對此自動進行處理。

.mipmaps : Array

用戶所給定的mipmap數(shù)組(可選)。

.mapping : number

圖像將如何應(yīng)用到物體(對象)上。默認值是THREE.UVMapping對象類型, 即UV坐標將被用于紋理映射。

.wrapS : number

這個值定義了紋理貼圖在水平方向上將如何包裹,在UV映射中對應(yīng)于U。

默認值是THREE.ClampToEdgeWrapping,即紋理邊緣將被推到外部邊緣的紋素。 其它的兩個選項分別是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 

.wrapT : number

這個值定義了紋理貼圖在垂直方向上將如何包裹,在UV映射中對應(yīng)于V。

可以使用與 .wrapS : number相同的選項。

請注意:紋理中圖像的平鋪,僅有當(dāng)圖像大小(以像素為單位)為2的冪(2、4、8、16、32、64、128、256、512、1024、2048、……)時才起作用。 寬度、高度無需相等,但每個維度的長度必須都是2的冪。 這是WebGL中的限制,不是由three.js所限制的。

.magFilter : number

當(dāng)一個紋素覆蓋大于一個像素時,貼圖將如何采樣。默認值為THREE.LinearFilter, 它將獲取四個最接近的紋素,并在他們之間進行雙線性插值。 另一個選項是THREE.NearestFilter,它將使用最接近的紋素的值。

.minFilter : number

當(dāng)一個紋素覆蓋小于一個像素時,貼圖將如何采樣。默認值為THREE.LinearMipmapLinearFilter, 它將使用mipmapping以及三次線性濾鏡。

.anisotropy : number

沿著軸,通過具有最高紋素密度的像素的樣本數(shù)。 默認情況下,這個值為1。設(shè)置一個較高的值將會產(chǎn)生比基本的mipmap更清晰的效果,代價是需要使用更多紋理樣本。 使用renderer.capabilities.getMaxAnisotropy() 來查詢GPU中各向異性的最大有效值;這個值通常是2的冪。

.format : number

默認值為THREE.RGBAFormat。

.internalFormat : String

默認值是使用 .format 和 .type 的組合獲得的。GPU 格式允許開發(fā)人員指定數(shù)據(jù)將如何存儲在 GPU 上。

.type : number

這個值必須與.format相對應(yīng)。默認值為THREE.UnsignedByteType, 它將會被用于絕大多數(shù)紋理格式。

.offset : Vector2

在 U 和 V 的每個方向上,紋理的單個重復(fù)從開始偏移多少。典型范圍是 0.0 到 1.0。

以下紋理類型共享引擎中的第一個 uv 通道。偏移(和重復(fù))設(shè)置根據(jù)以下優(yōu)先級進行評估,然后由這些紋理共享:

  1. color map
  2. specular map
  3. displacement map
  4. normal map
  5. bump map
  6. roughness map
  7. metalness map
  8. alpha map
  9. emissive map
  10. clearcoat map
  11. clearcoat normal map
  12. clearcoat roughnessMap map

以下紋理類型共享引擎中的第二個 uv 通道。偏移(和重復(fù))設(shè)置根據(jù)以下優(yōu)先級進行評估,然后由這些紋理共享:

  1. ao map
  2. light map

.repeat : Vector2

紋理在 U 和 V 的每個方向上在整個表面上重復(fù)多少次。如果在任一方向上將 repeat 設(shè)置為大于 1,則相應(yīng)的 Wrap 參數(shù)也應(yīng)設(shè)置為 THREE.RepeatWrapping 或 THREE.MirroredRepeatWrapping 以實現(xiàn)所需的平鋪影響。為紋理設(shè)置不同的重復(fù)值與 .offset 一樣受到限制。

.rotation : number

紋理將圍繞中心點旋轉(zhuǎn)多少度,單位為弧度(rad)。正值為逆時針方向旋轉(zhuǎn),默認值為0。

.center : Vector2

旋轉(zhuǎn)中心點。(0.5, 0.5)對應(yīng)紋理的正中心。默認值為(0,0),即左下角。

.matrixAutoUpdate : Boolean

是否從紋理的.offset、.repeat、.rotation和.center屬性更新紋理的UV變換矩陣(uv-transform .matrix)。 默認值為true。 如果你要直接指定紋理的變換矩陣,請將其設(shè)為false。

.matrix : Matrix3

紋理的UV變換矩陣。 當(dāng)紋理的.matrixAutoUpdate屬性為true時, 由渲染器從紋理的.offset、.repeat、.rotation和.center屬性中進行更新。 當(dāng).matrixAutoUpdate屬性為false時,該矩陣可以被手動設(shè)置。 默認值為單位矩陣。

.generateMipmaps : Boolean

是否為紋理生成mipmap(如果可用)。默認為true。 如果你手動生成mipmap,請將其設(shè)為false。

.premultiplyAlpha : Boolean

如果設(shè)置為 true,alpha 通道(如果存在)會在紋理上傳到 GPU 時倍增到顏色通道中。默認為假。

請注意,此屬性對 ImageBitmap 沒有影響。您需要在創(chuàng)建位圖時進行配置。

.flipY : Boolean

如果設(shè)置為 true,紋理在上傳到 GPU 時沿垂直軸翻轉(zhuǎn)。默認為真。

請注意,此屬性對 ImageBitmap 沒有影響。您需要在創(chuàng)建位圖時進行配置。

.unpackAlignment : number

默認為4。指定內(nèi)存中每個像素行起點的對齊要求。 允許的值為1(字節(jié)對齊)、2(行對齊到偶數(shù)字節(jié))、4(字對齊)和8(行從雙字邊界開始)。 

.encoding : number

默認值為THREE.LinearEncoding。 

請注意,如果在材質(zhì)被使用之后,紋理貼圖中這個值發(fā)生了改變, 需要觸發(fā)Material.needsUpdate,來使得這個值在著色器中實現(xiàn)。

.version : Integer

這個值起始值為0,計算 .needsUpdate : Boolean被設(shè)置為true的次數(shù)。

.onUpdate : Function

一個回調(diào)函數(shù),在紋理被更新后調(diào)用。 (例如,當(dāng)needsUpdate被設(shè)為true且紋理被使用。)

.needsUpdate : Boolean

將其設(shè)置為true,以便在下次使用紋理時觸發(fā)一次更新。 這對于設(shè)置包裹模式尤其重要。

.userData : Object

可用于存儲有關(guān)紋理的自定義數(shù)據(jù)的對象。它不應(yīng)該包含對函數(shù)的引用,因為這些不會被克隆。

.source : Source

紋理的數(shù)據(jù)定義??梢钥缂y理共享對數(shù)據(jù)源的引用。這在 spritesheet 的上下文中通常很有用,其中多個紋理渲染相同的數(shù)據(jù)但具有不同的紋理轉(zhuǎn)換。

方法

EventDispatcher方法在這個類上可以使用。

.updateMatrix () : undefined

從紋理的.offset、.repeat、 .rotation和.center屬性來更新紋理的UV變換矩陣(uv-transform .matrix)。

.clone () : Texture

拷貝紋理。請注意。這不是“深拷貝”,圖像是共用的。 此外,克隆紋理不會自動將其標記為紋理上傳。一旦其圖像屬性(數(shù)據(jù)源)完全加載或準備就緒,您必須將 Texture.needsUpdate 設(shè)置為 true。

.toJSON ( meta : Object ) : Object

meta -- 可選,包含有元數(shù)據(jù)的對象。

將Texture對象轉(zhuǎn)換為 three.js JSON Object/Scene format(three.js JSON 物體/場景格式)。

.dispose () : undefined

使用“廢置”事件類型調(diào)用EventDispatcher.dispatchEvent。

.transformUv ( uv : Vector2 ) : Vector2

基于紋理的.offset、.repeat、 .wrapS、.wrapT和.flipY屬性值來變換uv。

源代碼

src/textures/Texture.js


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號