Exported ThreeJS JSON file cannot be opened then

[hypergeff]

Hi,

I tried to export different projects to ThreeJS JSON files. Once exported I cannot load it with my THREE.JSONLoader() routine (which works with a JSON file exported from Blender) or even import it in Blender with the ThreeJS importer.

Do you experience the same issue ?
Did I miss something ?

Thanks much,

[bhouston]

Hi Hypergeff,

There is some documentation here:

https://clara.io/learn/user-guide/data_exchange/threejs_export

I have created a PR to the ThreeJS project that has an example that loads Clara.io produced ThreeJS JSON. IF you wanted to give it a try and endorse the PR that would be really helpful to others:

simple JSON loader example for importing Clara.io JSON exports.

Best regards,
Ben Houston

[hypergeff]

Great, Thanks !

[bhouston]

Hi Hypergeff,

Yesterday we pushed out an update that adds ThreeJS Geometry, Scene and Object export support. They work great. Give them a try and let us know if they meet your needs.

You can find them under the File > Export menu.

Best regards,
Ben Houston

[hypergeff]

Fantastic ! I tried the 3 exporters.

At start I had troubles because Three.js json loader samples provided on threejs.org did not work "as is" (errors in the Three.js library).
Maybe it would be worth writing a minimal piece of code in Clara.io documentation pages explaining how to load the 3 different exports in a web page.

Thanks

[bhouston]

Hi Hypergeff,

We will add some documentation for that. Thanks for the sugggestion. Tracking as issue #2498

Best regards,
Ben Houston

[lotcz]

Hello,

is there news with this topic? Is there an example piece of code showing how to load exported files? I have tried exporting as ThreeJS.Object and no loader seems to support json file's structure.

[lotcz]

Structure of exported file is indeed very different from what Three.js loader expects. Perhaps it was working with some old Three.js version only?

[lotcz]

Solution found: all I needed was to make sure that I have exactly one mesh selected (merge them first if needed) and then use File->Export->ThreeJS Object from menu.

in my THREE.JS app, load it like this:

var loader = new THREE.ObjectLoader();
loader.load("dragon.json", 
    function ( obj ) {
        scene.add( obj );
    }   
);

[bhouston]

I think that you can also export the scene and it will return a scene object upon load.

[hypergeff]

I never checked out before, but it seems like if a model contains a material with a texture, then the threejs exported json file doesn't contain this texture information... even though the textue is contained in the exported zip file

[bleuneptune]

I never checked out before, but it seems like if a model contains a material with a texture, then the threejs exported json file doesn't contain this texture information... even though the textue is contained in the exported zip file

i think the problem is figuring out what filename the user chose in the private file open dialog to select the texture. a possible workaround is to name your materials the same as the relative filename of the texture from your index.html, and in your game engine, loop through your objects and load their textures by the names of their respective materials. material names in clara.io can have '/' and '.' in them, so 'textures/mytexture.jpg' is a valid material name.

[bhouston]

Hi all,

We have added some documentation on how to load ThreeJS JSON files exported from Clara.io. Hopefully this helps:

https://clara.io/learn/user-guide/data_exchange/threejs_export

Best regards,
Ben Houston

[moonhopper]

HI - could you please show that code in the context of a web page. I'd just like a simple way of viewing what I've tried exporting from clara. There's plenty of examples out there for loading js/svg geometry (within html script tags) but I cannot use same for the json/clara files. Sorry for the noob question.

[bhouston]

HI - could you please show that code in the context of a web page. I'd just like a simple way of viewing what I've tried exporting from clara. There's plenty of examples out there for loading js/svg geometry (within html script tags) but I cannot use same for the json/clara files. Sorry for the noob question.

Hi Moonhopper,

Just take an existing ThreeJS Example, just as this one, http://threejs.org/examples/#webgl_loader_obj, and then take the source code and replace the existing OBJ loading code with the code that is listed here:

https://clara.io/learn/user-guide/data_exchange/threejs_export

It should work for you.

Best regards,
Ben Houston

[moonhopper]

Thanks for the quick responses. I cannot get that to work however, even with a simple (primitive) mesh in the json export. I've tried exporting all with object selected, and not ... and have check for correct local url paths. I'm getting the plain black background but that's all. Do you have a simpler example (say, without needing all the extras like texture, detector and stats files) or could you point to a step by step beginners walk thru? Thanks again.

[bhouston]

Hi Moonhopper,

In response to your question, I have created a PR to the ThreeJS project that has an example that loads Clara.io produced ThreeJS JSON. IF you wanted to give it a try and endorse the PR that would be really helpful to others:

simple JSON loader example for importing Clara.io JSON exports.

Best regards,
Ben Houston

[tiefenscharf]

Dear Mr. Houston,
Hello to all members here,

I just joined Clara.io with "Standard" membership due to a recommendation a few hours ago.
I did so because I need to transform 3D objects/geometry for an upcoming job and used your data exchange for a try.

I am not the programmer, the project is divided between several persons and I am the 3D operater doing model/texture work. So I can only quote the error message but will certainly forward any questions that my come up.

I converted two FBX and one DAE model here into JSON Objects and send them to the programmer. All models fail to load.
From first reading this thread I got aware of this solution and reported to the programmer:
https://clara.io/learn/user-guide/data_exchange/threejs_export

He tried and has still the identical issue with each file:

    Uncaught TypeError: Cannot read property 'length' of undefined Three.js:10799
    parseModel Three.js:10799
    THREE.JSONLoader.parse Three.js:10739
    xhr.onreadystatechange Three.js:10680

Now to my questions:

1. Between "Basic" and "Standard" membership there is the advance of a customized WebGL embed. But I cannot see a difference, there is no menu for customization. Did I oversee it? Do I need an upgrade to "Professional"?

2. In the documentation (Data Exchange) you list 3 ThreeJS exporting options like "Geometry", "Object" and "Scene". But I cannot find "Geometry". Would that be more helpful for pure model export? Where can I find it?

3. Could the problem be located earlier in the FBX or DAE export?

I would be very thankful, if you could give us a clue how to deal with this error message.

Thank you very much!

Regards

[bhouston]

Hi Tiefenscharf,

From first reading this thread I got aware of this solution and reported to the programmer:
https://clara.io/learn/user-guide/data_exchange/threejs_export

He tried and has still the identical issue with each file:

Uncaught TypeError: Cannot read property 'length' of undefined Three.js:10799
parseModel Three.js:10799
THREE.JSONLoader.parse Three.js:10739
xhr.onreadystatechange Three.js:10680

The reason your programmer can not load the models is because he is using the class THREE.JSONLoader -- he should re-read the documentation. He should instead be using the class THREE.ObjectLoader. Here is an example of how to load Clara.io produced ThreeJS JSON:

https://clara.io/learn/user-guide/data_exchange/threejs_export

The confusion comes from the fact that there are multiple ThreeJS JSON formats and they are all incompatible with each other.

Between "Basic" and "Standard" membership there is the advance of a customized WebGL embed. But I cannot see a difference, there is no menu for customization. Did I oversee it? Do I need an upgrade to "Professional"?

What would you like to customize? Right now we have not fully restricted Basic memberships with regards to the embed options as we are in beta. To find the ways to customize the embeds go to a scene's view page and then click on the embed button. A dialog will appear that has a lot of options available.

In the documentation (Data Exchange) you list 3 ThreeJS exporting options like "Geometry", "Object" and "Scene". But I cannot find "Geometry". Would that be more helpful for pure model export? Where can I find it?

We just removed the "Geometry" format on Monday. We will now update the documentation. We found it was not a reliable format for loading into ThreeJS. Thus we recommend against using it.

Although you can also use the other OBJ format if that helps. The OBJ format is standard and thus less likely to break as ThreeJS evolves.

Best regards,
Ben Houston

[tiefenscharf]

Dear Mr. Houston,

thank you very much for your quick and detailed answer! I appreciate your help very much.

I sended the informations to my programmer and wait for his reply. I am going to report you about the progress.

Kind Regards

S.Thomas