Three.js json loader error without changing file extension

Question

I created a model in Blender and then exported it to JSON using Three.js official exporter. Then I tried to load it using the next code:

const loader = new THREE.JSONLoader();
loader.load('assets/models/bear.json', (geometry, materials) => {
  const bear = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
  scene.add(bear);
});

Then I got the error:

(unknown) TypeError: url.split is not a function
  at Object.extractUrlBase (eval at <anonymous> (app.js:742), <anonymous>:32860:19)
  at JSONLoader.load (eval at <anonymous> (app.js:742), <anonymous>:33166:120)

Here is my json file: https://github.com/elliepooh/VRcard/blob/master/src/assets/models/bear.json

I found some decisions, but they all are about renaming the .json file to .js and load it instead. Since I'm using webpack and eslint, it is problematic for some reasons...

I also tried to use Clara.io JSON loader code this way:

const loader = new THREE.ObjectLoader();
loader.load('assets/models/bear.json', (obj) => {
  scene.add(obj);
});

And then I got the following TypeError: url.lastIndexOf is not a function

If there any method of loading json to three.js without changing it's file extension and without having such errors? Any help would be appreciated...

For some reason is doesn't like your URL. Could you please paste the full error form your console? Thanks! — TheJim01
– TheJim01, Commented May 26, 2017 at 14:01
My guess would be the JSON is referring to a texture with a value that is a not string url. I am guessing this because only the texture loader utilizes url.split in the extractUrlBase function of loader, which is used by JSONLoader. I would advise to post your JSON on codepen and see if it loads there, so others can replicate the error. — Radio
– Radio, Commented May 26, 2017 at 14:19
1) Aha, I see your bearModel is actually from an import. Have you tried it with just a string, like you have in the code in your post? 2) Which transpiler are you using? If import x from "@...." doesn't return a string, then that's the problem, because loader.load expects the first parameter to be a valid URL string. — TheJim01
– TheJim01, Commented May 26, 2017 at 15:17
It looks like your assets are at the root of your project. Try your URL as: /assets/models/bear.json. The / at the front references the root of your server (unless your server/framework defines otherwise). Otherwise try a fully qualified URL (http://...etc...) to see if your server is actually replying with the JSON. — TheJim01
– TheJim01, Commented May 26, 2017 at 16:56
I'm glad you got it working! Please consider writing up your solution as an answer and accepting it, so others can see your problem was resolved. :) — TheJim01
– TheJim01, Commented May 26, 2017 at 18:39

elliezen · Accepted Answer · 2017-05-26 19:53:22Z

1

The problem was in importing the .json file. Instead I should have loaded it with a string. (as it was in description, but I used @import in my code)

Now it looks this way:

const loader = new THREE.JSONLoader();
loader.load('/static/bear.json', (geometry, materials) => {
  const bear = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
  scene.add(bear);
});

Great thanks to @TheJim01 for his help!

answered May 26, 2017 at 19:53

elliezen

5531 gold badge4 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Three.js json loader error without changing file extension

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related