How to use THREE js TextureLoader() in React native?

Question

I am trying to create a 3D model in React-Native using Three.js, for that I have to use an image for texture but TextureLoader() function using 'document' and 'canvas' object creation logic, which can't be used in react-native.

so, how can I use an image as texture in react-native using three.js ?

Answer 1

Short summary: the Textureloader didnt work because it required an imageloader which required the inaccesible DOM.

Apparantly there's a THREE.Texture function which i used like this:

let texture = new THREE.Texture(
     url //URL = a base 64 JPEG string in this case     
     );

var img = new Image(128, 128);
img.src = url;
texture.normal = img;

As you can see i used an Image constructor, this is from React Native and is imported like this:

import { Image } from 'react-native';

In the react native documentation it will explain how it can be used, it supports base64 encoded JPEG.

and finally map the texture to the material:

material.map = texture;

Note: i havent tried to show the end result in my webglview yet, but in the element inspector it seems to show proper THREEjs objects.