three 加载管理器

在 three 中除了加载器之外还有加载管理器，加载管理器有两个，一处是全局的 DefaultLoadingManager，一个是单独的为每个加载配置加载管理 LoadingManager

DefaultLoadingManager three 全局的加载管理

    // 设置 DefaultLoadingManager 的事件处理程序
    THREE.DefaultLoadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
        console.log(`Started loading file: ${url}.\nLoaded ${itemsLoaded} of ${itemsTotal} files.`);
    };

    THREE.DefaultLoadingManager.onLoad = function () {
        console.log('All resources loaded.');
    };

    THREE.DefaultLoadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
        console.log(`Loading file: ${url}.\nLoaded ${itemsLoaded} of ${itemsTotal} files.`);
    };

    THREE.DefaultLoadingManager.onError = function (url) {
        console.log(`There was an error loading ${url}`);
    };

    // 使用加载器加载资源
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('path/to/texture.jpg');

    // 你可以继续使用其他加载器，它们都会自动使用 DefaultLoadingManager
    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load('path/to/model.gltf', function (gltf) {
        scene.add(gltf.scene);
    });

    // 加载另一个纹理
    textureLoader.load('path/to/another-texture.jpg', function (texture) {
        // 使用加载的纹理进行操作
        console.log('Another texture loaded');
    });

LoadingManager 加载管理器 加载管理器分为加载的钩子方法 与 句柄方法

• onStart 钩子方法 加载开始时调用
• onLoad 钩子方法 资源加载完成时调用
• onProgress 钩子方法 资源加载进度变化时调用，这是浏览器的API回调
• onError 钩子方法 资源加载错误时调用
• addHandler 方法 为特定文件定义加载方法

    // 创建一个自定义的加载器
    class CustomLoader {
        load(url, onLoad, onProgress, onError) {
            // 自定义的加载逻辑
            console.log(`CustomLoader is loading: ${url}`);

            // 模拟资源加载完成
            setTimeout(() => {
                onLoad({ data: "Custom data" });
            }, 1000);
        }
    }

    // 创建 LoadingManager 实例
    const loadingManager = new THREE.LoadingManager();
    
    // 自定义 resolveURL 方法 适用于更为静态的、全局的 URL 预处理，通常在初始化时设置好，不再频繁更改。
    loadingManager.resolveURL = function(url) { 
        // 添加一个基于环境的前缀，比如静态资源服务器地址 
        const prefix = "https://cdn.example.com/assets/"; 
        const resolvedURL = prefix + url; 
        console.log(`Resolved URL: ${resolvedURL}`); 
        return resolvedURL; 
   };
   
   // 适用于需要灵活、动态修改 URL 的场景，通常用于需要在应用程序的生命周期中多次调整的情况。
   loadingManager.setURLModifier(function(url) { 
       return url + '?version=1.0'; 
   });

    // 为特定文件类型添加自定义加载器
    loadingManager.addHandler(/\.custom$/, new CustomLoader());

    // 创建 TextureLoader 使用同一个 LoadingManager
    const textureLoader = new THREE.TextureLoader(loadingManager);

    // 尝试加载不同类型的资源
    textureLoader.load('path/to/texture.jpg', function (texture) {
        console.log('Texture loaded');
    });

    textureLoader.load('path/to/asset.custom', function (data) {
        console.log('Custom asset loaded:', data);
    });
    
    // 现在移除处理 .custom 文件的 CustomLoader 
    loadingManager.removeHandler(/\.custom$/);

• removeHandler 方法 移除自定义加载管理
• resolveURL 方法 请求发出之前对URL做出的回调封装
• itemStart 方法 每一个新资源开始时触发
• itemEnd 方法 每一个新资源结束时触发
• itemError 方法 每一个新资源错误时触发