当前位置：首页 > article >正文

three.js 图片加载器

article 2024/12/24 3:20:42

ImageBitmapLoader

一个把Image加载为ImageBitmap的加载器。 ImageBitmap提供了一种异步且有效的资源的途径，用于在WebGL中渲染的纹理。
不像FileLoader, ImageBitmapLoader无需避免对同一的URL进行多次请求。

// 初始化一个加载器 
var loader = new THREE.ImageBitmapLoader(); 
// set options if needed 
loader.setOptions( { imageOrientation: 'flipY' } ); 
// 加载一个图片资源 
loader.load( 
  // 资源的URL 
  'textures/skyboxsun25degtest.png', 
  // onLoad回调 
  function ( imageBitmap ) { 
    var texture = new THREE.CanvasTexture( imageBitmap ); 
    var material = new THREE.MeshBasicMaterial( { map: texture } ); 
  }, 
  // 目前暂不支持onProgress的回调 
  undefined, 
  // onError回调 
  function ( err ) { 
    console.log( 'An error happened' ); 
  } 
);

构造函数

ImageBitmapLoader( manager : LoadingManager )

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

创建一个新的ImageBitmapLoader.

属性

# .manager : LoadingManager

加载器正在使用的loadingManager ，默认为DefaultLoadingManager.

# .options : String

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

# .path : String

所要加载文件的基本路径。请参考.setPath，默认为undefined。

方法

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

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

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

# .setCrossOrigin () : ImageBitmapLoader

此方法出于兼容性原因而存在，并且不实现逻辑。它确保ImageBitmapLoader具有ImageLoader的类似接口。

# .setOptions ( options : Object ) : ImageBitmapLoader

设置createImageBitmap的选项对象。

# .setPath ( path : String ) : ImageBitmapLoader

设置加载文件的基本路径或URL。当加载同一目录中下的许多图片时，此方法将很有用。

ImageLoader

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

// 初始化一个加载器 
var 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 
    var canvas = document.createElement( 'canvas' ); 
    var context = canvas.getContext( '2d' ); 
    context.drawImage( image, 100, 100 ); 
  }, 
  // 目前暂不支持onProgress的回调 
  undefined, 
  // onError回调 
  function () { 
    console.error( 'An error happened.' ); 
  } 
);