加载不在公用文件夹中的 GLTF 文件答案

【问题标题】：Load GLTF file that is not located in Public folder加载不在公用文件夹中的 GLTF 文件
【发布时间】：2022-04-01 01:30:20
【问题描述】：

我发现了一个问题，如果我无法将 GLTF 文件放在我的 React 应用程序的 Public 文件夹中，我就无法将它们加载到场景中。例如，我有MyPVPanel.gltf，我想将它加载到 react 应用程序或我的 npm 库中，或者我总是使用我的 react 组件。

我的问题是：

如果您开发 npm 包，是否可以从特定文件夹导入资产。包有/public 或/assets 之类的东西吗？
我可以配置我自己的包来拥有这样一个包含静态资产的文件夹吗？
如何在没有公用文件夹的情况下加载 GLTF 文件。例如，我们可以在 react 应用程序中毫无问题地导入 .png 文件。

标签： reactjs three.js base64 gltf data-uri

【解决方案1】：

所以有一个东西叫data URI。您可以转换该格式的小文件（基本上是一个 base64 编码的字符串，开头有一些元数据）。

data:[<mediatype>][;base64],<data>

在我的情况下[<mediatype>] 是data:application/octet-stream。

因此，如果您想从应用程序中的特定文件夹加载小文件，首先将您的.gltf 文件重命名为.json。在导入并将其转换为 base64 代码后，您可以使用来自three.js 库的GLTFLoader 加载它。
这是一个代码示例：
import myGLTF from './MyPVPanel.json';
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import myGLTF from "./MyPVPanel.json";

const loader = new GLTFLoader();

const stringGLTF = JSON.stringify(myGLTF) // convert Object to a String
const base64EncodedGLTF = btoa(stringGLTF) // Base64 encode the String

//First part is: 'data:application/octet-stream;base64,'
const resultingDataURI = `data:application/octet-stream;base64,${base64EncodedGLTF}`;

loader.load(
  resultingDataURI,
  (gltf: any) => {
    console.log('Loaded!!!');
    this.scene.add(gltf.scene)
  },
  () => {},
  (e: any) => console.error(e)
);
}}>Load</button>

【讨论】：

请注意，base64 编码可能非常低效，并且 JSON glTF 文件将包含外部引用或嵌入的 base64 数据，这意味着您的网格数据可能会被双重编码以导致双重低效。也许 base64 编码 *.glb 文件会稍微好一些？