Loading more than one Blender-exported object/mesh+material in Three.js

Question

I've modelled two objects in Blender, with different materials and different textures UV-mapped to them. I'm rendering it with the CanvasRenderer

If I export it, there is more than one material but just one mesh in the resulting JSON file.

This is the (simplified) code I use to load a model with Three.js:

var loader = new THREE.JSONLoader();
loader.load(myModelPath, function {

    var material = geometry.materials[0];
    material.morphTargets = true;
    material.overdraw = true;

    var mesh = new THREE.Mesh(geometry, material);

    mesh.scale.set(50, 50, 50);
    mesh.position.set(0, 0, 0);

    scene.add(mesh);

});

As you can see, I'm only using the [0] material. The result is that the second object uses the first object's material (if I use the [1] material, the opposite happens).

But I do not know how to create a mesh that uses more than one material!

Is it even possible? Or, is there a way to export more than one JSON file from Blender (one per object)?

Answer 1

They have probably made improvements to the json exporter since this question was asked, but it is possible now. In the export options near the bottom under settings, there is a checkbox for all meshes. Uncheck that and only the selected mesh will be exported.

Answer 2

You know what? There is a relatively easy way of going about a case like this.

1. Model in blender as usual.
2. Save as copy as many copies as objects you have.
3. Open each copy, and delete everything except the pertinent object.
   Now you have obj1.blend, obj2.blend, etc.
4. In each of these, export to three.js as you go.
5. Load them all. In my code, this is as simple as adding strings to an array.

Note that if there's a more straight-forward way of going about it, I'd like to know too :)

Answer 3

You have to use the THREE.ObjLoader. In the blender export settings you can select scene and materials at the bottom of the export options. Voila