Loading multiple objects in Three.js from Blender

Question

I have a quite complex shape (dressed girl) that in Blender is broken down into different objects and it's loaded into Three.js with the JSON loader (with a little hack I made, that uses zipped files instead of just JSON files, as there are a lot of vertices).

As I want to change dynamically the style of the dress from a Web page, I was wondering how I can show/hide different pieces (e.g. sleeves) in the scene.

I tried traversing the THREE.Mesh, but there are no children.

When I export from Blender with the JSON exporter, I don't see anything referring to the names of the objects in the JSON. Is the structure lost?

Answer 1

If you are using meshes containing lots of vertices, I would advise you to use the openCTM webGL loader instead of zip hacking. Here is a link to the loader : http://threejs.org/examples/webgl_loader_ctm.html
This mesh compression tool uses LZMA compression method and can reduce the size of your files by 93%...

Concerning the JSONLoader, using an array might help:

var meshes = [];
...
var loader = new THREE.JSONLoader();
var onGeometry = function(geom)
{
    var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [material]);
    meshes.push( mesh );
    ...
    scene.add(mesh);
};

loader.load("yourfile.js", onGeometry);

Hope this helps

Answer 2

It is possible to load an entire scene with several meshes from a json file exported from Blender and handle them separately!

You can follow the complete process of exporting a entire scene from Blender and the right way of handling the exported meshes on my answer of this post.

So, you can get the different meshes and manipulate them separately using the getObjectByName method. But it is important to know that the loaded object isn't a Geometry anymore. It is labeled with the Scene type by now and it must be handled in a different way.

The loading code must look like this one:

    loader = new THREE.JSONLoader();
    loader.load( "obj/Books.json", function ( loadedObj ) {
        var surface = loadedObj.getObjectByName("Surface");
        var outline = loadedObj.getObjectByName("Outline");
        var mask = loadedObj.getObjectByName("Mask");
        scene.add(surface);
        scene.add(outline);
        scene.add(mask);
    } );

Besides, you can handle the multiple materials of single mesh using THREE.MeshFaceMaterial like in the following code:

var mat1 = new THREE.MeshLambertMaterial( { map: texture1 } );
var mat2 = new THREE.MeshLambertMaterial( { map: texture2 } );
var materials = [mat1, mat2];
var faceMat = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh( geometry, faceMat );
scene.add( mesh );

Hope this helps :)