Expo / Three.js Texture Not Loading Correctly

Please provide the following:

  1. SDK Version: 35.0.0
  2. Platforms(Android/iOS/web/all): iOS

Hi, I’m setting a texture with Expo and Three.js like this:

// Create a new cube 
        const geometry = new THREE.BoxGeometry(0.1, 0.01, 0.1);

        const texture = await ExpoTHREE.loadAsync(

        // immediately use the texture for material creation

        const material = new THREE.MeshBasicMaterial({
          color: 0xffffff,
          map: texture});

        this.cube = new THREE.Mesh(geometry, material);
        // Add the cube to the scene

However, there seems to be some overlay which sets it black and white and with little lines all over it. If you look closely you can see here - https://imgur.com/a/aPC4OFj

It also happens if I simply copy and paste this tutorial with no changes - https://blog.expo.io/arkit-lighting-pbr-in-react-native-ed28525bc90f


I’ve solved this. It was as simple as changing the images from jpg to png!

Not sure why that made a difference considering the tutorial originally used jpgs, but glad to have it sorted.


1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.