sample.js:21 SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "... is not valid JSON at JSON.parse ()
at GLTFLoader.parse (GLTFLoader.js:315:21)
at Object.onLoad (GLTFLoader.js:205:11)
at three.module.js:39951:38

That’s the error code I recieve whenever I tried to load a GLTF file, not just the file but also the FontLoader, TTFLoader, also displays such error.

Here’s my code;

import * as THREE from ‘three’;
import {OrbitControls} from ‘three/examples/jsm/controls/OrbitControls’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;

const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const orbit = new OrbitControls(camera, renderer.domElement);

const loader = new GLTFLoader();

loader.load( ‘…/img/scene.gltf’, function ( gltf ) {

scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
camera.position.set(0,0,10);

camera.lookAt(0,0,0);

orbit.update();
function animate(){

requestAnimationFrame(animate);

renderer.render(scene, camera);

animate();
              
Please it’s really frustrating me, I don’t understand… The error is clearly pointing to the file in the  directory I instructed it to point, the error is coming from the file itself and not from my file.
The error is coming from line 325 in the GLTFLoader.js file, saying that;
const json = JSON.parse( content );
error1366×768 78.5 KB
it’s the path. @notchris has already told you what it is, it’s a 404 file not found response the gltfloader is trying to parse as a gltf.
.../ is wrong, ../ would be wrong  as well. bundlers collapse your code into a single file, folders and relative paths do not exist. relative paths are for module imports only. you need to put assets into /public and then access them as an absolute path /model.glb. or, you import modelUrl from '../img/scene.gltf', that would work, now the bundler as aware that you need that asset and will include it in /dist with a hashed name.
using a gltf instead of a glb is a mistake as well btw.
error11366×768 80.7 KB
I did just that yet the same problem, I don’t understand why the bundler doesn’t understand the path.
I tired importing the file using manually using the import keyword, yet It did not work. I also tried putting the file in the dist folder and tried loading the file from there yet same problem, I tried creating a new folder called public and I putted the files in there and tired importing the file from there still the same problem keep coming up…
Please how do I fix it. I haven’t gone anywhere in 3D Development and I’m already facing such issues.
              
for imports to work you need a loader that knows what “gltf” is. usually bundlers should assume url-loader for unknown extensions, looks like yours doesn’t. still i don’t know why you’re not just using /public, does that not exist in parcel?
I also tried putting the file in the dist folder and tried loading the file from there yet same problem
you need to put it into /public, not /dist. this should be the same for all bundlers and environments, /public is a standard. tbh if your bundler is that stubborn just trash it. npm create vite. i have never used parcel myself, but to me it looks pretty bad tbh. why is it causing you that much trouble …
 proelectrocoder:
I tried using absolute path, yet I received another error from the server I used
Put your code back to how it was earlier when you tried using the absolute path and show the actual error text or screen grab of it. What fixes you’ve tried since may be compounding your error.
              
I thought “surely, it’s not that hard”, but it really was, trying to use parcel to load a glTF in Threejs in CodeSandBox.

Seriously, I had all kinds of issues. The browser locking up all of the time, and the files just not being found no matter what ever I tried.

But it works now.

Spin Suzanne - CodeSandbox
              
I had the same problem.

I tried to load .glb model in a react project (React version: ^18.2.0).
The solution for me was to insert the model to the public folder as mentioned before.

When doing so and using it like this:
  const modelLoader = new GLTFLoader();
  modelLoader.load("/assets/models/myModel.glb", ...rest of the code...
Everything works just fine.
Make sure your camera is in the right position and can see the model
Make sure you model is not too small or not too big
              
Hi Proelectrocoder!
For me the problem was also the path.

My fix was to ‘strangely’ delete the first / of the path,

in my example my 3d model is in the folder public/3d/Lom3dExample.glb . In the code:
import { useLoader } from '@react-three/fiber'
import React, { Suspense, useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
export function Lom3D(props:any) {
    const gltf = useLoader(GLTFLoader, '3d/Lom3dExample.glb')
    return (
      <Suspense fallback={null}>
        <primitive object={gltf.scene} />
      </Suspense>
(don’t put ‘any’ in typescript ^^, it was just for the demo)

I hope it will help you, have a nice day!
UPDATE:

This work the best for me, (like the previous model, the 3d folder is in public) :
import React, { Suspense } from 'react';
import { useGLTF } from '@react-three/drei'; 
export function Lom3D() { 
    const usingGlft = useGLTF('3d/actual3d.glb',true)
    return (
      <Suspense fallback={null}>
        <primitive object={usingGlft.scene} />
      </Suspense>
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
const downloadUrl = new URL('../Cartoon_boy.glb', import.meta.url);
loader.load(downloadUrl+"/", function(gltf) {
    console.log(gltf);
}, function(xhr) {
    console.log(xhr.loaded/xhr.total * 100);
},function(error) {
    console.log(error);
see this two lines it might help

const downloadUrl = new URL(‘…/Cartoon_boy.glb’, import.meta.url);

loader.load(downloadUrl+“/”
package.json
  "devDependencies": {
    "parcel": "^2.8.2"
  "dependencies": {
    "three": "^0.147.0"
  "name": "projekt",
  "version": "1.0.0",
  "scripts": {
    "watch": "parcel index.html --open",
    "build": "parcel build index.html"
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
No need to keep 3d file in any folder like public or assets it will work fine

I have installed the parcel and three.js file which is latest currently at the time of writing solution.
I have performed particular steps
npm install parcel --save-dev
npm install three
index.html
src/index.js
glb or gltf file
npm init -y
changes in package,json (the one I have done above you can change it accordingly)
npx parcel build index.html
npx parcel index.html
Result → You will be able to see the object of the 3d model in the console.
Hope so it will help.
              
Hi, mine was also the path issue.

Solution: add the glb model in public folder
public/models/nameOfModel.glb
I created a simple component
import React from 'react';
import { useGLTF } from '@react-three/drei';
const NewMapModel = (props) => {
  const { scene } = useGLTF('/models/Northpoint-City-v2.glb');
  return (
    <primitive object={scene} />
export default NewMapModel;
and then use it inside of Canvas
              
Hi, for me to add gbl to the public folder go off for the local server, but after deploy my app using aws amplify the error came back.
upd: sovled the problem by adding |glb|gltf| to Rewrites and redirects in the aws amplify console
              
I got same issue and yes it is the path issue. I follow same instruction as @MesMesBrio stated
My solution:
Create a 3d folder under public folder and put your 3d file in there.
Call it with const { nodes, materials } = useGLTF('/3d/shirt_baked.glb'), import { useGLTF } from '@react-three/drei'