Three.js 工程向：GLTFLoader 管线、Draco/KTX2 与资源管理

文章目录

• • [一、GLTFLoader 在工程中的位置](#一、GLTFLoader 在工程中的位置)
  • [二、Draco 与 KTX2 配置](#二、Draco 与 KTX2 配置)
  • 三、缓存与并发
  • 四、释放策略
  • 五、结语

一、GLTFLoader 在工程中的位置

GLTFLoader 负责模型、材质、动画、纹理的统一解析，是 Three.js 资产接入核心。

二、Draco 与 KTX2 配置

const gltfLoader = new GLTFLoader(manager);
const draco = new DRACOLoader();
draco.setDecoderPath('/draco/');
gltfLoader.setDRACOLoader(draco);

const ktx2 = new KTX2Loader(manager);
ktx2.setTranscoderPath('/basis/').detectSupport(renderer);
gltfLoader.setKTX2Loader(ktx2);

压缩网格与纹理可明显减少下载体积与显存压力。

三、缓存与并发

同一 URL 建议做 Promise 级缓存，避免重复解析。配合 LoadingManager 管理进度与错误重试。

四、释放策略

切换场景时按"几何体、材质、纹理、动画"顺序释放，防止显存泄漏。

五、结语

GLTF 工程化关键在"解码器配置 + 加载缓存 + 生命周期管理"。