expo-three: loadAsync not working with FBX [Android]

After going through so many googling & github issues or even three.js forum (from 0 exp in 3d rendering few weeks back until today), I’m finally able to load these 3 types of models: OBJ, FBX, GLTF - (.glb) in release mode for both android & ios using RN standalone app (barebone RN app with react-native-unimodules installed)

To learn three.js, I created https://github.com/kyaroru/ShibaThree & https://github.com/kyaroru/ReactShibaThree and finally trying out on mobile app using expo-three, but I face so many issues and seems to be unresolvable at first.

Not until today! Argh! So I’m going to share my findings for the newbies out there who are just like me (this might not be an official solution but it just works)

My package.json dependencies:

    "base64-arraybuffer": "^1.0.1", // this is needed at the end! (for FBX and GLTF)
    "expo-gl": "^10.4.2",
    "expo-gl-cpp": "^10.4.1",
    "expo-three": "^5.7.0",
    "react-native-unimodules": "^0.14.6",
    "three": "^0.131.2"

Using expo-three, I tried few different ways to load models:

eg. import OBJLoader or FBXLoader or GLTFLoader directly from three

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

And load using

const loaderFbx = new FBXLoader();
const loaderObj = new OBJLoader();
const loaderGlb = new GLTFLoader();

const model = Asset.fromModule(require('../models/bear/model.obj'));
await model.downloadAsync();
const loader = loaderObj;
loader.load(
      model.uri || '', // .uri / .localUri will not work in release mode on android!
      result => { scene.add(model) },
      onLoad => {},
      onError => {},
);

The above works fine on iOS (even in release mode) but not on android release mode (the APK). Android will always get this issue https://github.com/expo/expo-three/issues/182

---

Then I tried with loadObjAsync(), it works on Android release mode finally!

import {loadObjAsync} from 'expo-three';

const obj = await loadObjAsync({
  asset: require('../models/bear/model.obj')
});

But .png textures was not loading properly, only .mtl working if I try:

import {loadObjAsync} from 'expo-three';

const obj = await loadObjAsync({
  asset: require('../models/bear/model.obj'),
  assetMtl: require('../models/bear/material.mtl')
});

Then, I tried to look for texture issues & I found this => https://github.com/expo/expo-three/issues/185#issuecomment-732161813 (What he explained just strike me in the head… hmmm)

So I renamed all my textures image file extension to prefix with ‘x’, and it became : xpng, xjpeg,xjpg - thus it will bundle into raw folder instead of drawable folder when running assembleRelease

Take note also we have to update metro.config.js:

module.exports = {
  ...
  resolver: {
    assetExts: [
      ...,
      'xpng',
      'xjpg',
      'xjpeg',
    ],
  },
};

Then I can finally load OBJ model in android release APK using

import {loadObjAsync, loadTextureAsync} from 'expo-three';
const texture = await loadTextureAsync({
  asset: require('../models/bear/textures.xpng'),
});
const obj = await loadObjAsync({
  asset: require('../models/bear/model.obj')
});
// to map texture to model (in case some newbie like me doesn't know how ><)
obj.traverse(function(object) {
  if (object instanceof THREE.Mesh) {
    object.material.map = texture;
  }
});
scene.add(obj);

OBJ is down, how about FBX & GLTF? To know how things work, I look into loadObjAsync method inside node_modules\expo-three\build\loaders\loadModelsAsync.js

I found out it was actually calling loader.parse() method instead of loader.load()

So I attempted to do similar approach for FBX and GLTF models after referring to https://github.com/expo/expo-three/issues/151#issuecomment-593267436

---

First, install base64-arraybuffer using npm/yarn

yarn add base64-arraybuffer

Then. In wherever file that you wanted to load fbx or gltf model, add the following codes: (of course we can also fork expo-three and add these new methods - so the newbie don’t get stucked! )

import { loadObjAsync, loadTextureAsync } from 'expo-three';
import { resolveAsync } from 'expo-asset-utils';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FileSystem } from 'react-native-unimodules';
import { decode } from 'base64-arraybuffer';

// this was actually copied from node_modules\expo-three\build\loaders\loadModelsAsync.js
async function loadFileAsync({ asset, funcName }) {
  if (!asset) {
    throw new Error(`ExpoTHREE.${funcName}: Cannot parse a null asset`);
  }
  return (await resolveAsync(asset)).localUri ?? null;
}

// newly added method 
export async function loadFbxAsync({ asset, onAssetRequested }) {
  const uri = await loadFileAsync({
    asset,
    funcName: 'loadFbxAsync',
  });
  if (!uri) return;
  const base64 = await FileSystem.readAsStringAsync(uri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const arrayBuffer = decode(base64);
  const loader = new FBXLoader();
  return loader.parse(arrayBuffer, onAssetRequested);
}

// newly added method
export async function loadGLTFAsync({ asset, onAssetRequested }) {
  const uri = await loadFileAsync({
    asset,
    funcName: 'loadGLTFAsync',
  });
  if (!uri) return;
  const base64 = await FileSystem.readAsStringAsync(uri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const arrayBuffer = decode(base64);
  const loader = new GLTFLoader();
  return new Promise((resolve, reject) => {
    loader.parse(
      arrayBuffer,
      onAssetRequested,
      result => {
        resolve(result);
      },
      err => {
        reject(err);
      },
    );
  });
}

---

And that’s all! We can now load OBJ, FBX, GLTF models proudly inside Barebone RN app!

• For GLTF model, only .glb is working for now because using .gltf file will require loading .bin file as well but I haven’t figure out how to load .bin file yet 😢)
• Stay tune!

For more info, can refer to my gist:

• https://gist.github.com/kyaroru/bdf66ecd599a19eeb3106bf74fc89193#file-rn-three-utils-js
• https://gist.github.com/kyaroru/bdf66ecd599a19eeb3106bf74fc89193#file-expo-three-3d-view-js

or clone this example app that I created:

• https://github.com/kyaroru/RNExpoThree

Programmer life is tough… 😉

Hi ! With expo-three 5.3.0 / expo-sdk 36 and react 16.9 I am only able to successfully load obj files. I tried the following extensions without success gltf, glb and dae. I am receiving the following message en try to load them in my android device: Event { “isTrusted”: false, }

Thanks Enzo

@kyaroru Thank you for your example. I checked your repo https://github.com/kyaroru/RNExpoThree Btw, could you please update your example using the latest expo sdk?

@enzopoeta I encourtered the same issue.

After checking source code, I find that expo use localUri which use file:// protocal to fetch file, when I changed source code to use uri which use http:// protocal , the error resolved.

Here is the source code diff, hope this can temporary help you. Also wait for expo give us the final solution.

@kyaroru thank you for the example project!