expo-three
expo-three copied to clipboard
GLTFLoader doesn't load binary buffer on Android
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!
Related: https://github.com/expo/expo-asset-utils/issues/5
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'],
},
};
@ulvido did you find a solution for "{ isTrusted" : false }"? I have the same problem. Thanks
@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.
@ulvido good idea
@EvanBacon EvanBacon did you find a solution for "{ isTrusted" : false }"? I have the same problem. Thanks
also got this { isTrusted" : false }.
any fix yet?
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!
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)
});
Has anyone made any progress towards a solution for this issue?
any find a solution for this? @dopry can you provide a working example?
@ulvido how did you log the file name as the screen shot? what tool is handy for this verbosity?