当前位置：文江博客话题详情

加载不在公共文件夹中的GLTF文件

发布于 2025-01-18 05:43:45 字数 535 浏览 4 评论 0原文

我发现一个问题，如果我不能将它们放入React应用程序中的公共文件夹中，则无法将GLTF文件加载到场景中。例如，我有mypvpanel.gltf，我想将其加载到React App或NPM库中，或者我总是与React组件一起使用。

我的问题是：

如果您开发NPM软件包，这是否可以从特定文件夹中导入资产。软件包是否具有/public或/Assets之类的东西？
我可以配置自己的软件包以使用具有静态资产的文件夹吗？
如何在没有公共文件夹的情况下加载GLTF文件。例如，我们可以在React应用程序中导入.png文件。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一抹微笑 2025-01-25 05:43:45

因此，有一个名为 data Uri uri uri 。您可以以这种格式转换小文件（基本上是一个基本64编码的字符串，并在其开头带有一些元数据）。

数据：[＆lt; mediatype＆gt;] [; base64]，＆lt; data＆gt;

在我的情况下流。

因此，如果要在应用程序中的特定文件夹中加载小文件，首先，将您的.gltf文件重命名为.json。并且将其导入并将其转换为base64代码后，您可以使用 /code> 来自three.js库。

这是一个代码示例：

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>

So there is a thing named data URI. You can convert small files in that format(which is basically a base64 encoded string with some metadata at the beginning of it).

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

In my case [<mediatype>] is data:application/octet-stream.

So if you want to load small file from specific folder in you application, first of all rename your .gltf file into .json. And after importing and converting it into base64 code you can load it using GLTFLoader from three.js library.

Here is a code example:

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>

回复收藏 0 原文

~没有更多了~