Export scene from Three.js editor and import

Question

I make a simple scene using the editor of three.js working in local. When i'm finished the scene i will go to "file" -> "export scene" and the editor generate JSON Object/Scene. Now i will copy and paste this code and save like a .js? How i can import this scene in my project preserving the textures?

Thanks !

Answer 1

Develotecca's answer shows how to load a basic THREE.geometry from a JSON file. However, in my experience, the geometries exported by the three.js editor are of type BufferGeometry (which is more efficient than a basic Geometry) so they need to be loaded using a THREE.BufferGeometryLoader rather than a THREE.JSONLoader.

Also, the question is about saving and loading scenes, not geometries. JSONLoader is designed only to load basic geometries, and a geometry contains only a single model's per-vertex and per-face information (which includes material numbers for indexing into a MeshfaceMatrial, but no other material information, and so it needs to be combined with a material before use). If you try to load an entire scene using JSONLoader, instead of just a part of one object in the scene, the loader should spot this and deliver the message

THREE.JSONLoader: seems to be a Scene. Use THREE.SceneLoader instead.'

to the console log. This gives a big clue to the proper way to proceed.

The scene loader is documented at http://threejs.org/docs/#Reference/Loaders/SceneLoader (though the documentation is currently incomplete), and its source code is at https://github.com/mrdoob/three.js/blob/master/src/loaders/SceneLoader.js and an example of its use is at http://threejs.org/examples/webgl_loader_scene.html

All of that is a lot to wade through. I haven't actually used SceneLoader myself yet, though I intend to soon, but from what I've read so far it looks similar to BufferGeometryLoader or JSONLoader except because you're loading a whole scene instead of just part of one you have

scene = loaded.scene

rather than

scene.add()

and you may need to include other loaders and handlers for any specialized geometries that your scene uses, e.g.

<script src="js/loaders/ColladaLoader.js"></script>
..
loader.addHierarchyHandler( "dae", THREE.ColladaLoader );

for Collada.

Answer 2

Load JSON data with:

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("models/object.json", addModelToScene);

function addModelToScene(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    object.scale.set(10, 10, 10);
    scene.add(object);
}

Example: http://stemkoski.github.io/Three.js/Model.html

Other example: http://all.develoteca.com/builder/