three.js Texture

2023-02-16 17:49 更新

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

構(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í)例的唯一數(shù)字。

.isTexture : Boolean

只讀標(biāo)志,用于檢查給定對(duì)象是否屬于紋理類型。

.uuid : String

該對(duì)象實(shí)例的UUID。 這個(gè)值是自動(dòng)分配的,因此不應(yīng)當(dāng)對(duì)其進(jìn)行編輯。

.name : String

該對(duì)象的名稱,可選,且無(wú)需唯一。默認(rèn)值是一個(gè)空字符串。

.image : Image

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

要使用視頻來(lái)作為紋理貼圖,你需要有一個(gè)正在播放的HTML5 Video元素來(lái)作為你紋理貼圖的源圖像, 并在視頻播放時(shí)不斷地更新這個(gè)紋理貼圖?!猇ideoTexture 類會(huì)對(duì)此自動(dòng)進(jìn)行處理。

.mipmaps : Array

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

.mapping : number

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

.wrapS : number

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

默認(rèn)值是THREE.ClampToEdgeWrapping,即紋理邊緣將被推到外部邊緣的紋素。 其它的兩個(gè)選項(xiàng)分別是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 

.wrapT : number

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

可以使用與 .wrapS : number相同的選項(xiàng)。

請(qǐng)注意:紋理中圖像的平鋪,僅有當(dāng)圖像大?。ㄒ韵袼貫閱挝唬?的冪(2、4、8、16、32、64、128、256、512、1024、2048、……)時(shí)才起作用。 寬度、高度無(wú)需相等,但每個(gè)維度的長(zhǎng)度必須都是2的冪。 這是WebGL中的限制,不是由three.js所限制的。

.magFilter : number

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

.minFilter : number

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

.anisotropy : number

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

.format : number

默認(rèn)值為THREE.RGBAFormat。

.internalFormat : String

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

.type : number

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

.offset : Vector2

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

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

  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

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

  1. ao map
  2. light map

.repeat : Vector2

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

.rotation : number

紋理將圍繞中心點(diǎn)旋轉(zhuǎn)多少度,單位為弧度(rad)。正值為逆時(shí)針?lè)较蛐D(zhuǎn),默認(rèn)值為0。

.center : Vector2

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

.matrixAutoUpdate : Boolean

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

.matrix : Matrix3

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

.generateMipmaps : Boolean

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

.premultiplyAlpha : Boolean

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

請(qǐng)注意,此屬性對(duì) ImageBitmap 沒(méi)有影響。您需要在創(chuàng)建位圖時(shí)進(jìn)行配置。

.flipY : Boolean

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

請(qǐng)注意,此屬性對(duì) ImageBitmap 沒(méi)有影響。您需要在創(chuàng)建位圖時(shí)進(jìn)行配置。

.unpackAlignment : number

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

.encoding : number

默認(rèn)值為THREE.LinearEncoding。 

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

.version : Integer

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

.onUpdate : Function

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

.needsUpdate : Boolean

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

.userData : Object

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

.source : Source

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

方法

EventDispatcher方法在這個(gè)類上可以使用。

.updateMatrix () : undefined

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

.clone () : Texture

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

.toJSON ( meta : Object ) : Object

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

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

.dispose () : undefined

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

.transformUv ( uv : Vector2 ) : Vector2

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

源代碼

src/textures/Texture.js


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)