4

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 enter image description here

ninja_nugget
  • 712
  • 1
  • 8
  • 19
  • 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 Feb 26 '20 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 Feb 26 '20 at 11:22
  • But can you also check the other HTTP response headers? What content type are you getting? – Mugen87 Feb 26 '20 at 11:23
  • @Mugen87 Ah, you're right. It is getting a text file, as seen in the content type. – ninja_nugget Feb 26 '20 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 Feb 26 '20 at 11:27
  • This issue is unrelated to `three.js`/`GLTFloader`. The response type should be `model/gltf+json`. and not `text/html`. So it's a problem of how your backend serves content. Unfortunately, I don't know why this happens with your React app. – Mugen87 Feb 26 '20 at 11:32

2 Answers2

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.

Community
  • 1
  • 1
ninja_nugget
  • 712
  • 1
  • 8
  • 19
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.

PhoenixPan
  • 536
  • 7
  • 19