Skip to main content

Load from everywhere

You can load assets from basically any source that comes to mind. Assets refer to anything that is not code, like 3D models, textures, material shaders, etc. There are many components which accept a source prop, for example the <Model source={...} /> component. For these components, the source prop can be of the following types:

🧑‍💻 From assets in your project / metro​

Files that live next to your code. For this to work make sure you followed the metro bundle configuration in the Getting Started guide.

import { Model } from 'react-native-filament';
import BusterDrone from './BusterDrone.glb';

<Model source={BusterDrone} />
info

Currently only loading .glb files is supported. You can convert any other 3D models (gltf, obj, FBX, etc) to .glb using blender or online converter tools.

Debug​

In debug mode this will get the file from the metro bundler server, running on your machine. That means a network requests is made for example to http://localhost:8081/assets/BusterDrone.glb.

warning

If your files are big loading over network can introduce some delay until the file is loaded and displayed. Make sure to profile your app in release!

Release​

React Natives default behaviour is to bundle all assets into the app binary. This means that the file is not loaded over network but from the app binary itself, which is faster than in debug over network.

warning

If you put your assets into other directories than the default /assets dir, you need to specify the path to the assets in your react-native.config.js file:

module.exports = {
    assets: [
        './app/assets/3d/assets',
    ],
}

See the React Native documentation for more information.

📦 From native asset / bundle resources​

You can place assets directly in your native project and load them from there. This way the will load very fast, even in debug mode:

  • 🤖 android: place assets under android/app/main/assets/BusterDrone.glb
  • 🍏 ios: place assets under ios/assets/BusterDrone.glb and import them in your XCode project

Then, you can simply load them by providing the name to the asset:

<Model source={{ uri: "BusterDrone.glb" }}>

// If the asset is in a subdirectory:
<Model source={{ uri: "subdir/BusterDrone.glb" }}>

📁 From a local file path​

Files can also be loaded from the file directory on the device. This is useful if you load models from the web and want to cache them, by downloading them to your app's file directory. Note that if you want to open files from a public directory, such as the user's Downloads you might need to ask for permissions first.

<Model source={{ uri: `file://${path}` }}>

🌐 From web urls​

You can also load assets from the web. This is useful if you want to load assets dynamically from a server or a CDN.

<Model source={{ uri: "https://example.com/BusterDrone.glb" }}>