I am encountering an issue while trying to load a .glb file using react-three-fiber. The error I'm receiving is as follows:
Error Unexpected token c in JSON at position 3
I can't seem to figure out what mistake I am making - it seems that the common solution to this problem is to have the .glb file in the public folder (which I have done). So, I'm confused about where the problem lies.
Below is the link to the codesandbox:
https://codesandbox.io/s/gltfloader-forked-5nkzl?file=/src/App.js
Here is the code snippet:
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>
);
}
If anyone could provide any assistance, it would be greatly appreciated.