React-Three-Fiber: Error Unexpected token c in JSON at position 3

Question

I am trying to load a .glb file with react-three-fiber and I get the following error.

Error Unexpected token c in JSON at position 3

I'm not sure what I am doing wrong - it appears the most common solution to this problem is having the .glb file in your public folder (which I do). So I'm at a loss here.

Here is the codesandbox

https://codesandbox.io/s/gltfloader-forked-5nkzl?file=/src/App.js

Here is the code anyways:

import "./styles.css";
import { Suspense } from "react";
import { Canvas, useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";


const Model = () => {
 const gltf = useLoader(GLTFLoader, './scene.glb');
  return (
  <>
  <primitive object={gltf.scene} scale={0.4} />
</>
);
};

export default function App() {
 return (
  <div className="App">
  <Canvas>
    <Suspense fallback={null}>
      <Model />
      <OrbitControls />
      <Environment preset="sunset" background />
    </Suspense>
  </Canvas>
</div>
);
}

Any help would be immensely appreciated.

hpalu · Accepted Answer · 2021-08-14 16:01:09Z

0

./scene.glb is not a valid path. you can't fetch from relative paths in general. either put scene.glb into /public and use /scene.glb or import sceneUrl from "./scene.glb". the unexpected token error you get is because three's loader receives a 404 response.

answered Aug 14, 2021 at 16:01

hpalu

1,4358 silver badges12 bronze badges

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

1 Comment

bullybear17 Over a year ago

i appreciate you responding. I'm not sure what you mean though because I already have scene.glb in my public folder (as you can see in the codesandbox link above).

CZTopp · Accepted Answer · 2022-03-30 04:31:53Z

Importing the sceneUrl should work.

import "./styles.css";
import { Suspense } from "react";
import { Canvas, useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

//import sceneUrl
import sceneUrl from './scene.glb'


const Model = () => {
 const gltf = useLoader(GLTFLoader, sceneUrl);
  return (
  <>
  <primitive object={gltf.scene} scale={0.4} />
</>
);
};

export default function App() {
 return (
  <div className="App">
  <Canvas>
    <Suspense fallback={null}>
      <Model />
      <OrbitControls />
      <Environment preset="sunset" background />
    </Suspense>
  </Canvas>
</div>
);
}

Mahyar Mottaghi Zadeh · Accepted Answer · 2022-07-15 22:51:29Z

0

I had the same problem for 2days

I fixed it by just using npx gltfjsx [Model.js] [options] that is an npm package

just run the command npx gltfjsx [you model here .glb] it will generate a jsx file

edited Jul 15, 2022 at 22:51

Mahyar Mottaghi Zadeh

1,3266 gold badges21 silver badges33 bronze badges

answered Jul 13, 2022 at 15:12

TakiDDine

691 silver badge7 bronze badges

Collectives™ on Stack Overflow

React-Three-Fiber: Error Unexpected token c in JSON at position 3

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related