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, Mar 04 '14 at 15:50
What material types are in your `materials` array? Needs to be `Phong`. — WestLangley, Mar 04 '14 at 16:55
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, Mar 04 '14 at 17:05
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, Mar 04 '14 at 17:09
Use the debugger in your pipeline to find out why the materials array is Lambert and not Phong. Lambert does not support bump maps or specular highlights. It must be an array of Phong. +1 for the model, btw. — WestLangley, Mar 04 '14 at 18:50
@WestLangley Thanks I'll take a look in the morning. Hah glad you like! — bbeckford, Mar 04 '14 at 20:06
In my last threejs project I loaded objects with OBJLoader and loaded textures and created a material separately. The project can be seen at: http://www.tjm.com.au/build-your-own-tjm-4wd — 2pha, Mar 05 '14 at 01:32
@2pha thanks but creating a material separately is not an efficient way to work when you have very complex models with a lot of textures — bbeckford, Mar 07 '14 at 09:58

score 2 · Accepted Answer · answered Apr 16 '14 at 10:18

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 Answers1