Three.js基础功能学习七：加载器与管理器

军军君012026-01-12 9:58

本章介绍three中的加载器及管理器，加载器主要用于加载外部资源，如纹理、视频、音频、模型等资源信息，管理器主要是用于管理加载器使用。

一、学习视频

three.js学习及项目实战：加载器学习

二、加载器

2.1 载器（Loader）

于实现加载器的基类。
属性

  • .crossOrigin : String
      crossOrigin 字符串用于实现 CORS ，以从允许 CORS 的其他域加载url。 默认为anonymous。
  • .manager : LoadingManager
      加载器要使用的 loadingManager 。默认为 DefaultLoadingManager 。
  • .path : String
      将从中加载资产的基本路径。 默认为空字符串。
  • .resourcePath : String
      将从中加载额外资源（例如纹理贴图）的基本路径。 默认为空字符串。
  • .requestHeader : Object
      request header 在 HTTP 请求中使用。 请参考 .setRequestHeader。 默认为 undefined。
    方法
  • .load () : undefined
      该方法需要被所有具体的加载器来实现。它包含了从后端加载资产的逻辑。
  • .loadAsync ( url : String, onProgress : Function ) : Promise
    1. url --- 一个字符串，包含要加载的文件的路径/URL。
    2. onProgress --- （可选）加载过程中将会被调用的函数。参数将是一个XMLHttpRequest 实例，其包  含了 .total （总）字节数和 .loaded （已加载）字节数。

该函数等效于.load，但返回的是一个 Promise。

  • onLoad 由 Promise.resolve 处理，而 onError 则由 Promise.reject 处理。
  • .parse () : undefined
      该方法需要被所有具体的加载器来实现。它包含了解析资产到 three.js 实体的逻辑。
  • .setCrossOrigin ( crossOrigin : String ) : this
      crossOrigin --- crossOrigin字符串用于实现CORS，以从允许CORS的其它域加载url。
  • .setPath ( path : String ) : this
      path --- 设置资产的基本路径。
  • .setResourcePath ( resourcePath : String ) : this
      resourcePath --- 设置独立资源（如纹理贴图）的基本路径。
  • .setRequestHeader ( requestHeader : Object ) : this
      requestHeader - key: 要设置header的名称。 value：要设置header的值。
      设置在 HTTP 请求中使用的 request header（请求头）。

2.2 LoaderUtils

具有多个实用的加载器函数功能的对象

  • .decodeText ( array : TypedArray ) : String
      array --- 作为类型化数组的字节流
      该函数将字节流作为输入并返回字符串作为表示。
  • .extractUrlBase ( url : String ) : String
      url --- 从基本URL中，进行提取的URL。
      从URL中提取基本信息。

2.3 AnimationLoader

以JSON格式来加载 AnimationClips 的一个类。 内部使用 FileLoader 来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

  • .parse ( json : JSON ) : Array
      json --- 请求，解析 JSON 对象并返回 animation clips 的数组。对象中的各个片段将被 AnimationClip.parse 解析。
typescript 复制代码 
import * as THREE from "three"
export default () => {
    const loader = new THREE.AnimationLoader();
    // 加载资源
    loader.load(
        // 资源URL
        '../../animations/animation.js',
        // onLoad回调
        function (animations: THREE.AnimationClips) {
            // animations时一个AnimationClips组数
            console.log(animations);
        },

        // onProgress回调
        function (xhr: ProgressEvent) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

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

2.4 AudioLoader

用来加载 AudioBuffer的一个类。 内部默认使用FileLoader来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的响应文本。
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节.
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将已经加载的AudioBuffer传递给onLoad。

typescript 复制代码 
import * as THREE from "three"
export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas });
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.z = 10;

    const scene = new THREE.Scene()
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const material = new THREE.MeshBasicMaterial({
        color: '#ff0000'
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 初始化一个监听
    const audioListener = new THREE.AudioListener();

    // 把监听添加到camera
    camera.add(audioListener);

    // 初始化音频对象
    const oceanAmbientSound = new THREE.Audio(audioListener);

    // 添加一个音频对象到场景中
    scene.add(oceanAmbientSound);

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

    // 加载资源
    loader.load(
        // 资源URL
        '/audio/test1.mp4',

        // onLoad回调
        function (audioBuffer: ArrayBuffer) {
            // 给一个加载器对象设置音频对象的缓存
            oceanAmbientSound.setBuffer(audioBuffer);

            // 播放音频
            oceanAmbientSound.play();
        },

        // onProgress回调
        function (xhr: ProgressEvent) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

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

    console.log(JSON.stringify(geometry.toJSON()))

    renderer.render(scene, camera);
}

2.5 BufferGeometryLoader

用来加载BufferGeometry的加载器。 内部使用FileLoader来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

  • .parse ( json : JSON ) : Array
      json --- 请求，解析 JSON 对象并返回 animation clips 的数组。对象中的各个片段将被 AnimationClip.parse 解析。
typescript 复制代码 
import * as THREE from "three"
export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas });
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.z = 10;

    const scene = new THREE.Scene()
    const geometry = new THREE.BoxGeometry(1, 1, 1);

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

    // 加载资源
    loader.load(
        // 资源URL
        'models/json/pressure.json',

        // onLoad回调
        function (geometry: THREE.BufferGeometry) {
            const material = new THREE.MeshLambertMaterial({ color: 0xF5F5F5 });
            const object = new THREE.Mesh(geometry, material);
            scene.add(object);
        },

        // onProgress回调
        function (xhr: ProgressEvent) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

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


    renderer.render(scene, camera);
}

2.6 Cache

一个简单的缓存系统，内部使用FileLoader。
属性

  • .enabled : Boolean
      是否启用缓存，默认为false.
  • .files : Object
      一个object所持有的缓存文件。

方法

  • .add ( key : String, file ) : undefined
      key --- 通过引用缓存文件的key。
      file --- 所被缓存的文件
      使用key为引用文件增加一个缓存入口。如果该key已持有一个文件，则会被覆盖。
  • .get ( key : String ) : Any
      key --- 一个字符串key
      获得该key的值。 如果该key不存在，则以undefined被返回。
  • .remove ( key : String ) : undefined
      key --- 引用缓存文件的一个字符串key
      使用key来删除相应的缓存文件。
  • .clear () : undefined
      清除所有缓存中的值。

2.7 CompressedTextureLoader

基于块的纹理加载器 (dds, pvr, ...)的抽象类。 内部使用FileLoader来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

2.8 CubeTextureLoader

加载CubeTexture的一个类。 内部使用ImageLoader来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

typescript 复制代码 
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas });
    const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    const scene = new THREE.Scene()
    const textureCube = new THREE.CubeTextureLoader()
        .setPath('/textures/cubeMaps/').load([
            'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'
        ]);
    textureCube.mapping = THREE.CubeRefractionMapping;
    scene.background = textureCube;

    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const material = new THREE.MeshBasicMaterial({
        color: '#ff0000'
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer.render(scene, camera);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();


    function animate() {
        requestAnimationFrame(animate)

        // required if controls.enableDamping or controls.autoRotate are set to true
        controls.update()

        renderer.render(scene, camera)
    }

    animate()
}

2.9 DataTextureLoader

用于加载二进制文件格式的(rgbe, hdr, ...)的抽象类。 内部使用FileLoader来加载文件， 和创建一个新的 DataTexture.

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

2.10 FileLoader

使用XMLHttpRequest来加载资源的低级类，并由大多数加载器内部使用。 它也可以直接用于加载任何没有对应加载器的文件类型。
属性

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

  • .mimeType : String
      详情 mimeType. 请参考 .setMimeType。默认为 undefined。
  • .responseType : String
      请求的响应类型。 请参考 .setResponseType. 默认为 undefined.
  • .withCredentials : String
      XMLHttpRequest是否使用证书。 请参考 .setWithCredentials. 默认为 undefined.

方法

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

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad (可选) --- 加载完成时将调用。回调参数将是加载的响应。
    3. onProgress (可选) --- 将在加载过程中进行调用。参数将是XMLHttpRequest实例， 其中包含 total 和 loaded 字节
    4. onError (可选) --- 在加载错误时被调用。

加载URL并将响应传递给onLoad函数。

  • .setMimeType ( mimeType : String ) : this
      设置正在加载的文件预期类型 mimeType 。请注意，在许多情况下，这将自动确定，因此默认情况下它是 undefined 。
  • .setResponseType ( responseType : String ) : this
      改变响应的类型，其类型有效值如下:
    1. text 或者空 string (默认) - 返回的数据类型为 string.
    2. arraybuffer - 加载的数据类型到一个数组buffer中 ArrayBuffer 并进行返回。
    3. blob - 返回的数据为 Blob。
    4. document - 使用 DOMParser 解析文件。
    5. json - 将文件解析为 JSON.parse.
typescript 复制代码 
import * as THREE from "three"

export default () => {
    const loader = new THREE.FileLoader();
    //加载一个文本文件，并把结果输出到控制台上
    loader.load(
        // resource URL
        '/animations/animation.js',

        // onLoad回调
        function (data: any) {
            // output the text to the console
            console.log(data)
        },

        // onProgress回调
        function (xhr: ProgressEvent) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

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

2.11 ImageBitmapLoader

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

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

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

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

  • .isImageBitmapLoader : Boolean
      Read-only flag to check if a given object is of type ImageBitmapLoader.
  • .options : String
      一个可选对象，用来设置内部使用的createImageBitmap工厂方法， 默认为undefined.

方法

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

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的image.
    3. onProgress --- 此回调函数暂时不支持
    4. onError --- 在加载错误时被调用。
        从URL中进行加载，并返回将包含数据的image对象。
    5. .setOptions ( options : Object ) : this
        设置createImageBitmap的选项对象。
typescript 复制代码 
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

export default () => {
    const canvas = document.getElementById("demo")

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

    const camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.z = 10;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry();

    const loader = new THREE.ImageBitmapLoader();
    loader.setOptions({ imageOrientation: 'flipY' });
    // 加载一个图片资源
    loader.load(
        // 资源的URL
        '/textures/cubeMaps/img1.png',

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

            const mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
        },

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

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


    const controls = new OrbitControls(camera, renderer.domElement);

    renderer.render(scene, camera);

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate()
}

2.12 ImageLoader

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

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的animation clips.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载并将动画传递给onLoad。

2.13 MaterialLoader

以JSON格式来加载Material的加载器。 默认使用FileLoader进行加载文件。
属性

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

  • .textures : Object
      持有材质的任何纹理的对象，请参考 .setTextures.

方法

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

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的Material。
    3. onProgress --- 将在加载过程中进行调用，参数为进度事件。
    4. onError --- 在加载错误时被调用。

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

  • .parse ( json : Object ) : Material
      json --- JSON对象包含材质参数。
      解析JSON结构，以json对象的参数中的json.type类型，创建一个新的Material。
  • .setTextures ( textures : Object ) : this
      textures --- 对象包含任何被材质所使用的纹理。
typescript 复制代码 
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

export default () => {
    const canvas = document.getElementById("demo")

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

    const camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.z = 10;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry();

    const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });

    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    console.log(JSON.stringify(material.toJSON()))

    const loader = new THREE.MaterialLoader();
    // 加载资源
    loader.load(
        // 资源URL
        'models/json/material.json',
        // onLoad回调
        function (material: THREE.MeshBasicMaterial) {
            mesh.material = material;
        },

        // onProgress回调
        function (xhr: ProgressEvent) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

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

    const controls = new OrbitControls(camera, renderer.domElement);

    renderer.render(scene, camera);

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate()
}

2.14 ObjectLoader

A loader for loading a JSON resource in the JSON Object/Scene format.

此加载器内部使用FileLoader进行加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的object.
    3. onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
    4. onError --- 在加载错误时被调用。

从URL中进行加载，并将被解析的响应内容传递给onLoad。

  • .parse ( json : Object, onLoad : Function ) : Object3D
    1. json --- 必选参数，需要被解析的JSON源。
    2. onLoad --- 当解析完成时被调用，其中参数被解析为object.

解析一个JSON结构，并返回一个threejs对象. 内部使用.load()进行加载, 但也可以直接用于解析先前加载的JSON结构。

  • .parseGeometries ( json : Object ) : Object
      json --- 必选参数，需要被解析的JSON源。
      此函数以JSON结构，用.parse()去解析geometries。
  • .parseMaterials ( json : Object ) : Object
      json --- 必选参数，需要被解析的JSON源。
      此函数通过[page:.parse()来使用MaterialLoader，以解析JSON结构中任意材质。
  • .parseAnimations ( json : Object ) : Object
      json --- 必选参数，需要被解析的JSON源。
      此函数通过.parse()来使用AnimationClip.parse()， 以解析JSON结构中任意动画。
  • .parseImages ( json : Object ) : Object
      json --- 必选参数，需要被解析的JSON源。
      此函数通过.parse()来使用ImageLoader， 以解析JSON结构中任意图片。
  • .parseTextures ( json : Object ) : Object
      json --- 必选参数，需要被解析的JSON源。
      此函数通过.parse()来解析JSON结构中任意纹理。
  • .parseObject ( json : Object, geometries : BufferGeometry, materials : Material, animations :   AnimationClip ) : Object3D
    1. json --- 必选参数，需要被解析的JSON源。
    2. geometries --- required. The geometries of the JSON.
    3. materials --- required. The materials of the JSON.
    4. animations --- required. The animations of the JSON.

此函数通过.parse()来解析JSON结构中任意对象。

2.15 TextureLoader

加载texture的一个类。 内部使用ImageLoader来加载文件。

  • .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
    1. url --- 文件的URL或者路径，也可以为 Data URI.
    2. onLoad --- 加载完成时将调用。回调参数为将要加载的Material。
    3. nProgress --- 将在加载过程中进行调用，参数为进度事件。
    4. onError --- 在加载错误时被调用。

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

typescript 复制代码 
import * as THREE from "three"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

export default () => {
    const canvas = document.getElementById("demo")

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

    const camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.z = 10;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry();

    const texture = new THREE.TextureLoader().load("textures/cubeMaps/nx.jpg");
    const material = new THREE.MeshBasicMaterial({ map: texture });

    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const controls = new OrbitControls(camera, renderer.domElement);

    renderer.render(scene, camera);

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate()
}

三、管理器

3.1 DefaultLoadingManager

LoadingManager是一个全局实例, 当其他加载器没有指定加载管理器时，它将被其他大多数的加载器设为默认的加载管理器。

LoadingManager对于大多数加载器来说已经足够了，但有时您可能需要单独设置加载管理器，例如纹理、模型加载器。

3.2 LoadingManager

其功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器，则会为加载器创建和使用默认全局实例加载器管理器 - 请参阅 DefaultLoadingManager.

一般来说，默认的加载管理器已足够使用了，但有时候也需要设置单独的加载器 - 例如，如果你想为对象和纹理显示单独的加载条。
构造方法

LoadingManager( onLoad : Function, onProgress : Function, onError : Function )

  1. onLoad --- (可选) 所有加载器加载完成后，将调用此函数。

  2. onProgress --- (可选) 当每个项目完成后，将调用此函数。

  3. onError --- (可选) 当一个加载器遇到错误时，将调用此函数。

创建一个新的 LoadingManager.
属性

  • .onStart : Function
      此函数在加载开始时被调用。 有如下参数：
      url --- 被加载的项的url。
      itemsLoaded --- 目前已加载项的个数。
      itemsTotal --- 总共所需要加载项的个数。
      该函数默认为undefined。
  • .onLoad : Function
      所有的项目加载完成后将调用此函数。默认情况下，该函数是未定义的，除非在构造函数中传入。
  • .onProgress : Function
      此方法加载每一个项，加载完成时进行调用。 有如下参数：
      url --- 被加载的项的url。
      itemsLoaded --- 目前已加载项的个数。
      itemsTotal --- 总共所需要加载项的个数。
      默认情况下，该函数为undefined，除非在构造函数中传入。
  • .onError : Function
      此方法将在任意项加载错误时，进行调用。 有如下参数：
      url --- 加载发生错误的项目的url
      默认情况下，该函数为undefined，除非在构造函数中传入。

方法

  • .addHandler ( regex : Object, loader : Loader ) : this
    1. regex --- A regular expression.
    2. loader --- The loader.
        Registers a loader with the given regular expression. Can be used to define what loader should be used in order to load specific files. A typical use case is to overwrite the default loader for textures.// add handler for TGA textures
        manager.addHandler( /.tga$/i, new TGALoader() );
  • .getHandler ( file : String ) : Loader
      file --- The file path.
      Can be used to retrieve the registered loader for the given file path.
  • .removeHandler ( regex : Object ) : this
      regex --- A regular expression.
      Removes the loader for the given regular expression.
  • .resolveURL ( url : String ) : String
      url --- 所要加载的url
      给定URL，使用URL修饰符回调（如果有）并返回已解析的URL。如果未设置URL修饰符，则返回原始URL。
  • .setURLModifier ( callback : Function ) : this
      callback --- 设置URL修饰符成功时回调。使用url参数进行回调，并且必须返回 resolvedURL 。
      如果设置了回调，则在发送请求之前将向每个资源URL传递回调。回调可以返回最初的URL，也可以返回新URL以覆盖加载行为。 此行为可用于从.ZIP、拖拽API和数据URI中加载资源文件。
    *  Note: The following methods are designed to be called internally by loaders. You shouldn't call them directly.*
  • .itemStart ( url : String ) : undefined
      url --- 所要加载的url
      任何使用管理器的加载器都会调用此方法， 当加载器需要开始加载URL时。
  • .itemEnd ( url : String ) : undefined
      url --- 所要加载的url
      任何使用管理器的加载器都会调用此方法， 当加载器需要加载URL结束时。
  • .itemError ( url : String ) : undefined
      url --- 所要加载的url
      任何使用管理器的加载器都会调用此方法， 当加载器出现加载错误时。
相关推荐
哈__2 小时前
React Native 鸿蒙开发：内置 Share 模块实现无配置社交分享
javascript·react native·react.js
liulilittle2 小时前
OPENPPP2 网络驱动模式
开发语言·网络·c++·网络协议·信息与通信·通信
JarvanMo2 小时前
情迷服务器驱动 UI：我在 Flutter 开发中的爱与哀愁
前端
tzy2332 小时前
分享一个 HTTP(S) 代理&抓包工具，拦截和Mock Web客户端请求和服务端响应
前端·网络协议·http
mjhcsp2 小时前
C++ AC 自动机：原理、实现与应用全解析
java·开发语言·c++·ac 自动机
huihuihuanhuan.xin2 小时前
后端八股之java并发编程
java·开发语言
寻星探路2 小时前
【算法通关】双指针技巧深度解析：从基础到巅峰（Java 最优解）
java·开发语言·人工智能·python·算法·ai·指针
代码小学僧2 小时前
普通前端仔的 2025 : 年终总结与 AI 对我的影响
前端·程序员·ai编程
知识分享小能手2 小时前
Ubuntu入门学习教程，从入门到精通，Ubuntu 22.04中的人工智能—— 知识点详解 (25）
人工智能·学习·ubuntu
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定06jdk21下载、安装（Windows、Linux、macOS）07【踩坑笔记】50系显卡适配的 PyTorch 安装08KGG转MP3工具|非KGM文件|解密音频09Overleaf编译超时，超出免费计划编译时限（已解决）102025-04-03 Latex学习1——本地配置Latex + VScode环境