threejs-loaders

用途

本技能面向 Three.js 中的资源加载场景，帮助在网页 3D 项目中加载 3D 模型、纹理、HDR 环境贴图，并管理加载进度。适用于需要引入 GLTF/GLB、图片纹理、环境贴图或其它模型格式的 Three.js 应用。

主要能力

GLTF/GLB 加载：使用 GLTFLoader 加载最常见的 Web 3D 格式，可读取场景、动画、相机与资源信息，并支持 Draco 几何压缩与 KTX2 纹理压缩。
纹理加载：TextureLoader 加载图片纹理，可配置色彩空间、包裹模式、重复/偏移、旋转、过滤方式与各向异性过滤；CubeTextureLoader 加载六面环境贴图/天空盒。
HDR/EXR 环境贴图：RGBELoader 与 EXRLoader 加载环境贴图，配合 PMREMGenerator 生成用于 PBR 的预过滤环境贴图。
其它模型格式：OBJ + MTL、FBX、STL、PLY 的加载方式。
加载进度管理：LoadingManager 统一协调多个加载器，提供 onStart、onLoad、onProgress、onError 回调。
异步与 Promise 加载：将加载器封装为 Promise，配合 Promise.all 并行加载多个资源。
缓存：THREE.Cache 内置缓存，以及自定义 AssetManager 管理纹理与模型复用。
多来源加载：支持 Data URL/Base64、Blob URL、ArrayBuffer 解析、自定义路径与 URL 修饰。
错误处理：回退、重试、超时等处理方式。
性能建议：使用压缩格式、渐进式加载、懒加载、CDN、启用缓存等。

使用方式

通过 import * as THREE from "three" 引入核心库，再从 three/addons/loaders/ 引入对应加载器。例如 GLTFLoader 的典型用法：

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
const loader = new GLTFLoader();
loader.load("model.glb", (gltf) => {
  scene.add(gltf.scene);
});

纹理加载示例：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("texture.jpg");

LoadingManager 可传入各加载器以统一跟踪进度：

const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
  const progress = (loaded / total) * 100;
  updateProgressBar(progress);
};
const textureLoader = new THREE.TextureLoader(manager);
const gltfLoader = new GLTFLoader(manager);

Draco 压缩模型需设置解码器路径：

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
dracoLoader.preload();
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

KTX2 纹理需设置转码器路径并检测支持：

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/basis/");
ktx2Loader.detectSupport(renderer);
gltfLoader.setKTX2Loader(ktx2Loader);

HDR 环境贴图配合 PMREMGenerator：

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
new RGBELoader().load("environment.hdr", (texture) => {
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  scene.environment = envMap;
  scene.background = envMap;
  texture.dispose();
  pmremGenerator.dispose();
});

适用场景

在 Three.js 场景中加载 GLTF/GLB 模型并播放其动画。
加载图片纹理并正确配置色彩空间与过滤。
加载 HDR/EXR 环境贴图用于 PBR 渲染。
加载 OBJ、FBX、STL、PLY 等其它格式模型。
需要显示加载进度或统一管理多个资源加载时。
需要缓存、复用资源或从不同来源（Base64、Blob、ArrayBuffer）加载时。

限制

资料未提供该技能的具体安装方式、收费模式、平台支持范围或效果保证等信息，暂未提供。使用前请确认 Three.js 版本与各加载器路径的兼容性。

技能介绍

用途

主要能力

使用方式

适用场景

限制