如何在BabylonJS中加载.gltf及配套.bin、.png资源

云原生阿岚

2026-9-29

BabylonJS 加载本地多文件GLTF资源解决方案

现有代码问题排查

变量名错误：代码中存储文件数组的变量为files，但调用loadFiles方法时传入的是未定义的asheFiles，属于笔误导致的直接加载失败
资源文件名不匹配：PNG文件的name属性为teest.png，而GLTF文件内部声明的纹理资源名应为test.png，BabylonJS加载时会严格按照GLTF内的资源名称匹配本地文件，名称不一致会导致资源解析中断
缺少错误监听逻辑：仅配置了加载成功回调，没有错误监听，无法定位具体加载失败原因

正确实现代码

// 1. 先统一修正所有File对象的name属性，保证和GLTF内声明的资源名完全一致
const files = window.files.map(file => {
  // 用提前存储的correctName覆盖原name，解决png文件名拼写错误问题
  return new File([file], file.correctName, { type: file.type });
});

// 2. 初始化FilesInput并配置完整回调
const filesInput = new BABYLON.FilesInput(
  engine, 
  scene,
  // 加载成功回调
  (loadedScene) => {
    console.log('场景加载成功');
    // 加载完成后默认渲染第一个激活相机
    if (loadedScene.activeCamera) {
      loadedScene.activeCamera.attachControl(engine.getRenderingCanvas());
    }
  },
  // 进度回调（可选）
  () => {},
  // 异步资源加载完成回调（部分版本需要监听该回调才能触发完整加载逻辑）
  () => {
    console.log('异步资源加载完成');
  },
  // 加载错误回调
  (scene, message, exception) => {
    console.error('加载失败：', message, exception);
  }
);

// 3. 传入修正后的文件数组触发加载
filesInput.loadFiles({
  dataTransfer: {
    files: files
  }
});