Three.js - Import a 3d object with textures

Graver picture Graver · Feb 10, 2013 · Viewed 8.2k times · Source

I have a .obj file exported from 3ds max and a .mtl file with the materials. I want to render this object with three.js but it seems it doesn't load the textures. Here is my javascript code

var texture = THREE.ImageUtils.loadTexture( 'items/m16/m16.jpg' );


var loader = new THREE.OBJLoader();
loader.load( "items/m16/m16.obj", function ( object ) {

for ( var i = 0, l = object.children.length; i < l; i ++ ) {

     object.children[ i ].material.map = texture;

}

//  object.position.y = -100;

scene.add( object );

} );

Here is the context of .mtl file

newmtl Material__25
Ns 10.0000
Ni 1.5000
d 1.0000
Tr 0.0000
Tf 1.0000 1.0000 1.0000 
illum 2
Ka 0.5880 0.5880 0.5880
Kd 0.5880 0.5880 0.5880
Ks 0.0000 0.0000 0.0000
Ke 0.0000 0.0000 0.0000
map_Ka m16.jpg
map_Kd m16.jpg

I can't see where i am wrong.

Answer

gaitat picture gaitat · Feb 10, 2013

Since you have an .mtl file you should be using the OBJMTLLoader instead. That way all the code you posted will become:

var loader = new THREE.OBJMTLLoader();
loader.load( "items/m16/m16.obj", function ( object ) { scene.add( object ); } );