Support loading models from app private storage

[l3utterfly]

Typical use-case:

1. app downloads model files from an online repository
2. saves those files in the app private storage, for example using react-native-fs. Those files will be present in a path such as ${RNFS.DocumentDirectoryPath}/path/to/model. They can be accessed through expo assets via: file://{full path}
3. Developers should be able to load the model using const fbx = useLoader(FBXLoader, 'file://' + path)

The current implementation of does not seem to support this. It tries to call "load" from threejs, which tries to download the file from the internet, which does not work.

This is a modified FBXLoader that will work for loading local FBX files:

class LocalFBXLoader extends Loader {
  constructor(manager) {
    super(manager);
  }
  load(url, onLoad, onProgress, onError) {
    // url must start with "file://"
    if (!url.startsWith('file://')) {
      throw new Error("LocalFBXLoader: url must start with 'file://'");
    }

    const scope = this;
    const path =
      scope.path === '' ? LoaderUtils.extractUrlBase(url) : scope.path;

    // Read file as ArrayBuffer
    RNFS.readFile(url, 'base64')
      .then(base64String => {
        const raw = base64.decode(base64String); // Decode base64
        const rawLength = raw.length;
        const buffer = new ArrayBuffer(rawLength);
        const array = new Uint8Array(buffer);
        for (let i = 0; i < rawLength; i++) {
          array[i] = raw.charCodeAt(i);
        }

        onLoad(scope.parse(buffer, path + 'Textures/'));
      })
      .catch(onError);
  }

  loadAsync(url, onProgress) {
    // return a Promise after calling this.load
    const scope = this;

    return new Promise((resolve, reject) => {
      scope.load(url, resolve, onProgress, reject);
    });
  }

.... Rest of code same as ThreeJS/FBXLoader

I have a working version of this loader being used in my app. If you feel this is a worthwhile inclusion, I can make a pull request.

[CodyJasonBennett]

Is this related to #2986 or still a problem despite our use of expo-asset? We don't assume that loaders implement parse nor is that implemented consistently, so we default to the networking stack except in specific cases (#2982). This could be one of them.

[l3utterfly]

I’m actually already using the prerelease version in #2982. It’s still not able to load any files from the private storage. (It is, however, able to load from bundled assets using require(…) though)

…

________________________________ From: Cody Bennett ***@***.***> Sent: Monday, September 4, 2023 8:28:26 AM To: pmndrs/react-three-fiber ***@***.***> Cc: l3utterfly ***@***.***>; Author ***@***.***> Subject: Re: [pmndrs/react-three-fiber] Support loading models from app private storage (Issue #2987) Is this related to #2986<#2986> or still a problem despite our use of expo-asset? We don't assume that loaders implement parse nor is that implemented consistently, so we default to the networking stack except in specific cases (#2982<#2982>). This could be one of them. — Reply to this email directly, view it on GitHub<#2987 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABVFX2ZGJCXL2HEBS3MSN43XYUOCVANCNFSM6AAAAAA4JM74I4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[CodyJasonBennett]

We had a similar case already implemented for Android release mode where we have to copy to a cache directory. Included a possible fix in dd4b300 or https://pkg.csb.dev/pmndrs/react-three-fiber/commit/dd4b3006/@react-three/fiber.

[l3utterfly]

Thanks, I’ll try this and get back to you

…

________________________________ From: Cody Bennett ***@***.***> Sent: Monday, September 4, 2023 10:48:00 AM To: pmndrs/react-three-fiber ***@***.***> Cc: l3utterfly ***@***.***>; Author ***@***.***> Subject: Re: [pmndrs/react-three-fiber] Support loading models from app private storage (Issue #2987) We had a similar case already implemented for Android release mode where we have to copy to a cache directory. Included a possible fix in dd4b300<dd4b300> or ***@***.***/fiber. — Reply to this email directly, view it on GitHub<#2987 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABVFX2ZSTHU7GX7OKODR5NLXYU6OBANCNFSM6AAAAAA4JM74I4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[l3utterfly]

Hi, I quickly tried that branch with a local file, got the error: Error: Could not load file:///data/user/0/com.laylascenevisualiser/files/lola/lola_unreal.fbx: Cannot load an empty url

Tracing through the code a little, I think the issue is this:

1. calling threejs's useFBX loader
2. It calls the FileLoader implementation which attempts to load the file
3. you are polyfilling the FileLoader.load method with call to getAsset

Here's the polyfill code I found:

THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
    if (this.path) url = this.path + url;

    const request = new XMLHttpRequest();
    getAsset(url).then(asset => {
      request.open('GET', asset.uri, true);
      request.addEventListener('load', event => {
        if (request.status === 200) {
          onLoad == null ? void 0 : onLoad(request.response);
          this.manager.itemEnd(url);
        } else {
          onError == null ? void 0 : onError(event);
          this.manager.itemError(url);
          this.manager.itemEnd(url);
        }
      }, false);
      request.addEventListener('progress', event => {
        onProgress == null ? void 0 : onProgress(event);
      }, false);
      request.addEventListener('error', event => {
        onError == null ? void 0 : onError(event);
        this.manager.itemError(url);
        this.manager.itemEnd(url);
      }, false);
      request.addEventListener('abort', event => {
        onError == null ? void 0 : onError(event);
        this.manager.itemError(url);
        this.manager.itemEnd(url);
      }, false);
      if (this.responseType) request.responseType = this.responseType;
      if (this.withCredentials) request.withCredentials = this.withCredentials;
      for (const header in this.requestHeader) {
        request.setRequestHeader(header, this.requestHeader[header]);
      }
      request.send(null);
      this.manager.itemStart(url);
    }).catch(onError);
    return request;
  };

I don't think this is sufficient for local storage files. Even after getting the asset local uri, your polyfill still attempts to use XMLRequest to get the file, which results in the error above.

I think a suitable change could be modifying the polyfill function to detect if the uri starts with file://, and if so, plug in the RNFS.readFile function.