Error when importing a .gltf file into threejs (in expo)

Question

When importing a .gltf file into threejs (in expo), I get the following error:

Error: Event {
  "isTrusted": false,
}

I am using the GLTFLoader from three(/examples/jsm/loaders/GLTFLoader.js) in an expo react native project with the following code:

loader.load(
      "../body.gltf",
      (gltf) => {
        console.log("Object: ", gltf);
        scene.add(gltf.scene);
      },
      (progress) => console.log("Progress: ", progress),
      (err) => console.log("Error: ", err)
    );

Is there something in my permissions I am not aware of, is it something in expo or something else?

Answer 1

Loading assets:

  useEffect(() => {
    (async () => {
      const assets = [
        Asset.fromModule(require("./assets/abductors.gltf")),
        Asset.fromModule(require("./assets/abs.gltf")),
        Asset.fromModule(require("./assets/adductors.gltf")),
        Asset.fromModule(require("./assets/biceps.gltf")),
        Asset.fromModule(require("./assets/bracheoradialis.gltf")),
        Asset.fromModule(require("./assets/calves.gltf")),
        Asset.fromModule(require("./assets/chest.gltf")),
        Asset.fromModule(require("./assets/feet.gltf")),
        Asset.fromModule(require("./assets/flexors.gltf")),
        Asset.fromModule(require("./assets/forearms.gltf")),
        Asset.fromModule(require("./assets/glutes.gltf")),
        Asset.fromModule(require("./assets/hamstrings.gltf")),
        Asset.fromModule(require("./assets/hands.gltf")),
        Asset.fromModule(require("./assets/head.gltf")),
        Asset.fromModule(require("./assets/lats.gltf")),
        Asset.fromModule(require("./assets/obliques.gltf")),
        Asset.fromModule(require("./assets/pelvic.gltf")),
        Asset.fromModule(require("./assets/quads.gltf")),
        Asset.fromModule(require("./assets/rotators.gltf")),
        Asset.fromModule(require("./assets/serratus.gltf")),
        Asset.fromModule(require("./assets/shoulders.gltf")),
        Asset.fromModule(require("./assets/tibalis.gltf")),
        Asset.fromModule(require("./assets/transverse.gltf")),
        Asset.fromModule(require("./assets/traps.gltf")),
        Asset.fromModule(require("./assets/triceps.gltf"))
      ];

      let body = new THREE.Scene();

      for (let i = 0; i < assets.length; i++) {
        await assets[i].downloadAsync();
        const loader = new GLTFLoader();
        loader.load(
          assets[i].uri || "",
          (gltf) => {
            assets[i] = gltf.scene;
            body.add(gltf.scene);
          },
          (xhr) => {
            console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
          },
          (error) => {
            console.error("An error happened", error);
          }
        );
      }

      setBody(body);
    })();
  }, []);

Showing them:

const _onContextCreate = async (gl) => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;

    let renderer = new ExpoTHREE.Renderer({ gl });
    renderer.setSize(width, height);
    renderer.setClearColor(0xffffff);

    let camera = new THREE.PerspectiveCamera(80, width / height, 0.01, 1000);
    camera.position.z = 5;

    let scene = new THREE.Scene();

    const light = new THREE.PointLight(0xffffff, 1, 500);
    light.position.set(5, 10, 10);
    scene.add(light);

    scene.add(body);
    body.position.set(0, -2, -5);
    body.scale.set(1.2, 1.2, 1.2);
    body.rotation.set(0, 0, 0);

    [...]
  };

return (
    <Model
      _onContextCreate={_onContextCreate}
      body={body}
      setActiveMuscles={setActiveMuscles}
      onChangeStroke={onChangeStroke}
    />
  );