Specular highlights with a model imported from Blender?

Question

I made in Dice with 2 different colored materials in Blender and exported it with the Blender exporter. In my three.js code, I use JSONLoader to get the mesh and use new THREE.MeshFaceMaterial(); as material.

This loads the model just fine with the two different colored materials showing correctly. But my problem is, that I want the dice to have specular highlights on the surface. Is this even possible with exported Blender models?

I managed to get a Sphere with specular highlights when I used THREE.MeshPhongMaterial() as material for the sphere, but the sphere wasn't imported from Blender and as far as I know, I can't apply a Phong Material when I load the Mesh with JSONLoader, or is there a trick? Please remember: I got two differently colored materials on the dice, which I import from Blender in the JSON file. The dice by itself is red, but the dots should be black. So I am not talking about different colors on each side of a cube or so, but two different colors on every side of the cube. Can you help me?

Here's the code snippet:

loader.load("models/dice.js", function(geometry){
    var material = new THREE.MeshFaceMaterial();
    material.specular = 0xffffff;
    material.shininess = 10000000000;
    dice=new THREE.Mesh(geometry, material);
    dice.position.set(0,-400,5);
    dice.scale.set(75, 75, 75);
    dice.overdraw = true;
    dice.name="dice";
    navscene.add(dice);
});

If it helps, I am able to create a texture out of the two materials and apply them in Blender, so that the JSONLoader loads the texture instead of the materials, but I wasn't able to achieve a specular highlight either with that.

WestLangley WestLangley · Accepted Answer · 2012-09-21T17:59:03

If your mesh geometry has a materials array, you can always change the array elements after you load the geometry:

geometry.materials[ i ] = new THREE.MeshPhongMaterial( ... );

You then leave the mesh's material as MeshFaceMaterial:

mesh = new THREE.mesh( geometry, new THREE.MeshFaceMaterial() );

The exporter script you are using may set geometry.materials to Lambert material by default, based on your settings. Have a look at the script source code and see if you can figure it out.

Specular highlights with a model imported from Blender?

2 Answers