如何使用GLTFLoader加载多模型后执行自定义start()函数

核心思路是将单个GLTF的加载过程封装为Promise实例，通过Promise.all监听所有加载任务的完成状态，所有模型加载成功后再依次执行配置、启动渲染流程，从流程上保证执行后续逻辑时所有模型都已就绪，无需额外判空。

代码实现 #

1. 封装加载工具与全局模型存储 #

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

const loader = new GLTFLoader()
// 全局存储所有加载完成的模型，key为自定义模型名，value为模型scene对象
const loadedModels = {}

/**
 * 单个GLTF模型加载封装
 * @param {string} modelName 自定义模型名称
 * @param {string} filePath 模型文件路径
 * @returns {Promise} 加载完成的Promise实例
 */
function loadSingleGLTF(modelName, filePath) {
  return new Promise((resolve, reject) => {
    loader.load(
      filePath,
      (gltf) => {
        const modelObj = gltf.scene
        modelObj.name = modelName
        scene.add(modelObj)
        loadedModels[modelName] = modelObj
        resolve()
      },
      undefined,
      (loadError) => reject(loadError)
    )
  })
}

2. 批量加载与流程控制 #

// 配置所有需要加载的模型列表
const modelToLoad = [
  { name: 'mainCharacter', path: './assets/character.gltf' },
  { name: 'mainWeapon', path: './assets/weapon.gltf' },
  { name: 'sceneBackground', path: './assets/env.gltf' }
  // 其他模型直接在此处追加即可
]

// 批量启动加载，所有加载完成后执行后续流程
Promise.all(modelToLoad.map(item => loadSingleGLTF(item.name, item.path)))
  .then(() => {
    // 所有模型加载完成，执行自定义配置逻辑
    start()
    // 配置完成后启动渲染循环
    update()
  })
  .catch((error) => {
    console.error('模型加载失败，请检查文件路径：', error)
  })

3. 自定义配置与渲染逻辑 #

function start() {
  // 此时loadedModels内所有模型均已完成加载赋值，无需判断null
  // 父子关系绑定示例
  loadedModels.mainCharacter.add(loadedModels.mainWeapon)
  // 缩放配置示例
  loadedModels.mainCharacter.scale.set(1.5, 1.5, 1.5)
  // 其他位置、旋转、材质调整等逻辑均可直接调用对应模型
}

function update() {
  renderer.render(scene, camera)
  requestAnimationFrame(update)
}

方案优势 #

• 流程上保证只有所有模型加载成功才会执行后续配置、渲染逻辑，完全规避非空判断
• 加载列表与逻辑解耦，新增/删除加载模型仅需修改modelToLoad列表即可
• 可统一捕获处理加载异常，方便排查问题

内容的提问来源于stack exchange，提问作者ブク-Buku