Android shows the texture messed up the first time

Hi team,

I use the threejs in react-native expo. My app downloads the model data from our service and then saves the files (model.bin, model.json, generated.png, model.gltf, outfit_meta_0.png, model.jpg) to the local storage (DocumentDirectoryPath = react-native-blob-util, use react-native-blob-util to save the files). The app loads the model.gltf and converts it to the JSON object (1).

The app resizes the images to 1024px if the image size (width or height) > 1024px (generated.png, outfit_meta_0.png, model.jpg). If not resized, the model shows only black in Android.

In the next step, the app replaces the URI of the generated, outfit_meta_0, model, model in the model buffers (1) to the local path.

My issue is

  1. The first time the app used the GLTFLoader to load the model JSON, the textures were messed up. My iOS app works fine. Only Android got the issue the first time.

const gltfString = JSON.stringify(Object in (1)); // We save the model to the local storage (react-native-blob-util) => (2)
let scene;
const loader = new GLTFLoader();
loader.parse(gltfString, “”, async (gltf) => {
scene = gltf.scene;
})

return (
<group ref={group} {…props} dispose={null}>

<group name=“Armature” rotation={[0, 0.1, 0]}>




);

  1. The 2nd time onwards (Quit the app and open again), the app loads the gltfString (2) from the local storage, then the app shows the textures correctly. FYI we use the same gltfString in #1. gltfString saved in #1 to the local storage.

Libs version:
@react-three/drei”: “^9.96.5”,
@react-three/fiber”: “^8.15.19”,
“expo”: “^50.0.0”,
“expo-gl”: “^13.6.0”,
“expo-three”: “^7.0.0”,
“three”: “^0.162.0”,
“react”: “18.2.0”,
“react-native”: “0.73.4”,

I researched and tried to follow some solutions. But I did not resolve the issue. Can you help me find a solution?

These are the files from our service:

avatar.zip (6.5 MB)

Thanks,

Does anyone have the issue? Please suggest