THREE.GLTFLoader: Couldn't load texture

Expo Development Tools
1

Sorry ! I’m not very good at English
I use React Native and GLView to load a vrm model , I can successfully load when I run in web browser , but if I run on Android device , it will show an error "THREE.GLTFLoader: Couldn’t load texture "

2021-09-10 (2)
2021-09-10 (2)1482×555 24.3 KB

Here is my code!

import { PixelRatio, StyleSheet, View, Button, Alert } from 'react-native';
import { decode, encode } from "base-64";
import { ExpoWebGLRenderingContext, GLView } from "expo-gl";
import { Renderer } from "expo-three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { VRMLoader } from 'three/examples/jsm/loaders/VRMLoader.js';
import React, { useEffect ,Component ,useState} from "react";
import { VRM, VRMUtils, VRMSchema } from "@pixiv/three-vrm";
import {
  AmbientLight,
  PerspectiveCamera,
  PointLight,
  Scene,
  SpotLight,
  GridHelper,
  AxesHelper,
  TextureLoader,
  MeshBasicMaterial,
  Mesh
} from "three";
import { Asset } from "expo-asset";
import OrbitControlsView from "expo-three-orbit-controls";

if (!global.btoa) {
  global.btoa = encode;
}
if (!global.atob) {
  global.atob = decode;
}

let model
// let test = 0
let test = false; 
export default function App() {
  
  const [camera, setCamera] = React.useState(null);
  let timeout;
  React.useEffect(() => {
    return () => clearTimeout(timeout);
  });
  const onContextCreate= async (gl) => {//: ExpoWebGLRenderingContext

    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;

    const renderer = new Renderer({ gl });
    renderer.setSize(width, height);
    const sceneColor = "#ffe4e1"
    renderer.setClearColor(sceneColor);
    renderer.gammaOutput = true;

    const camera = new PerspectiveCamera(120, width / height, 0.01, 1000);
    camera.position.z = 2;
    camera.position.y = 1.5;
    setCamera(camera)

    const asset = Asset.fromModule(
      require("./assets/Girl03.vrm")
    );
    await asset.downloadAsync();

    const scene = new Scene();
    
    const gridHelper = new GridHelper(10, 10);
    gridHelper.position.y = 0
    scene.add(gridHelper);

    const axesHelper = new AxesHelper(5);
    axesHelper.position.y = 0
    scene.add(axesHelper);

    const ambientLight = new AmbientLight(0x101010);
    scene.add(ambientLight);

    const pointLight = new PointLight(0xffffff, 2, 1000, 1);
    pointLight.position.set(0, 200, 200);
    scene.add(pointLight);

    const spotLight = new SpotLight(0xffffff, 0.5);
    spotLight.position.set(0, 500, 100);
    spotLight.lookAt(scene.position);
    scene.add(spotLight);

    const loader = new GLTFLoader();
    loader.load(
      asset.uri ,//|| ""
      (gltf) => {
        model = gltf.scene;
        scene.add(model);
        animate();

      },
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      (error) => {
        console.error("An error happened", error);
      }
    );
 
    const clock = new THREE.Clock();
    function animate() {
      requestAnimationFrame(animate);
      const deltaTime = clock.getDelta();

      const s = Math.sin(clock.elapsedTime * Math.PI / 2);

      if (test) {

          model.children[0].children[0].children[1].children[3].rotation.x = Math.abs(s)*-1;

      }
      renderer.render(scene, camera);
      gl.endFrameEXP();

    }
    const render = () => {
      timeout = requestAnimationFrame(render);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };
    render();
  }

  const click = () =>{
    if(test==true){
      test = false
      console.log(test)
    }
    else{
      test = true
      console.log(test)
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.butt}>
        <Button onPress={() => click()} title='move' color='lightpink' style={{flex:1}} />
      </View> 
   
      <OrbitControlsView style={{ flex:1 }} camera={camera}>
          <GLView style={styles.gl} onContextCreate={onContextCreate} />
          
        
        
      </OrbitControlsView>
    </View>

  );
}

const styles = StyleSheet.create({
  container:{
    flex:1
  },
  butt:{
    paddingLeft:40,
    paddingRight:40,
    paddingTop:50,
    // flex:0.1
  },
  mid:{
    flex:1,
    flexDirection:'row',
    justifyContent:'space-around',
  },
  one:{
    padding:30,
    flex:0.5
  },
  two:{
    padding:30,
    flex:0.5
  },
  gl:{
    flex:100
  }
  
})

I want to know why it could not load texture on Android device ! Thanks for help !