DRACOLoader prints error: SyntaxError: Unexpected token '<'

Questions
,
1

I am trying to load this .gltf file into Three.js with DRACOLoader.
dna.gltf (893.6 KB)

But for some reason I get this error: SyntaxError: Unexpected token '<'

You can see my code here:

import * as THREE from "three";

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

export default class Sketch {
  constructor(options) {
    this.scene = new THREE.Scene();

    this.container = options.dom;
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(this.width, this.height);
    this.renderer.setClearColor(0x141414, 1); 
    this.renderer.outputColorSpace = THREE.SRGBColorSpace;

    this.container.appendChild(this.renderer.domElement);

    this.camera = new THREE.PerspectiveCamera(
      70,
      window.innerWidth / window.innerHeight,
      0.001,
      1000
    );
    this.camera.position.set(-2, 2, 4)
    
    this.time = 0;

    const dnaPath = new URL('/public/model/dna.gltf', import.meta.url);
    
    this.dracoLoader = new DRACOLoader()
    this.dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
    this.loader = new GLTFLoader()
    this.loader.setDRACOLoader( this.dracoLoader );
    
    this.loader.load( //Error happens here
      dnaPath.href,
        function () {
            console.log("IN")
        }
    )
  }

  setupResize() {
    window.addEventListener("resize", this.resize.bind(this));
  }

  resize() {
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;
    this.renderer.setSize(this.width, this.height);
    this.camera.aspect = this.width / this.height;
    this.camera.updateProjectionMatrix();
  }

  render() {
    this.time += 0.05;
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
  } 
}

new Sketch({
  dom: document.getElementById("container")
});

This is my Network page when I run the code, but I can’t see anything wrong with it.

Screenshot 2023-08-02 at 17.46.53
Screenshot 2023-08-02 at 17.46.531610×500 85 KB

I tried following this: To load 3D model which is compressed by draco and it has .gltf extension - #4 by mfschmidt.
But it does not work. What am I doing wrong?

I hope someone can help.

Note: I am using Parcel, if that changes anything.
Let me know if I need to share my package.json file.

2

…means wrong path to gltf file.

(@donmccurdy do you think you could catch it and output some warning, I feel like this is getting asked year after year)

1 Like
3

99.9% of the time, the < character implies an HTML document is being returned by the server, rather than a JSON (gltf) file.

If you know how to work with the devtools in your browser and are familiar with the network tab (like in your screenshot), simply click on the gltf file there and inspect the response.

You should be able to see the actual error, which is most likely like @makc3d says: a 404 error.

4

Checking the error or the HTTP response code and logging something better would probably be a good change yes. :+1:

5

I mean just .charAt(0) === ‘<’ would work. Sometimes servers redirect to / instead of 404 but the underlying issue is still the same - bad gltf url.

6

The public directory likely won’t exist if your using a compiler, if the model folder is in the public directory try…

const dnaPath = '/model/dna.gltf'

Also not sure you need the .href after this path reference when loading, it would work without…