search

johh / three-gltf-loader

three.js's GLTFLoader wrapped as a module for easy importing.
52 stars 20 forks source link

Error Loading inside React: SyntaxError: Unexpected token < in JSON at position 0 #5

Closed khansalik closed 5 years ago

khansalik commented 5 years ago

The following error shows when trying to load glTF file in Three.js inside Create React App. The same files work fine outside the React environment. It would be really helpful to have any solution for this!

SyntaxError: Unexpected token < in JSON at position 0                  index.js:1446
        at Object.parse (<anonymous>)
        at GLTFLoader.parse (index.js:100)
        at Object.onLoad (index.js:52)
        at XMLHttpRequest.<anonymous> (three.module.js:23564)

Here is my code snippet:

import * as THREE from 'three'
import GLTFLoader from 'three-gltf-loader'

this.loader = new GLTFLoader();
    this.loader.load('../data/box.gltf', 
    (gltf) => {
      const model = gltf.scene;
      this.scene.add(model);
    });
johh commented 5 years ago

Hey there!

Are you sure that GLTFLoader is actually recieving the glTF file? Create React App is using webpack under the hood, so you probably need to use a loader to properly import your glTF file or use the public folder.

I'm closing this issue for now, since it doesn't seem to be directly related to three-gltf-loader.

hassantauqeer commented 5 years ago

@khansalik did you found any fix, If yes please help!