Load local app GLTF/GLB mesh in Babylon React Native?

Using require and resource isn’t seem to be supported in Android yet. Here’s what I did to make local loading work for both iOS and Android:

  • Use asset instead of resource with react-native-asset
  • Assets are copied to built package. So you must re-run react-native-asset and rebuild app even in dev(metro) stage
  • Use app:/// scheme to access local asset ()
  • iOS asset’s are copied to root, Android asset’s are copied to /custom for most of babylon assets.
  • I’ve made simple resolver to handle both situation:
import {Platform} from 'react-native';

const isAndroid = Platform.OS === 'android';
const assetPrefix = isAndroid ? 'custom/' : '';

/**
 * Workaround for different path between OS
 *
 * https://github.com/unimonkiez/react-native-asset/issues/25
 *
 * @param path relative path from asset directory
 * @returns Sanitized Uri with app:// scheme
 */
export function resolveAssetUri(path: string) {
  return `app:///${assetPrefix}${path}`;
}
1 Like