three.js ImageBitmapLoader

2023-02-16 17:44 更新

一个把Image加载为ImageBitmap的加载器。 ImageBitmap提供了一种异步且有效的资源的途径,用于在WebGL中渲染的纹理。

不像FileLoader, ImageBitmapLoader无需避免对同一的URL进行多次请求。

值得注意的是 Texture.flipY 和 Texture.premultiplyAlpha 在 ImageBitmap 中会被忽略。不像常规图像上传到 GPU 时需要这些配置,ImageBitmap 是创建位图时需要它们。比如你需要通过 ImageBitmapLoader.setOptions 来设置等效的选项。详情请参阅 WebGL specification 规范。

代码示例

// 初始化一个加载器
const loader = new THREE.ImageBitmapLoader();

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

// 加载一个图片资源
loader.load(
	// 资源的URL
	'textures/skyboxsun25degtest.png',

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

	// 目前暂不支持onProgress的回调
	undefined,

	// onError回调
	function ( err ) {
		console.log( 'An error happened' );
	}
);

例子

WebGL / loader / ImageBitmap

构造函数

ImageBitmapLoader( manager : LoadingManager )

manager — 加载器使用的loadingManager,默认为THREE.DefaultLoadingManager.

创建一个新的ImageBitmapLoader.

属性

共有属性请参见其基类Loader。

.isImageBitmapLoader : Boolean

只读标志,用于检查给定对象是否属于 ImageBitmapLoader 类型。

.options : String

一个可选对象,用来设置内部使用的createImageBitmap工厂方法, 默认为undefined.

方法

共有方法请参见其基类Loader。

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

url — 文件的URL或者路径,也可以为 Data URI.
onLoad — 加载完成时将调用。回调参数为将要加载的image.
onProgress — 此回调函数暂时不支持
onError — 在加载错误时被调用。

从URL中进行加载,并返回将包含数据的image对象。

.setOptions ( options : Object ) : this

设置createImageBitmap的选项对象。

src/loaders/ImageBitmapLoader.js


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号