Three.js Loaded Model Missing Bump and Specular Maps

Question

I'm having trouble getting bump and specular mapping working on an imported model in three.js.

I'm exporting a model from 3DS Max to a .obj file, then using the convert_obj_three.py script to convert it to .js. Inside the model.js file I can see that bump and specular maps are coming across:

"materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "flloor_bump_test",
    "illumination" : 2,
    "mapAmbient" : "sat_8.jpg",
    "mapBump" : "sat_8_bump.jpg",
    "mapDiffuse" : "sat_8.jpg",
    "mapSpecular" : "sat_8_spec.png",
    "opticalDensity" : 1.5,
    "specularCoef" : 25.0,
    "transparency" : 0.0
},

Here's how I load the model into my scene:

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model.js", addModelToScene );

function addModelToScene( geometry, materials )
{
    var material = new THREE.MeshFaceMaterial( materials );
    model = new THREE.Mesh( geometry, material );
    model.scale.set(0.01,0.01,0.01);

    model.castShadow = true;
    model.receiveShadow = true;

    scene.add( model );
}

Any ideas greatly appreciated! Thanks!!

EDIT

Here is a link to my live demo - http://benbeckford.com/temp/

EDIT 2

So after playing with it I can see that the following data was missing from the converted .js model:

"shading" : "phong",
"mapSpecular" : "powerday_sat_8_specular.png",
"shininess" : 1000,
"mapBumpScale" : 5,

So obviously there is a problem in my export from Max to .obj, or the conversion of .obj to .js. If anyone has solved this problem I would really appreciate how you did it! Thanks :)

Is there any reason you are converting to js rather than just loading in the .obj file with the OBJLoader class? Is there any reason you are using MeshFaceMaterial rather than something like MeshPhongMaterial? — 2pha
What material types are in your materials array? Needs to be Phong. — WestLangley
Hi @2pha: OBJLoader class doesn't load textures, have tried using the OBJMTLLoader and then I lose bump and specular maps AND the models won't cast shadows If I replace MeshFaceMaterial with MeshPhongMaterial then the textures don't appear at all (it's just all white). — bbeckford
Hi @WestLangley, the loaded materials array is full of materials of the MeshLambertMaterial type, but they are set to Phong when I export from 3DS Max — bbeckford

bbeckford bbeckford · Accepted Answer · 2014-04-16T10:18:38

I ended up manually editing the .js model and adding in fields to make it look like the following:

"materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "21___Default",
    "colorAmbient" : [0.588235, 0.588235, 0.588235],
    "colorDiffuse" : [0.588235, 0.588235, 0.588235],
    "colorSpecular" : [0.117, 0.117, 0.117],
    "illumination" : 2,
    "mapAmbient" : "texture_8.jpg",
    "mapDiffuse" : "texture_8.jpg",
    "shading" : "phong",
    "mapSpecular" : "texture_8_specular.png",
    "shininess" : 1000,
    "mapBumpScale" : 5,
    "mapBump" : "texture_8_bump.jpg",
    "opticalDensity" : 1.5,
    "specularCoef" : 1000,
    "transparency" : 0.0
}

Three.js Loaded Model Missing Bump and Specular Maps

1 Answers