How to load geometry/object/scene created in Clara.io with Three.js

Question

Does anybody know how to load anything created in Clara.io into your Three.js scene?

Clara.io allows export of ThreeJS geometry, object or scene. I tried all those in combination with all THREE loaders (JSONLoader, SceneLoader, GeometryLoader, etc.) without any success (Parse function inside of three.js fails to process json structure).

Structure of exported file from Clara.io looks to be completely different from what Three.js loaders expect. Can this be achieved in any way or is Clara export simply useless at this point?

I am talking three.js v.65 in combination with current version of Clara.io

Answer 1

Clara.io exports Scene and Object data using the THREE.ObjectExporter. The resulting exported files are intended to then be loaded by the THREE.ObjectLoader. The start of these exported files will look like this:

{"metadata":{"version":4.3,"type":"Object","generator":"ObjectExporter"},...

Code to load files via the THREE.ObjectLoader is here on Github.

You can load the data from an URL using the ObjectLoader.load() function or from an already in-memory JSON object using `ObjectLoader.parse().

I hope this helps. If you would like us to modify how we do things, we can.

EDIT: We have added a documentation page that describes how to load ThreeJS scenes exported from Clara.io. It can be found here:

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

Answer 2

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 app, load it like this:

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