React Native: THREE.GLTFLoader: Couldn\'t load texture in react native

[lichmac]

System: OS: macOS 14.4.1 CPU: (8) arm64 Apple M2 Memory: 496.13 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.0 path: ~/.nvm/versions/node/v18.17.0/bin/node Yarn: version: 1.22.21 path: ~/.nvm/versions/node/v18.17.0/bin/yarn npm: version: 9.6.7 path: ~/.nvm/versions/node/v18.17.0/bin/npm Watchman: version: 2023.10.30.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

• DriverKit 23.4
• iOS 17.4
• macOS 14.4
• tvOS 17.4
• visionOS 1.1
• watchOS 10.4 Android SDK: API Levels:
• "25"
• "29"
• "30"
• "31"
• "32"
• "33"
• "34" Build Tools:
• 29.0.2
• 30.0.2
• 30.0.3
• 31.0.0
• 33.0.0
• 33.0.1
• 34.0.0 System Images:
• android-31 | Android TV ARM 64 v8a
• android-31 | Android TV Intel x86 Atom
• android-31 | Google TV ARM 64 v8a
• android-31 | Google TV Intel x86 Atom
• android-31 | Google APIs ARM 64 v8a
• android-31 | Google APIs Intel x86 Atom_64
• android-31 | Google Play ARM 64 v8a
• android-31 | Google Play Intel x86 Atom_64

• android-33 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10406996 Xcode: version: 15.3/15E204a path: /usr/bin/xcodebuild Languages: Java: version: 17.0.9 path: /Users//.jenv/shims/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.73.4 wanted: 0.73.4 react-native-macos: Not Found npmGlobalPackages: "react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

  "@react-three/drei": "^9.105.6", "@react-three/fiber": "^8.16.3", "expo": "^50.0.0", "expo-gl": "~13.6.0", "react": "18.2.0", "react-native": "0.73.4", "three": "^0.164.1",

Problem description:

I got the error in React Native. Threejs throws the texture errors

2024-05-07 16:45:44.771462+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:70e21b66-0dce-41b4-a77d-cb228e339bd1?offset=0&size=935696' 2024-05-07 16:45:44.779363+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:c65a591f-43cf-4f79-837f-86fb175dba64?offset=0&size=222888' 2024-05-07 16:45:44.788510+0700 unitygpt[7665:9613623] [javascript] 'THREE.GLTFLoader: Couldn't load texture', 'blob:69d1043a-e99b-4467-8942-570b1b6698f0?offset=0&size=7620'

This is my model

avatar.zip

Relevant code:

import React, { Suspense } from "react";
import { PixelRatio, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { Canvas } from "@react-three/fiber/native";
import { useGLTF } from "@react-three/drei/native";

const onCanvasCreated = (state) => {
    // state.camera.lookAt(0, 0, -10);
    const _camera = state.camera, _size = state.size;
    _camera.aspect = _size.width/_size.height;
    _camera.updateProjectionMatrix();
    const _gl = state.gl.getContext();
    _gl.gammaFactor = 2.2;
    const pixelStorei = _gl.pixelStorei.bind(_gl);
    _gl.pixelStorei = function(...args) {
      const [parameter] = args;
      switch (parameter) {
        case _gl.UNPACK_FLIP_Y_WEBGL:
          return pixelStorei(...args);
      }
    };
  };

  function Model(props) {
  const {scene} = useGLTF(modelPath)
  return <primitive
      object={scene}
      rotation={[0, 0, 0]}
      position={[0, -1.5, 0]} />
}

<Canvas
        legacy={true}
        gl={{ antialias: true }}
        dpr={PixelRatio.get()}
        camera={{ fov: 50, near: 0.1, far: 1000, position: [0, 0, 0.8] }}
        onCreated={onCanvasCreated}>
        <ambientLight
          color={0xffffff}
          intensity={0.1} />
        <hemisphereLight
          color={0xffffff}
          intensity={0.5} />
        <directionalLight
          color={0xffffff}
          intensity={1.5}
          position={[0, 1, 5]} />
        <pointLight
          position={[1, 2, -0.5]}
          castShadow={true}
          intensity={2}
          distance={100} />
        <Suspense fallback={null}>
          <Model>
        </Suspense>
      </Canvas>