Unable to load .glb and .gltf models

[haydenlinder]

Related pull request: #165 (which was mentioned in this issue)

I am unable to load .glb or .gltf models in iOS.
Works on web.
Have not tested on Android.

Here's my App.js:

import ExpoTHREE from 'expo-three';
// inside component with access to the scene 
//  ...
    useEffect(() => {
        ExpoTHREE.loadAsync(
            uri,
            event => {
                console.log(event);
            },
            req => {
                console.log('requesting resource: ',req);
                return uri;
            }
        )
        .then(model => {
            scene.add(model.scene);
        })
        .catch(er => {
            console.log('error': ', er);
        })
    }, [])
//  ...

Note that I had to change the following in /node_modules/three/jsm/loders/GLTFLoader (see this issue: #144)

var ar = new Uint8Array(bufferView)
new Blob( [ ar ] , ... )

When I run on my physical iOS device I get this output from the event callback:

Event {
  "isTrusted": false,
  "lengthComputable": true,
  "loaded": 5972220,
  "total": 5972220,
}

[BrandonBlanchard]

I've been able to get around the "isTrusted" part of this by using the asset.uri rather than the asset localUri.

const getUrl = async () => {
  const asset = Asset.fromModule(
    require('../../../../../public/3d/models/model.glb')
  );
  await asset.downloadAsync();

  return asset.uri;
};

const model = useAsyncMemo<GLTF>(() => loadAssetAsync(fileUrl), [fileUrl]);

Once the loader completes the model shows for a brief moment and then disappears. I've validated the model using the vs code gltf extension so I doubt the issue is there. This also occurs with the following filetypes .glb, .gltf, .fbx.

A fix or a way to work around this would be great!

[kyaroru]

Can refer to this : #151 (comment) 😉