阅读(4449) (0)

three.js ImageLoader

2022-12-26 14:11:24 更新

用来加载一个Image的加载器。 内部使用FileLoader来加载文件,并被 CubeTextureLoader、ObjectLoader、TextureLoader所使用。

代码示例

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

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

	// onLoad回调
	function ( image ) {
		// use the image, e.g. draw part of it on a canvas
		const canvas = document.createElement( 'canvas' );
		const context = canvas.getContext( '2d' );
		context.drawImage( image, 100, 100 );
	},

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

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

请注意three.js r84遗弃了ImageLoader进度事件. 对于支持进度事件的ImageLoader 请参考this thread.

例子

WebGL / loader / obj
WebGL / shaders / ocean

构造方法

ImageLoader( manager : LoadingManager )

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

创建一个新的ImageLoader.

属性

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

方法

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

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

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

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

src/loaders/ImageLoader.js