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(
          'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/brick_bump.jpg',
        );

        // 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
        this.scene.add(this.cube);

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

Thanks

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.

Thanks

1 Like

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