-1

am quite new to both react and three.js, im trying to render a .gltf file using the method const Loader = new GLTFLoader() however when the website is rendered and i view it in browser i see the error message, An error happened SyntaxError: Unexpected token < in JSON at position 0, if anyone would know what direction to point me in that would be great.

here's the code

rende.js:

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default class Rende extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x424242, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("scene").appendChild(renderer.domElement);

    const loader = new GLTFLoader();
    loader.load(
      "untitled.gltf",
      (gltf) => {
        scene.add(gltf.scene);
      },
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
      },
      (error) => {
        console.error("An error happened", error);
      }
    );
 
  }
  render() {
    return <div id="scene" className="potato"></div>;
  }
}

and the coresponding component page

home.jsx:

export default function Home() {
  return (
    <Fragment>
      {" "}
      <div key={1} className="class">
        tagline
      </div>
      <Rende />
    </Fragment>
  );
}

if anyone can help that would be much apreciated. Thank you

squarewatermeln
  • 1
  • 6
  • Just a suggestion: Try to check the validity of your GLTF to see if it has any problem. You can do it by draggin it into this `khronos` website https://github.khronos.org/glTF-Validator/. Sometimes the model has some problems that prevent it from loading correctly that you may need to solve first. – Doc Jul 01 '22 at 10:58
  • Also if you open your `.gltf` in some text editor, is that a valid JSON file? Can you see some weird `<` charter where shouldn't be? (based on the error should be in the first line of the file) Seems like your gltf is not a valid JSON looking the error... – Doc Jul 01 '22 at 11:09
  • thank you i checked khronos and it was a valid gltf file and i also looked at the json it didn't contain any irregular JSON char's – squarewatermeln Jul 01 '22 at 11:54
  • from the examples ive seen the path seems to be correct, i have tried multiple variations of the path, and none of them seen to be working, i dont think its a page not found error i instead think its a parsing error – squarewatermeln Jul 01 '22 at 20:01

2 Answers2

0

Maybe the path of your model is wrong?

I think you should fix it with a relative path, or the right absolute one.

It happened to me firsthand when I worked with threejs at the beginning and was writing the wrong path for my .gltf in a single-page-app

Replication of the error and reasons

I made a fork of a "Three.js import GLTF" sandbox on codesandbox, where I replaced the path with a random, wrong one.

If you open the console (in the sandbox fork), you will see your same error.

This is because the fetch still has the status 200 but with HTML instead of your model's JSON,

due to the wrong path and the behavior of the server of a single page application, which, generally, returns the index.html, unless it is a path belonging to one of the assets, by default with reactjs and other libraries/frameworks.

From the sandbox enter image description here

Since the path is wrong, the server returns your html instead of your model, so the JSON parser throws your same error, because actually, the first char recived is <.

...as you can see in this screen from the browser dev-tools > Network tab, while running the sandbox

enter image description here

Conclusion

Try to check out the network devtools while running your website to check if your .gltf fetch response is HTML (intead of your model JSON). If so, your model path is wrong.

Doc
  • 655
  • 4
  • 11
-1

Thank you i seem to have found the error, it was a combination of the camera being too zoomed in, the model being the wrong path and the textrue not loading in, that you very much for helping me solve this!

squarewatermeln
  • 1
  • 6
  • I'm glad I helped you! Ps. Don't use answers for something like this :) Use instead a comment like this on the specific post of interest. Answer your questions only if you find the solution yourself and want to share it with the community :) Bye – Doc Jul 04 '22 at 14:16