Expo / Three.js Texture Not Loading Correctly

[sjames]

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 - Imgur: The magic of the Internet

It also happens if I simply copy and paste this tutorial with no changes - ARKit Lighting & PBR in React Native | by Evan Bacon | Exposition

Thanks

[sjames]

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