TextureLoader not loading textures in ReactNative

Questions
,
1

I am using the below code to load textures using TextureLoader. It works fine on the browser but not in a mobile app. What I mean to say is that it is working in web applications but not in mobile apps. My mobile app’s codebase is in React Native.

I have used GLView from expo-gl. GLView is used to render 2D and 3D graphics in ReactNative.

              const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
              const textureLoader = new THREE.TextureLoader()
              const dummyURL = "https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JhZGllbnR8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80"
              const dummyTexture = textureLoader.load(dummyURL)
              const textureMaterial = new THREE.MeshBasicMaterial({
                map: dummyTexture
              })
              let cube = new THREE.Mesh(geometry, textureMaterial);
2

I’m not familiar with ReactNative but indeed texture loading does work fine in the browser: https://jsfiddle.net/ac1wn07z/

You probably have more success by asking this question directly at the community (GitHub or stackoverflow).

1 Like
3

I’m test with Expo in iOS and Android and work fine

Test

image
image588×588 3.11 KB

2 Likes
4

I just tried this out on my phone and it is working fine. I was using the wrong import for TextureLoader I guess.

import * as THREE from 'three'
import ExpoTHREE, {Renderer} from 'expo-three'

I just imported TextureLoader from ‘expo-three’ and it works perfectly now.:point_down:

import * as THREE from 'three'
import ExpoTHREE, {Renderer, TextureLoader} from 'expo-three'

Thanks for sharing the code :slight_smile: