three.js ImageBitmapLoader

2023-02-16 17:44 更新

一個(gè)把Image加載為ImageBitmap的加載器。 ImageBitmap提供了一種異步且有效的資源的途徑,用于在WebGL中渲染的紋理。

不像FileLoader, ImageBitmapLoader無(wú)需避免對(duì)同一的URL進(jìn)行多次請(qǐng)求。

值得注意的是 Texture.flipY 和 Texture.premultiplyAlpha 在 ImageBitmap 中會(huì)被忽略。不像常規(guī)圖像上傳到 GPU 時(shí)需要這些配置,ImageBitmap 是創(chuàng)建位圖時(shí)需要它們。比如你需要通過(guò) ImageBitmapLoader.setOptions 來(lái)設(shè)置等效的選項(xiàng)。詳情請(qǐng)參閱 WebGL specification 規(guī)范。

代碼示例

// 初始化一個(gè)加載器
const loader = new THREE.ImageBitmapLoader();

// set options if needed
loader.setOptions( { imageOrientation: 'flipY' } );

// 加載一個(gè)圖片資源
loader.load(
	// 資源的URL
	'textures/skyboxsun25degtest.png',

	// onLoad回調(diào)
	function ( imageBitmap ) {
		const texture = new THREE.CanvasTexture( imageBitmap );
		const material = new THREE.MeshBasicMaterial( { map: texture } );
	},

	// 目前暫不支持onProgress的回調(diào)
	undefined,

	// onError回調(diào)
	function ( err ) {
		console.log( 'An error happened' );
	}
);

例子

WebGL / loader / ImageBitmap

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

ImageBitmapLoader( manager : LoadingManager )

manager — 加載器使用的loadingManager,默認(rèn)為THREE.DefaultLoadingManager.

創(chuàng)建一個(gè)新的ImageBitmapLoader.

屬性

共有屬性請(qǐng)參見(jiàn)其基類Loader。

.isImageBitmapLoader : Boolean

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

.options : String

一個(gè)可選對(duì)象,用來(lái)設(shè)置內(nèi)部使用的createImageBitmap工廠方法, 默認(rèn)為undefined.

方法

共有方法請(qǐng)參見(jiàn)其基類Loader。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined

url — 文件的URL或者路徑,也可以為 Data URI.
onLoad — 加載完成時(shí)將調(diào)用?;卣{(diào)參數(shù)為將要加載的image.
onProgress — 此回調(diào)函數(shù)暫時(shí)不支持
onError — 在加載錯(cuò)誤時(shí)被調(diào)用。

從URL中進(jìn)行加載,并返回將包含數(shù)據(jù)的image對(duì)象。

.setOptions ( options : Object ) : this

設(shè)置createImageBitmap的選項(xiàng)對(duì)象。

src/loaders/ImageBitmapLoader.js


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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)