古法编程

Three.js 资源加载指南：模型、纹理与异步加载优化

解决 3D 场景资源导入痛点：通过配置 GLTFLoader、TextureLoader 等加载器，实现模型、贴图及 HDR 环境图的快速导入，并构建完善的异步加载进度管理机制。

为什么需要这个技能

在构建 Three.js 场景时，绝大部分视觉内容都依赖外部资源文件。如果简单的使用回调函数，在面对大量模型和高分辨率纹理时，容易出现回调地狱，且无法给用户提供直观的加载进度条。

此外，3D 模型文件（如 GLB）往往较大，直接加载会导致严重的掉帧或加载缓慢。掌握 Draco 压缩、KTX2 纹理加载以及 LoadingManager 的协调机制，能显著提升 Web 3D 应用的启动速度和运行性能。

适用场景

  • 需要将 Blender 或 Maya 制作的 GLTF/GLB 模型导入网页。
  • 需要为场景添加 PBR 材质贴图、环境光照贴图（HDR/EXR）。
  • 构建游戏或大型 3D 演示时，需要实现一个加载进度界面（Loading Screen）。
  • 优化资源体积，使用 Draco 或 Meshopt 压缩技术减少带宽占用。

核心工作流

1. 资源协调管理

使用 THREE.LoadingManager 统一监控所有加载器的状态，在所有资源就绪后一次性启动场景。

const manager = new THREE.LoadingManager();

manager.onProgress = (url, loaded, total) => {
  const progress = (loaded / total) * 100;
  console.log(`加载进度: ${progress.toFixed(1)}%`);
};

manager.onLoad = () => {
  console.log("所有资源加载完成！");
  startGame();
};

const gltfLoader = new GLTFLoader(manager);
const textureLoader = new THREE.TextureLoader(manager);

2. 核心模型加载 (GLTF/GLB)

GLTF 是 Web 端的标准格式。对于大型模型，建议配置 DRACOLoader 进行解压。

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

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

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load("model.glb", (gltf) => {
  scene.add(gltf.scene);
});

3. 纹理与环境映射

除了基础的 TextureLoader，对于高动态范围环境图，推荐使用 RGBELoader 结合 PMREMGenerator 来实现真实的 PBR 反射效果。

import { RGBELoader } from "three/addons/loaders/RGBELoader.js";

const rgbeLoader = new RGBELoader();
rgbeLoader.load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});

4. 异步 Promise 封装

为了避免回调嵌套，将加载器封装为 Promise，配合 async/await 和 Promise.all 实现并行加载。

function loadModel(url) {
  return new Promise((resolve, reject) => {
    new GLTFLoader().load(url, resolve, undefined, reject);
  });
}

async function initScene() {
  try {
    const [model, env] = await Promise.all([
      loadModel("robot.glb"),
      loadHDR("studio.hdr")
    ]);
    scene.add(model.scene);
    scene.environment = env;
  } catch (e) {
    console.error("资源加载失败", e);
  }
}

下载和安装

下载 threejs-loaders 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐