three 中的加载器（下）

在上篇中，介绍了加载器的基本类型，这篇中介绍加载器有多少种以及分别有什么作用

AnimationLoader 动画加载器，需要配置 动画对应的3D模型使用 有两个方法

• load 继承自基类
• parse 将 json 格式的对象转换为 animations 组

// 示例 
    const loader = new THREE.AnimationLoader();
    loader.load('path/to/animations.json', function (animations) {
        // 假设动画文件中包含多个动画，animations 数组将包含多个 AnimationClip
        const walkAnimation = animations[0];
        const jumpAnimation = animations[1];

        // 你可以选择播放其中的某个动画
        const mixer = new THREE.AnimationMixer(mesh);
        const action = mixer.clipAction(walkAnimation);
        action.play();
    });

AudioLoader 音频加载 有一个方法

• 继承基类

    // 创建一个音频监听器并将其添加到相机
    const listener = new THREE.AudioListener();
    camera.add(listener);

    // 创建一个全局音频源
    const sound = new THREE.Audio(listener);

    // 使用 AudioLoader 加载一个音频文件
    const audioLoader = new THREE.AudioLoader();
    audioLoader.load('path/to/sound.mp3', function(buffer) {
        // 将加载的音频数据设置为音频对象的缓冲区
        sound.setBuffer(buffer);
        sound.setLoop(true); // 是否循环播放
        sound.setVolume(0.5); // 设置音量
        sound.play(); // 播放音频
    });

    // 创建一个带有位置的音频源（3D 空间音效）
    const positionalSound = new THREE.PositionalAudio(listener);
    audioLoader.load('path/to/positional-sound.mp3', function(buffer) {
        positionalSound.setBuffer(buffer);
        positionalSound.setRefDistance(20); // 设置声音开始衰减的距离
        positionalSound.play();
    });

    // 将声音添加到一个网格或场景中
    mesh.add(positionalSound);
    scene.add(mesh);

BufferGeometryLoader 有两个方法

• load 加载方法的基类
• parse 将 JSON 格式转换成 BufferGeometry

    // 创建一个 BufferGeometryLoader 实例
    const loader = new THREE.BufferGeometryLoader();

    // loader.parse(geometryJson)  也可以通过此方式处理JSON

    // 加载几何体数据
    loader.load('path/to/geometry.json', function (geometry) {
        // 创建一个材质
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        // 使用加载的几何体和材质创建一个 Mesh
        const mesh = new THREE.Mesh(geometry, material);

        // 将 Mesh 添加到场景中
        scene.add(mesh);

        // 可选：调整网格的位置信息
        mesh.position.set(0, 0, 0);
    });

Cache 缓存文件 两个属性

• enabled 是否启用加载缓存
• files 已缓存文件列表

    THREE.Cache.enabled = true.

CompressedTextureLoader 压缩纹理加载器 有一个方法 支持加载 dds pvr ktx 格式纹理

• load 继承自基类

    // 创建一个 CompressedTextureLoader 实例
    const loader = new THREE.CompressedTextureLoader();

    // 加载压缩纹理文件
    loader.load('path/to/texture.dds', function(texture) {
        // 设置纹理的一些基本属性
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;

        // 创建一个材质并将纹理应用到该材质
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // 创建一个几何体并应用材质
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const mesh = new THREE.Mesh(geometry, material);

        // 将网格添加到场景中
        scene.add(mesh);
    });

CubeTextureLoader 立方贴图 加载器 加载六个图片 有一个方法

• load 继承自基类

    // 创建一个 CubeTextureLoader 实例
    const loader = new THREE.CubeTextureLoader();

    // 定义立方体贴图的路径
    const urls = [
        'path/to/px.jpg', // 右
        'path/to/nx.jpg', // 左
        'path/to/py.jpg', // 上
        'path/to/ny.jpg', // 下
        'path/to/pz.jpg', // 前
        'path/to/nz.jpg'  // 后
    ];

const loader = new THREE.DataTextureLoader();
loader.load('path/to/texture.dat', function(texture) {
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;

    const material = new THREE.MeshBasicMaterial({ map: texture });
    const geometry = new THREE.PlaneGeometry(2, 2);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});
    // 加载立方体贴图
    const cubeTexture = loader.load(urls);

    // 创建一个场景环境贴图
    scene.background = cubeTexture;

    // 创建一个材质并将立方体贴图应用为环境贴图
    const material = new THREE.MeshStandardMaterial({
        envMap: cubeTexture,
        metalness: 1,
        roughness: 0
    });

    // 创建一个几何体并应用材质
    const geometry = new THREE.SphereGeometry(1, 32, 32);
    const mesh = new THREE.Mesh(geometry, material);

    // 将网格添加到场景中
    scene.add(mesh);

DataTextureLoader 数据纹理加载 有一个方法

• load 继承自基类

    // 加载原始的纹理数据 与 RGBELoader 不同的是 RGBE 用来加载环境贴图的高动态范围图像
    const loader = new THREE.DataTextureLoader();
    loader.load('path/to/texture.dat', function(texture) {
        texture.minFilter = THREE.NearestFilter;
        texture.magFilter = THREE.NearestFilter;
        texture.wrapS = THREE.ClampToEdgeWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;

        const material = new THREE.MeshBasicMaterial({ map: texture });
        const geometry = new THREE.PlaneGeometry(2, 2);
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
    });

FileLoader 文件加载三个方法

• load 继承基类
• setMimeType 设置文件的预期类型
• setResponseType 设置加载完成后读取的数据类型 可选值有 text arraybuffer blob document json

    // 创建一个 FileLoader 实例
    const loader = new THREE.FileLoader();

    // 加载 JSON 文件
    loader.load('path/to/file.json', function (data) {
        const json = JSON.parse(data);
        console.log('Loaded JSON:', json);
        // 处理加载的 JSON 数据
    });

ImageBitmapLoader 将图片加载为 ImageBitmap 类型 有两个方法

• load 继承自基类
• setOptions 设置选项 参数

    // 创建一个 ImageBitmapLoader 实例
    const loader = new THREE.ImageBitmapLoader();

    // 加载图像文件并创建 ImageBitmap 对象
    loader.load('path/to/image.jpg', function (imageBitmap) {
        // 创建一个纹理对象，并将 ImageBitmap 应用到纹理上
        const texture = new THREE.Texture();
        texture.image = imageBitmap;
        texture.needsUpdate = true;

        // 创建一个材质，并将纹理应用到该材质
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // 创建一个几何体，并应用材质
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const mesh = new THREE.Mesh(geometry, material);

        // 将网格添加到场景中
        scene.add(mesh);
    });

ImageLoader 图片加载对象 有一个方法

• load 继承基类

    // 创建一个 ImageLoader 实例
    const loader = new THREE.ImageLoader();

    // 加载图像文件
    loader.load('path/to/image.jpg', function (image) {
        // 创建一个纹理对象
        const texture = new THREE.Texture(image);

        // 纹理需要更新
        texture.needsUpdate = true;

        // 创建一个材质，并将纹理应用到材质上
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // 创建一个几何体，并应用材质
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const mesh = new THREE.Mesh(geometry, material);

        // 将网格添加到场景中
        scene.add(mesh);
    });

LoaderUtils 加载器功能函数 有两个方法

• decodeText 将二进制数据（ArrayBuffer 或 Uint8Array）解码为字符串，适用于处理从二进制源读取的文本数据。
• extractUrlBase 从 URL 中提取基础路径，帮助生成和管理资源路径

    // 导入 LoaderUtils
    import { LoaderUtils } from 'three';
    // 假设有一个 Uint8Array 或 ArrayBuffer 数据
    const arrayBuffer = new Uint8Array([72, 101, 108, 108, 111]); // 对应 "Hello" 的 ASCII 值

    // 解码为字符串
    const text = LoaderUtils.decodeText(arrayBuffer);
    console.log('Decoded Text:', text); // 输出: Hello
    // 提取基础路径
    const url = 'https://example.com/assets/images/photo.jpg?query=123';
    const baseUrl = LoaderUtils.extractUrlBase(url);
    console.log('Extracted Base URL:', baseUrl); // 输出: https://example.com/assets/images/

MaterialLoader 材质加载器 一个属性 两个方法

• textures 加载出来的纹理对象
• load 方法 继承基类
• parse 方法 一个参数 将 json 转换为材质对象
• setTextures 方法 一个参数 设置一个纹理对象为当前加载的纹理

    // 创建一个 MaterialLoader 实例
    const loader = new THREE.MaterialLoader();

    // 加载材质配置文件
    loader.load('path/to/material.json', function (material) {
        // 创建一个几何体，并应用加载的材质
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const mesh = new THREE.Mesh(geometry, material);

        // 将网格添加到场景中
        scene.add(mesh);
    });

ObjectLoader 对象加载 可以加载由此对象导入的所有 three 数据类型 有八个方法

• load 继承基类
• parse 两个参数一个 JSON对象 一个回调方法 总入口 自动将其他类型转换为 three 中可以使用的
• parseGeometries 一个参数 转换为几何体定义
• parseMaterials 一个参数 转换为材质定义
• parseAnimations 一个参数 转换为动画定义
• parseImages 一个参数 转换为图片定义
• parseTextures 一个参数 转换为纹理定义
• parseObject 四个参数 parseObject ( json : Object, geometries : BufferGeometry, materials : Material, animations : AnimationClip ) : Object3D 转换为 three 中所需要的模型 除了json包含模型的索引，其他几个参数都是包含了对应的数据列表

    // 创建 ObjectLoader 实例
    const loader = new THREE.ObjectLoader();

    // 使用 load 方法加载 JSON 数据
    loader.load(
      'path/to/scene.json', // JSON 文件的 URL
      (object) => {
        // 在成功加载和解析后执行的回调
        scene.add(object); // 将解析出的对象添加到场景中
        camera.position.z = 5; // 设置相机位置

        // 渲染场景
        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }
        animate();
      },
      undefined, // 可选的进度回调函数
      (error) => {
        console.error('Error loading JSON:', error); // 错误回调函数
      }
    );

TextureLoader 纹理加载 一个方法

• load 继承基类

    // 创建 TextureLoader 实例
    const textureLoader = new THREE.TextureLoader();

    // 加载纹理
    textureLoader.load(
      'path/to/texture.jpg', // 纹理图像的 URL
      (texture) => {
        // 在成功加载纹理后执行的回调
        // 创建材质并将加载的纹理应用到材质上
        const material = new THREE.MeshBasicMaterial({ map: texture });

        // 创建几何体并将材质应用到几何体上
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const cube = new THREE.Mesh(geometry, material);

        // 将几何体添加到场景中
        scene.add(cube);

        // 设置相机位置
        camera.position.z = 5;

        // 渲染场景
        function animate() {
          requestAnimationFrame(animate);
          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;
          renderer.render(scene, camera);
        }
        animate();
      },
      undefined, // 可选的进度回调函数
      (error) => {
        console.error('Error loading texture:', error); // 错误回调函数
      }
    );