使用 react-three-fiber 解析模型

Question

react-three-fiber provides useLoader to load models. The examples 显示如何从 path/url 加载模型。我已将模型的二进制表示形式保存在浏览器的 IndexDB 中。

我添加了这个 sandbox。它显示了如何通过 path/URL 加载模型（如文档中所述）。它还显示了我需要如何将二进制文件从 localStorage 读取到 binaryFromLocalStorage.

我如何 load/parse binaryFromLocalStorage 反应三纤维？

Answer 1

LocalStorage 只能存储字符串。

所以，

const reader = new FileReader();

reader.onload = (event) => {
  localStorage.setItem("file", event.target.result);
}

reader.readAsDataURL(blob);

阅读

dataURItoBlob(localStorage.getItem("file")) // Blob

将二进制文件保存到 localStorage 会非常不稳定，因为 localStorage 只有 5MB，不同的浏览器有不同的限制。

您可能想改用 indexDB。

您可以选择使用 localForage，它为 localStorage

提供 API 接口

Parse model with react-three-fiber