如何将 .gltf 文件与其他资产组合；用于 babylonjs 的 bin 和 png 文件

Posted 2023-03-16

【中文标题】如何将 .gltf 文件与其他资产组合；用于 babylonjs 的 bin 和 png 文件

【英文标题】：How to combine .gltf file with other assets; bin and png files for use in babylonjs

【发布时间】：2021-12-10 00:26:45

【问题描述】：

我觉得我很接近但仍然缺少一些东西。这是我目前所拥有的

var files = window.files;
console.log(files) // => (3) [File, File, File]
// File objects:
// 0: File correctName: 'test.bin', name: 'test.bin' …
// 1: File correctName: 'test.gltf', name: 'test.gltf',  …
// 2: File correctName: 'test.png', name: 'teest.png', …

var fi = new BABYLON.FilesInput(engine, scene, (s) => 
   console.log('here in scene loaded callback');
)
fi.loadFiles( dataTransfer:  files: asheFiles  );

然而，场景加载的回调永远不会被调用。我也没有看到页面中的画布元素上呈现任何内容。

根据他们在这里的示例，我知道显然有一种方法可以做到这一点： https://sandbox.babylonjs.com/

我只是想弄清楚如何重新创建它。

【问题讨论】：

看起来sandbox source code 在线，也许可以在那里寻求帮助？

【参考方案1】：

好的，伙计们，我确实有一个解决方案。

概述

在 *** 上搜索了他们的许多文档页面、在线论坛和类似问题后，我意识到 Babylon js 并没有真正支持直接文件加载 API。它们具有可以将文件对象作为参数的函数，但最终无法满足消化拆分为多个部分（即 .gltf、.png 和 .bin）的 gltf 文件的需要。因为一旦 BABYLON 解析它并立即开始通过网络请求随附的文件（.png 和 .bin），在 gltf 文件上使用提供的方法（例如 BABYLON.SceneLoader.Append）将失败。这里理论上可以使用 .glb 文件，但这不是我在项目中使用的文件格式。

您需要破解库以允许您执行所需的操作。我开始查看上面链接沙箱中使用的示例代码。他们使用这个FileInput 类在拖放事件后以某种方式将所有随附的文件一起加载。我通过以下方式模拟了拖放功能：

function sceneLoadedCB(newScene)  window.scene = newSene; initCamera(newScene, canvas); 
const fi = new BABYLON.FilesInput(engine, scene, sceneLoadedCB)
fi.loadFiles( 
 dataTransfer:  files: [gltfFileObject, pngFileObject, binFileObject] 
)

这对我的目的来说已经足够了，只是它总是会创建另一个场景对象来代替当前对象，从而阻止我加载具有多个 gltf 对象的场景。资产容器无法解决这个问题，因为它们总是绑定到创建它们的场景；您不能将资产从一个场景转移到另一个场景。

解决方案

我没有对解析和分组文件的逻辑进行逆向工程，因为它们都是同一个 gltf 对象的一部分。但我确实发现 FilesInputStore 类的这个静态属性被用作存储实际 javascript File 对象的地方。如果您使用带有文件资产的 gltf 文件填充此存储，您将能够将它们一起加载，因为它们都是 gltf 文件的一部分。

演示：

var theScene // your babylon scene instance
const renderLoop = (sceneToRender) => 
  sceneToRender = sceneToRender || window.scene
  sceneToRender.render();
  sceneToRender.getEngine().runRenderLoop(renderLoop);
;

yourGLTFFiles.forEach((file) => 
    window.BABYLON.FilesInputStore.FilesToLoad[file.name] = file
)
const gltfFile = yourGLTFFiles.find((file) => file.name.includes('gltf'))

BABYLON.SceneLoader.Append('file:', gltfFile, theScene, function (loadedScene) 
  console.log('here in scene loaded callback, scene: ', loadedScene)
  // below will be true since append adds to the scene instance you passed it
  console.log(loadedScene === theScene)
  renderLoop(theScene)
); 

我花了很长时间才解决这个问题。我希望这个解决方案可以节省您构建出色项目的时间！