Unable to load glb and gltf files

How to / Third Party Tooling
1

I am trying to load the glb file using “require” in expo react-native app but its failing to load the file.

I have created metro.config.js file as documented in Expo with following content but still facing the issue.

const defaultAssetExts = require(“metro-config/src/defaults/defaults”)
.assetExts;

module.exports = {
resolver: {
assetExts: […defaultAssetExts, “glb”]
}
};

When I try to load the glb file using GLTFLoader, I get error Unhandled promise rejection

Code:
const loader = new GLTFLoader();
loader.load(
require(“./assets/my3dFile.glb”),
glb => {
console.log(“I am here”);
don =glb.scene;
scene.add(glb.scene);
},
xhr => {
console.log((xhr.loaded / xhr.total) * 100 + “% loaded”);
},
error => {
console.log(error);
}
);

Error:
[Unhandled promise rejection: TypeError: url.lastIndexOf is not a function. (In ‘url.lastIndexOf(’/‘)’, ‘url.lastIndexOf’ is undefined)]

  • node_modules/three/build/three.module.js:40347:17 in LoaderUtils.extractUrlBase

  • node_modules/three/examples/jsm/loaders/GLTFLoader.js:102:10 in Object.assign$argument_1.load

  • node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch

  • node_modules/regenerator-runtime/runtime.js:274:30 in invoke

  • node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch

  • node_modules/regenerator-runtime/runtime.js:135:28 in invoke

  • node_modules/regenerator-runtime/runtime.js:145:19 in PromiseImpl.resolve.then$argument_0

  • node_modules/promise/setimmediate/core.js:37:14 in tryCallOne

  • node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0

  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer

  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass

  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates

  • [native code]:null in callImmediates

  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates

  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0

  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard

  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0

  • [native code]:null in flushedQueue

  • [native code]:null in callFunctionReturnFlushedQueue

Package.josn

“dependencies”: {
“@react-native-community/masked-view”: “0.1.6”,
“@react-navigation/native”: “^5.6.1”,
“@react-navigation/stack”: “^5.6.2”,
“expo”: “~37.0.3”,
“expo-gl”: “~8.1.0”,
“expo-graphics”: “^1.1.0”,
“expo-three”: “^5.5.1”,
“react”: “~16.9.0”,
“react-dom”: “~16.9.0”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz”,
“react-native-gesture-handler”: “~1.6.0”,
“react-native-reanimated”: “~1.7.0”,
“react-native-safe-area-context”: “0.7.3”,
“react-native-screens”: “~2.2.0”,
“react-native-web”: “~0.11.7”,
“three”: “^0.117.1”
},
“devDependencies”: {
“babel-preset-expo”: “~8.1.0”,
“@babel/core”: “^7.8.6”
},

Can you please let me know where I am going wrong? Thanks for the help.

2

I am also trying the same , But for me, the object is working in web version. For mobile also, there is no error in log. But the object is invisible in mobile. I am using following script . Please help me to do this

import Expo from "expo";
import React, { Component } from "react";
//import * as THREE from "three";
import { THREE } from "expo-three";
import ExpoTHREE from "expo-three";
import { GLView } from "expo-gl";
import { Renderer } from "expo-three";
//import GLTFLoader from "three-gltf-loader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Asset } from "expo-asset";

export default class App extends Component {
  render() {
    return (
      <GLView style={{ flex: 1 }} onContextCreate={this._onGLContextCreate} />
    );
  }
  _onGLContextCreate = async (gl) => {
    var model;
    // 1. Scene

    const asset = Asset.fromModule(require("./assets/RSQ8_V4.glb"));
    await asset.downloadAsync();

    var scene = new THREE.Scene();
    // 2. Camera
    const camera = new THREE.PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    // 3. Renderer
    const renderer = new Renderer({ gl });

    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    var light = new THREE.DirectionalLight(0xffffff, 1.0);
    light.position.set(0, 1, 3);
    scene.add(light);

    const loader = new GLTFLoader();
    loader.load(
      asset.localUri,
      function (gltf) {
        model = gltf.scene;
        scene.add(model);
      },
      function (xhr) {},
      function (error) {}
    );
    // const loader = new GLTFLoader();
    // loader.load(
    //   "assets/UC_EXT_Bodypaint_A.glb",
    //   (gltf) => {
    //     model = gltf.scene;
    //     scene.add(model);
    //   },
    //   (xhr) => {
    //     // called while loading is progressing
    //     console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    //   },
    //   (error) => {
    //     // called when loading has errors
    //     console.error("An error happened", error);
    //   }
    // );
    // Define our shape (Below is a tetrahedron, but can be whatever)
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    //scene.add(cube);

    camera.position.z = 5;
    camera.position.y = 1.5;

    const animate = () => {
      requestAnimationFrame(animate);
      if (model) {
        model.rotation.y += 0.004;
      }
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };
    animate();
  };
}