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

How are you hosting your React app? This error usually indicates that your web server does not serve a glTF asset but a HTML file. Make sure you inspect the HTTP response of your request and ensure valid glTF content. — Mugen87
– Mugen87, Commented Feb 26, 2020 at 10:38
@Mugen87 I checked the Networks tab and it says that it is loading scene.gtlf, and it is giving out a 200 response. I've updated my question and included the networks tab — ninja_nugget
– ninja_nugget, Commented Feb 26, 2020 at 11:22
But can you also check the other HTTP response headers? What content type are you getting? — Mugen87
– Mugen87, Commented Feb 26, 2020 at 11:23
@Mugen87 Ah, you're right. It is getting a text file, as seen in the content type. — ninja_nugget
– ninja_nugget, Commented Feb 26, 2020 at 11:26
@Mugen87 I don't get it, why is my GLTF loader interpreting it as a text file despite I'm passing in my file as a JSON? This is my first time actually using GLTF loaders so I'm not too sure. — ninja_nugget
– ninja_nugget, Commented Feb 26, 2020 at 11:27

Community · Accepted Answer · 2023-06-16 19:59:05Z

3

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(
      filePath,

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.

edited Jun 16, 2023 at 19:59

CommunityBot

11 silver badge

answered Feb 27, 2020 at 7:39

ninja_nugget

7522 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PhoenixPan · Accepted Answer · 2021-05-22 11:40:33Z

0

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.

answered May 22, 2021 at 11:40

PhoenixPan

6638 silver badges20 bronze badges

Collectives™ on Stack Overflow

Loading a GLTF model with Three JS and React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related