GLTFLoader doesn't load binary buffer on Android

[Toseben]

Using a localUri like this: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540arttu%252Fsignlab-ar-prototype/ExponentAsset-edefa90125f1739a3f962678f2406a92.bin Android outputs an error from THREE.FileLoader: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js#L1778

The problem sounded similar as in the below link, being an issue only on Android and relating to localUri. However Expo.FileSystem is not being used and Expo.Asset.downloaded flag is set to true. https://github.com/expo/expo-three/issues/10/

I also noticed that AssimpLoaderExample.js from expo-three outputs a similar error on Android. I guess there are somehow related as both use THREE.FileLoader and are in binary buffer file format.

All of this works perfectly on iOS!

[EvanBacon]

Related: https://github.com/expo/expo-asset-utils/issues/5

[ulvido]

for android 9 i got this error for loading glb and gltf files.

Error: console.error: { isTrusted" : false }

Screenshot:

APP.js

"use strict";

// GLOBALS
global.THREE = global.THREE || THREE;

// IMPORTS
import React, { useEffect } from 'react';
import { THREE } from 'expo-three';
import { GLView } from 'expo-gl';
import { Renderer } from 'expo-three';
import { Asset } from 'expo-asset';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// COMPONENT
export default function App() {

  useEffect(() => {
    // Create an Asset from a resource
    const loader = new GLTFLoader();
    const asset = Asset.fromModule(require("./model/monkey.gltf"));
    asset.downloadAsync()
      .then(() => console.log(asset.localUri))
      .then(() => loader.load(asset.localUri, group => {
        // Model loaded...
        console.log("Model Loaded!")
      }))
      .catch(err => console.log("Load Error: ", err));
  }, [])

  return (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={gl => {
        // Create a WebGLRenderer without a DOM element
        console.log("Context created")
        const renderer = new Renderer({ gl });
        renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
      }}
    />
  );
}

metro.config.js

module.exports = {
  resolver: {
    assetExts: ['db', 'mp3', 'ttf', 'obj', 'png', 'jpg', 'gltf', 'glb'],
  },
  transformer: {
    assetPlugins: ['expo-asset/tools/hashAssetFiles'],
  },
};

[igorroman777]

@ulvido did you find a solution for "{ isTrusted" : false }"? I have the same problem. Thanks

[ulvido]

@ulvido did you find a solution for "{ isTrusted" : false }"? I have the same problem. Thanks

unfortunately no. the error consumed my energy so I quit trying and begin to play farcry primal.

[igorroman777]

@ulvido good idea

[igorroman777]

@EvanBacon EvanBacon did you find a solution for "{ isTrusted" : false }"? I have the same problem. Thanks

[p4tric]

also got this { isTrusted" : false }.

any fix yet?

[janweigel]

Hi @igorroman777 did you or anyone else meanwhile find a way to successfully load gltf data on android? I have the same problem and can't find a way to fix this. Thank you!

[dopry]

I switched to loading with asset.uri instead of asset.localUri and it seems to work for me..

     loader.load(asset.uri, (gltf) => {
        console.log('asset loaded', asset, gltf)
        ref=gltf

    }, (event: ProgressEvent<EventTarget>) => {
        console.log('onProgress', event, asset);
    }, (error: ErrorEvent) => {
        console.log('onError', error, asset)
    });

[murk-magnuson]

Has anyone made any progress towards a solution for this issue?

[hopewise]

any find a solution for this? @dopry can you provide a working example?

[hopewise]

@ulvido how did you log the file name as the screen shot? what tool is handy for this verbosity?