Load/Parse 来自 STRING 的 gltf 3D 数据（不是来自文件），使用 react-three-fiber

Question

免责声明：

起初我想说我是网络开发的新手 - 也许这个问题是由于缺乏基本知识造成的，因此我将不胜感激任何有用的建议。

问题：

我正在尝试在我的网络应用程序上加载 gltf 格式的 3D 数据，但数据是动态的 -> 可能会在使用网站时发生变化。因为我想避免在每次更改之间创建一个新文件，所以我宁愿从 JSON 字符串上传 gltf 数据。这可以通过三个库本身实现：

    let loader = new THREE.GLTFLoader();
    loader.parse(JSON.stringify(jsonGltf),'' ,(gltf) => {
        model = gltf.scene;scene.add(model);
    }, true);

但是我想坚持使用 react-three-fiber + drei，因为它易于与 React 一起使用。不幸的是，我无法在示例或其他人的代码中找到解决方案。

可以在此处找到可编辑的沙箱：

https://codesandbox.io/s/priceless-knuth-cb1mo?file=/src/App.js

字符串数据存储在const surfGltgData

Answer 1

这很简单，因为 GLTFLoader 具有解析功能。只需获取您的 arraybuffer 并将其提供给加载程序即可。这是一个仍然使用悬念的示例，因此您可以获得某种长时间解析的加载屏幕 https://codesandbox.io/s/arraybuffer-dof-1sjyd

Load/Parse 来自 STRING 的 gltf 3D 数据（不是来自文件），使用 react-three-fiber

Load/Parse gltf 3D data from STRING (not from file) with react-three-fiber

string

parsing

json

gltf

react-three-fiber