I’m trying to load some models from a remote URL into my app and I’m suddenly getting this error over and over again:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
The models I’m working with are those available from THREE.js’s GIT - here - so they’re all perfectly good legit models that we’ve all been using for years.
What’s weird is that I first downloaded them to my hard drive and then loaded them into my project directly from there - and my code worked perfectly. But as soon as I uploaded these very same models to a remote server and tried to load them from that URL, I suddenly started getting this error.
Here’s my loading function:
function loadModel(modelFileName) {
console.log("->In 'loadModel()', 'modelFileName' =", modelFileName);
// Load the Object:
gltfLoader.load(modelFileName, function(incomingScene) {
console.log(modelFileName, "' has arrived!!!");
console.log(" =>'incomingScene' = ", incomingScene);
let loadedScene = new THREE.Scene();
loadedScene = incomingScene.scene;
scene.add(loadedScene);
const defaultTransform = new THREE.Matrix4()
.multiply(new THREE.Matrix4().makeScale(0.5, 0.5, 0.5));
loadedScene.applyMatrix4(defaultTransform);
},
// Called when loading is in progresses:
function(xhr) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function(error) {
console.log("ERROR! -->", error);
});
(What’s even weirder is that this particular model was actually working just fine when I first loaded it from that URL, but then it suddenly stopped loading and gave me that error I listed up top. Makes no sense.)
Any ideas what’s causing this - and how it can be solved?
When you see this error, there should usually be more errors in your JS console or in the Network tab of your browser’s developer tools. Those might have more information.
OK I looked in both the Console and Network tabs - the only additional info is from my progress callback - meaning this bit of code:
// Called when loading is in progresses:
function(xhr) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
And what the console logs from that is this:
Infinity% loaded
Does that shed any light?
I see all sorts of questions posted about this error on StackOverflow, but only one having to do with THREE.js in particular - and that one isn’t helpful.
What could be causing this error? What could it mean? (we all know there’s no “unexpected character” in this - or any of the other glb files that are on THREE js’s GIT repo…)
@donmccurdy Hey you were right about the “Network” tab - I took a much closer look, and it seems the browser IS thinking that the “Flamingo.glb” file I’m trying to load is an HTML file, even though it’s clearly not.
If you click right click and access that URL, then visit it, what do you actually get?
This error usually means the file doesn’t exist at that URL, and that your web server is giving you something else — like an HTML “Not Found” page — instead. How to fix this depends entirely on how your project and folder structure is set up.
@donmccurdy
Ok, it seems the URL gets all chopped up in the Network tab of my browser’s Console - check it out:
It’s split into pieces - “Scheme”, “Host”, “Filename” - and ultimately “Filename” points to the FOLDER in which the “.glb” file is sitting, instead of the actual “.glb” file itself.
So it’s basically ignoring the very last part of the URL, which is this:
But nowhere in the Networks tab is this URL showing up as a single full URL that I can actually click on and navigate to.
This is happening in both Chrome and Firefox.
Not sure why it’s doing this.
Is there a way to “force” the browser to not ignore that last ?filename=Flamingo.glb portion of the url?
These questions all relate to your project, and how your code is trying to load this model. Without some way to test and run that code I don’t think that I can help further.
At the end of the day the code I’m using to load the model into my website is exactly as I posted it in my original question up top. I mean you’ve seen it. I’m about 99.9% sure there’s anything wrong with it. So it’s gotta be some kind of quirky browser issue.
Weird.
Anyway, I’ll figure something out.
Thanks for the ongoing help.
I gotta say I’m totally psyched about THREE.js - I just love it. And can’t believe I didn’t discover it till like 6 months ago (or whenever it was.)
So expect to see many more questions from posted on this forum!
did you get it working. there are no working solutions i have found. this is pretty ridiculous. i’m seeing other people load their models just fine but mine is not… pretty annoying. there should be documentation on this error
Error is anecdotal, as far as I can tell. The loader is just not understanding what it is you are passing to it. It is asynchronously attempting to load what is essentially nothing, therefore ‘Infinite’. I could be wrong, but just don’t focus on it that’s all.
You may have to sanitize the URL input by removing any unwanted characters passed along to the GLTF Loader that are unintended. Since its a function you created, it may be coming from a different source too.
I’d start with attempting to load the asset in a basic environment on its own with just the GLTF loading function from the docs and see what that returns.
The times I get this error is usually a problem with the file path and nothing else.
For instance,
gltfLoader.setPath('../models') // this path returns json parse error
gltfLoader.load('asset.glb', (gltf) => { ... })
/* ------------ */
gltfLoader.setPath('../models/') // this path works, note the '/'
gltfLoader.load('asset.glb', (gltf) => { ... })
gltfLoader.setPath('../models') // this path works too
gltfLoader.load('/asset.glb', (gltf) => { ... }) // cause the '/' is here instead
