ThreeJS OBJLoader + MTLLoader - Model appearing black

Question

I am having some troubles loading colors onto one of my models. I am using an OBJloader and an MTLloader. The .obj and .mtl files are generated from an export from blender (there is no texture which uses .png/.tga file). MTL files loads perfectly onto other models, but for some reason this model only appears black.

Here is the MTLLoader I am using: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js

Here is the .mtl file that does not work:

newmtl Material_1
Ns -1.960784
Ka 0.000000 0.000000 0.000000
Kd 0.000000 0.000000 0.000000
Ks 0.194444 0.194444 0.194444
Ke 0.000000 0.000000 0.000000
Ni 0.000000
d 1.000000
illum 2

newmtl Material_2
Ns -1.960784
Ka 0.000000 0.000000 0.000000
Kd 0.000000 0.000000 0.000000
Ks 0.986111 0.986111 0.986111
Ke 0.000000 0.000000 0.000000
Ni 0.000000
d 1.000000
illum 2

newmtl Material_3
Ns -1.960784
Ka 0.000000 0.000000 0.000000
Kd 0.000000 0.000000 0.000000
Ks 0.187500 0.187500 0.187500
Ke 0.000000 0.000000 0.000000
Ni 0.000000
d 1.000000
illum 2

newmtl Material_4
Ns -1.960784
Ka 0.000000 0.000000 0.000000
Kd 0.000000 0.000000 0.000000
Ks 0.263889 0.263889 0.263889
Ke 0.000000 0.000000 0.000000
Ni 0.000000
d 1.000000
illum 2

Here is an example of a .mtl file that works perfectly:

newmtl car_body
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.693878 0.084748 0.084748
Ks 0.108100 0.108100 0.108100
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl car_body_1
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 1.000000 1.000000 1.000000
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl engine_grille
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.000000 0.005952 0.051020
Ks 0.117000 0.117000 0.117000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl glass
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.282521 0.704611 0.948980
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl headlight
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.847328 0.944020 1.000000
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl rear_lights
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.847328 0.944020 1.000000
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

newmtl wheels
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.142857 0.142857 0.142857
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni -1.000000
d 1.000000
illum 2

Here is the JavaScript:

var bird = new THREE.Object3D();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( 'bird.mtl', function( materials )
{
   var objLoader = new THREE.OBJLoader();
   objLoader.setMaterials( materials );
   objLoader.load( 'bird.obj', function ( object )
   {
      bird.add( object );
   });
});
scene.add( bird );

Anyone got any idea why the upper .mtl file does not load properly, and only appears black?

Joakim

The MTL file is, in fact, black. The line `Kd 0.000000 0.000000 0.000000` means a diffuse color of `#000000`. Perhaps there's something about how your material is set up in Blender that isn't right? — Don McCurdy, Jun 02 '18 at 21:38
@DonMcCurdy Thank you, you are right. Probably. I don't know much about Blender, I just downloaded a free Blender model. Changing the Kd value into the RGB color of my wish is simple, but some of the color looks very buggy. Do you have any explanation of what all the other numbers does? (Ns, Ka, Ks, Ke, Ni, d) — JoakimNyland, Jun 03 '18 at 21:55
Apparently, it looks like my model is made in "cycles" engine and not "blender" engine, showing model in Blender engine and it is all black… Anyone got any experience with Blender? Is it possible to change from cycles engine to blender engine and keep all texture? — JoakimNyland, Jun 03 '18 at 22:05
The other `K` values are ambient, specular, and emissive. I don’t know about the rest, but diffuse is the important one here. It’s possible to change from Cycles, but requires disabling “Use nodes” on each material and adding the textures again. If you can’t get that to work there is a Blender stack exchange that may be more helpful. :) — Don McCurdy, Jun 03 '18 at 23:37
Why is Ns negative? take a look at the Wikipedia entry for this file format. https://en.wikipedia.org/wiki/Wavefront_.obj_file — Ron Jensen, Jun 04 '18 at 02:44

ThreeJS OBJLoader + MTLLoader - Model appearing black

0 Answers0