Multiple materials with JSONLoader? - three.js

Question

Is it possible to assign two materials to one mesh which has been loaded with JSONLoader?
I've made a simple character in blender and exported it to three.js format, which contains morph targets and UVs.
I was trying to assign solid color material to the body and a picture to my character's head (http://touhou.ru/dev/webgl-test-stackoverflow/kourindouhime.jpg), but after loading mesh and materials I get a gray-colored mesh.
Here's production version of my project (use wasd to move and when you see a gray player mesh which you'd be controlling, that's exactly the thing I'm talking about): http://touhou.ru/dev/webgl-test-stackoverflow/
And here's the way I'm loading mesh and materials with JSONLoader:
var player_loader = new THREE.JSONLoader();
player_loader.load( "running_babe.js", function(geo, material) {
material[0].morphTargets = true;
material[1].morphTargets = true;
var materials = new THREE.MeshFaceMaterial(material);
player = new THREE.Mesh( geo, materials );
scene.add(player);
});
Am I doing something wrong?
UPDATE: the problem was in my export. Now the second material looks that way:
{
"DbgColor" : 15597568,
"DbgIndex" : 1,
"DbgName" : "Material.001",
"blending" : "NormalBlending",
"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorSpecular" : [0.5, 0.5, 0.5],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "kourindouhime.jpg",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
}
and it works very nice. Thank you guys.

Answer 1

If I looked your code correctly, running_babe.js is the mesh you are talking about. Looking at its source, the materials are as follows:
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material",
"blending" : "NormalBlending",
"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorSpecular" : [0.5, 0.5, 0.5],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "default",
"vertexColors" : false
}],
It can be clearly seen that there are no textures, the second one doesn't have really anything and the first one has all colors as a shade of gray. Seems like the materials aren't exported correctly. That is not a big surprise as exporting materials is hard, as there might not be a clear mapping between 3d modeler concepts and three.js material params. I'd just fix it by manually specifying the material params into that file.

Answer 2

You can have one material per mesh, that's the way OpenGL works. Are you sure you have only one mesh?