Loading a GLTF model with Three JS and React JS

Question

I have trouble loading a GLTF file which I downloaded from sketchfab, using React JS. When I try to do it without using React (with a regular index.html and index.js) it works, but when I bring the code inside my React App, it throws an Unexpected token < in JSON at position 0 at JSON.parse error. Here is my code:

import * as THREE from "three";
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';


componentDidMount(){


    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var width = 100;
    var height = 100;
    var intensity = 1.4;
    var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
    rectLight.position.set( 1, 1, 10 );
    rectLight.lookAt( 1, 1, 3 );
    scene.add( rectLight )

    let renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementsByClassName("three-canvas")[0].appendChild( renderer.domElement );


    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
    };

    let loader = new GLTFLoader();
    loader.load(
      "../../public/js_models/apple_iphone_xs_max/scene.gltf",
      ( gltf ) => {
          // called when the resource is loaded
        console.log(gltf.scene)
      },
      ( xhr ) => {
        console.log(xhr);
        // called while loading is progressing
        // console.log("The xhr warning isL ",xhr.srcElement.responseText);
    }
      );

    animate();

  }

I read that it's rendering my index.html which is why it's throwing the error but I can't really find a fix, since I know that the GLTF file is in the correct path.

If there are any insights, I would very much appreciate it. Thank you!

UPDATE

Network tab when rendering component that includes the gltf file

user_11909633 · Answer

So I did find a solution!

Instead of using the path of the gltf, I compressed the gltf into a glb file and put it in my src folder. Then, I imported the file using the import syntax:

import filePath from "filepath_of_your_glb_file"

Then, I simply replaced the loadpath inside the loader function with filePath and it works!


    let loader = new GLTFLoader();
    loader.load(
      "../../public/js_models/apple_iphone_xs_max/scene.gltf",

And if you want to make it dynamic (you have multiple glbs you want to laod), simply console.log the imported filePath and use the logged URL as your path.

user_5458883 · Answer

I resolved this by putting 3d model in public folder (where the index.html and favicon.ico are) and call

loader.load("./LittlestTokyo.glb", (gltf) => {
  var obj = gltf.scene.children[0];
  console.log(obj);
});

If the loader failed to find the file, you should see "array doesn't have element" error, otherwise, at least the loader is able to locate the file. But you may have other issues. For example, in my case, I have "invalid character at position x error" due to file corruption and "No DRACOLoader" probably due to .glb file format.

Loading a GLTF model with Three JS and React JS

2 Answers