1
\$\begingroup\$

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

\$\endgroup\$
2
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ oh, cool, I have to try out as soon as possible. At this point I can only say that three.js documentation says nothing about existence of ObjectLoader class so I have tried only those documented there and never this one. Thanks a lot. \$\endgroup\$ – lot Jan 29 '14 at 17:51
  • \$\begingroup\$ THREE.ObjectExporter are not currently (r71) in THREE.js. Was it replaced with something or moved somewhere? Where to find it? \$\endgroup\$ – SET Jul 11 '15 at 17:49
  • \$\begingroup\$ Use THREE.ObjectLoader. :) It is in the /src/loader/ directory of ThreeJS \$\endgroup\$ – bhouston Jul 21 '15 at 13:45
2
\$\begingroup\$

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 );
    }   
);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.