Parse model with react-three-fiber

Question

react-three-fiber provides useLoader to load models. The examples show how to load models from a path/url. I've saved the binary representation of my model in the IndexDB of the browser.

I added this sandbox. It shows how the models are loaded via path/URL (like described in the docs). Also it shows how I need to read the binary from the localStorage into binaryFromLocalStorage.

How would I load/parse binaryFromLocalStorage with react-three-fiber?

Answer 1

LocalStorage can only store strings.

So,

const reader = new FileReader();

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

reader.readAsDataURL(blob);

To read

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

Saving binary to localStorage can be very unstable because localStorage is only 5MB, and different browsers have different limits.

You may want to use indexDB instead.

You can choose to use localForage, which provides a API interface to localStorage