Three.js load multiple separated objects / JSONLoader

Question

is it possible to load a scene (e.g. two different cubes) exported from blender to json and identify them?

I need to distinguish between them e.g. to make one rotating and the other moving.

Thank you in advance!

Denv

edit+++

Thank you for your answer!

So if I load two cubes in one JSON file:

loader.load("untitled1.js", function(geometry, materials) {  
        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 0;
        mesh.position.x = 0;
        scene.add( mesh );       
});

How can I move first cube?

mesh.getObjectById(0).position.x = 15;

Doesn't seems to work.

Thank you!

Answer 1

Yes, it is possible to load an entire scene from a json file exported from Blender!

I achieved that with the following process: (Using three.js r80)

1. First you have to name your different objects in Blender like in the following image Outliner.
2. Then you can export the file using Three.js json exporter add-on for Blender, but taking care of marking the Scene checkbox like in the following:

3. Using this option your json file now contains all the meshes on the Blender's Outliner, as you can verify using any text editor. It doesn't matter if the meshes were selected or not.

4. It is important to know that the root (or parent) object isn't a Geometry anymore. It is labeled with the Object type by now. To access the children objects (of Mesh type) you can use the getObjectByName method on the root object like in the following code:

   jsonloader.load( "obj/Books.json", function ( loadedObj ) {
       var surface = loadedObj.getObjectByName("Surface");
       var outline = loadedObj.getObjectByName("Outline");
       var mask = loadedObj.getObjectByName("Mask");
       // Watch the objects properties on console:
       console.log(loadedObj);
       console.log(surface);
       console.log(outline);
       console.log(mask);
   } );
   

   If we check the browser's console, we can see the proper objects assigned. And from now, you can manipulate the children objects independently (move, rotate, change materials, etc.)

Answer 2

Each object loaded has an associated .id. So you can use the Object3D.getObjectById() to find it and apply transforms on it.