用途
本技能面向 Three.js 中的资源加载场景,帮助开发者加载 3D 模型、纹理、HDR 环境贴图,并管理加载进度。适用于需要在网页中加载 GLTF/GLB 模型、图片纹理、环境贴图,或对多个资源进行统一加载与进度跟踪的项目。
主要能力
加载管理器(LoadingManager)
可协调多个加载器并跟踪进度,提供 onStart、onLoad、onProgress、onError 回调,便于在全部资源加载完成后启动后续逻辑,或更新进度条。
纹理加载(TextureLoader)
支持回调式与同步式加载纹理,并可配置色彩空间(SRGBColorSpace、LinearSRGBColorSpace)、包裹方式(RepeatWrapping、ClampToEdgeWrapping、MirroredRepeatWrapping)、重复与偏移、旋转、过滤方式(NearestFilter、LinearFilter、LinearMipmapLinearFilter)、各向异性过滤、flipY 等。
立方体贴图(CubeTextureLoader)
用于加载环境贴图和天空盒,按正/负 X、Y、Z 六个面加载图片,可作为场景背景或环境贴图。
HDR/EXR 加载
通过 RGBELoader 加载 HDR、EXRLoader 加载 EXR,配合 EquirectangularReflectionMapping 用作环境贴图或背景。还可使用 PMREMGenerator 生成预过滤环境贴图以支持 PBR。
GLTF/GLB 加载
支持加载最常见的 Web 3D 格式,可获取场景、动画、相机、资源信息与用户数据。支持 Draco 压缩(DRACOLoader)与 KTX2 纹理(KTX2Loader)。加载后可遍历模型启用阴影、查找特定网格、调整材质、居中与缩放。
其他模型格式
提供 OBJ + MTL、FBX、STL、PLY 的加载示例。
异步/Promise 加载
可将加载器 Promise 化,使用 async/await 与 Promise.all 并行加载多个资源。
缓存
支持 THREE.Cache 内置缓存,以及自定义 AssetManager 类管理纹理与模型缓存。
不同来源加载
支持 Data URL/Base64、Blob URL、ArrayBuffer(配合 loader.parse)、自定义路径与 URL 修饰器。
错误处理
提供优雅降级、重试逻辑、超时处理示例。
使用方式
通过 import 从 "three" 与 "three/addons/loaders/" 引入对应加载器,创建加载器实例后调用 load 方法并传入 URL 与回调。可传入 LoadingManager 实例以统一跟踪进度。具体代码示例见技能文档中的各章节。
适用场景
- 在 Three.js 场景中加载 GLTF/GLB 模型并播放动画
- 加载纹理并配置色彩空间、包裹、过滤等参数
- 加载 HDR/EXR 环境贴图用于 PBR 渲染
- 加载 OBJ、FBX、STL、PLY 等其他格式模型
- 管理多个资源的加载进度与错误处理
- 使用 Draco/KTX2 压缩优化加载性能
限制
资料未提供关于收费、价格、平台支持范围、性能基准或效果保证的信息。部分加载器(如 TextureLoader 的 onProgress)不支持图片加载进度。具体兼容性与版本要求暂未提供。