Multiple materials with JSONLoader?

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.

score 1 · Accepted Answer · answered Feb 18 '13 at 13:59

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.

score -1 · Answer 2 · answered Feb 18 '13 at 09:03

-1

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

answered Feb 18 '13 at 09:03

bjorke

3,295
1
16
20

Well, it loads as a single THREE.Mesh object, but if I check "player.geometry.geometryGroupsList" I'll get two meshes - one for head box and second for body. – Kourindou Hime Feb 18 '13 at 12:20
1

@bjorke - Three.js supports multiple materials per mesh. It internally splits the faces into groups so that in the end it will render one geometry per material, but from API point of view multiple materials are supported. – Tapio Feb 18 '13 at 14:02
Thx for the heads-up on that for threee.js, @Tapio! – bjorke Feb 26 '13 at 00:35

Multiple materials with JSONLoader?

2 Answers2

Linked