createTextureAsync from remote dynamic image file

[ericmorgan1]

Images can be loaded as a material using code like the following:

const img = require('./assets/images/myImage.jpg'); 
const material = new THREE.MeshBasicMaterial({
   map: await ExpoTHREE.createTextureAsync({
     asset: Expo.Asset.fromModule(img),
   })
});

How can we create a material from a remote file determined at runtime (where require() is not available) and we cannot create an Expo.Asset?

Here are some attempts I've made, with no luck:

var expoAsset = new Expo.Asset();
expoAsset.uri = "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png";
const material = new THREE.MeshBasicMaterial({
   map: await ExpoTHREE.createTextureAsync({
     asset: expoAsset
   })       
});


var textureLoader = new THREE.TextureLoader();
textureLoader.load("https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", function(loadedTexture) {     
  const material = new THREE.MeshBasicMaterial({ map: loadedTexture });
});  


var loadingManager = new THREE.LoadingManager();
var imageLoader = new THREE.ImageLoader(loadingManager);
imageLoader.load("https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", function(image) {
    var texture = new THREE.Texture();
    texture.image = image;
    var material = new THREE.MeshBasicMaterial( {map: texture});        
});

[EvanBacon]

@ericmorgan1 just pushed expo-three: 2.0.7.

You can now call:

const someRemoteUrl = "https://www.biography.com/.image/t_share/MTE5NDg0MDU0ODczNDc0NTc1/ben-affleck-9176967-2-402.jpg"
const texture = await ExpoTHREE.loadAsync(someRemoteUrl)

Snack: https://snack.expo.io/@bacon/expo-three-remote-image

[ericmorgan1]

@EvanBacon Thank you for the fast turnaround! Works great! : )

[softnodelabs]

@EvanBacon this is still not working. I really don't know what's going on, since the error messages point to NativeModules.
For now I just embedded an html5 version of my code in a webview until this is solved.

I don't know if it helps, but here are my package.json dependencies:

"expo": "^24.0.0",
"expo-asset-utils": "0.0.2",
"expo-graphics": "^0.0.1",
"expo-three": "^2.2.0",
"firebase": "4.6.2",
"mobx": "3.3.1",
"mobx-collection-store": "1.4.2",
"mobx-react": "4.3.4",
"native-base": "2.3.3",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-console-time-polyfill": "^0.0.6",
"react-native-easy-toast": "1.0.9",
"react-native-htmlview": "0.12.1",
"react-native-snap-carousel": "3.5.0",
"react-native-xml2js": "1.0.3",
"react-navigation": "1.0.0-beta.21",
"text-encoding": "^0.6.4",
"three": "^0.88.0",
"xmldom-qsa": "^1.0.3"

Thanks for your support.

[EvanBacon]

@softnodelabs I really cannot reproduce your error. Could you please reproduce the error in a snack?

[softnodelabs]

@EvanBacon I copied your sample code to this snack:
https://snack.expo.io/@softnodelabs/expo-three-remote-image

I get only a white screen.

My testing device: Samsung Galaxy S6 - Android 7.0
I don't have an iOS device so I don't know if this is an Android only issue.

Edit: I updated the snack code. With this code, I can show a plane with a color but when I try to load a texture on it, I get a promise rejection with nothing showing up.

[Unhandled promise rejection: Error: unexpected url: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540softnodelabs%252Fsuabreja/ben-affleck-9176967-2-402.jpg]

It seems like it downloads the image but can't use it.

Thanks.

[EvanBacon]

@softnodelabs this is an error created on android when you create an Expo.Asset from a localUri stored in the Expo.FileSystem. This is coming from a function in expo-asset-utils, to correct this filp the Expo.Asset.downloaded flag and prevent the system from trying to re-download the file! I'll push a version that uses the new expo-asset-utils (0.0.3) as soon as I've tested it 💙

[EvanBacon]

@softnodelabs also good find 🔥🔥🔥

[softnodelabs]

@EvanBacon I'm happy I can help finding issues. I got everything working. I replicated some of your code in a test project so I could understand how the downloading process and asset creation works. From there I could create a class that works on Android. It needs testing on iOS though.

I don't know if it's needed but as soon as I have the time I can share my code on a snack project.

Thank you!

[briangainer]

I have the same error that @softnodelabs had, but I'm on ios. Even after removing all references from the Expo Filesystem in my code, my app still tries to load the old referenced files and gives me an error.

@EvanBacon where do I set the Expo.Asset.downloaded flag?

[krjk333]

@EvanBacon , How to load the 3d object like this. I tried with so many methods to load an object. All gets failed. Please anyone help me to load 3d object in .obj, .gltf, or .glb any of one format in react native.