THREE.js OBJMTLLoader - Request for simple example files

Question

As detailed in a previous question I have learned how to use THREE.js OBJMTLLoader by using the same objects & materials used in the official example.

That example uses a (for me) complex model with the DDSLoader.

I would like to load simpler OBJ+MTL models and have been trying with several free models obtained from the web. I have managed to load the OBJ files OK (by applying further THREE.js code such as defining normals) but there is a problem loading material textures from the MTL files.

Here is a simple example of my code.

//...DolphinB
var posX = -3445; var posY = 750; var posZ = -100; 
var common_scale = 100;

var loader = new THREE.OBJMTLLoader();
loader.load(
   'TRI_VP_files/models/dolphin/DOLPHIN_B.obj', 
   'TRI_VP_files/models/dolphin/DOLPHIN_B.mtl', 
    function(object) 
    {
    object.position.set( posX, posY, posZ );
    scene222.add( object );
    object.scale.set(common_scale, common_scale, common_scale);
     } );

Here is the MTL code

# Wavefront material library
# Tue Aug 03 07:47:56 1999
# Created with Viewpoint Interchange www.viewpoint.com

newmtl dl_body
  Ka 0 0 0
  Kd 0 0.8 0.9
  Ks 0 0 0
  illum 1
  map_Kd DOLPHIN2.JPG

My Question

Please could someone point me to some simple OBJ + MTL files which are known to load OK with OBJMTLLoader.

steveOw steveOw · Accepted Answer · 2015-10-01T16:45:55

You can use the following free-for-private-use fileset hand created by Mohammad Alizadeh (nice work thankyou Mohammad).

It uses a single .JPG image file as source for the material texture.

It uses a single material.

Here is the .MTL file contents...

# Blender MTL File: 'Hand.blend'
# Material Count: 1    
newmtl defaultMat
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd hand_mapNew.jpg

You will need to change the top few lines of the .OBJ file from...

# Blender v2.74 (sub 0) OBJ File: 'Hand.blend'
# www.blender.org
mtllib Hand.mtl
o ZBrushPolyMesh3D
v 0.614360 0.281365 -0.675872
v 0.684894 0.445729 -0.634615

to

# Blender v2.74 (sub 0) OBJ File: 'Hand.blend'
# www.blender.org
## mtllib Hand.mtl    <===== commented out
usemtl defaultMat ##  <===== added usemtl command,note proper name of material
## o ZBrushPolyMesh3D <===== commented out
v 0.614360 0.281365 -0.675872
v 0.684894 0.445729 -0.634615

Note that many free 3D object filesets use .TIF image files. But .TIF's cannot display in browsers (or THREE.js). Converting them to .JPG format is possible but the UV mapping is not preserved.

Also note that some free 3D object filesets need to be edited so that the material names in the .OBJ file match the names given in the .MTL file.

Also note that some .OBJ files (like the hand example above) need to be editted so that the material is indicated by a usemtl command e.g.:-

usemtl defaultMat

Child processing

For the Hand fileset there are vertex normals (vn) in the .OBJ file. But for some reason smoothing is not applied. Applying the following code will produce smoothing (and adjust shininess and set rootObject references for object picking):-

object.traverse (  function (child)
{
    if (child instanceof THREE.Mesh) 
    {           
        child.material.shininess = 10;//range 0.1 to 30 (default) to 1000 or more, applies to Phong materials.    
        //child.userData.rootObject = object; //... see West Langley answer at http://stackoverflow.com/questions/22228203/picking-object3d-loaded-via-objmtlloader
        //... used for object picking so that, for further operations, we can select picked child object or child's rootObject.
        child.rootObject = object; //... avoids infinite loop if cloning 3D objects.    
        child.geometry.computeFaceNormals(); 
        child.geometry.computeVertexNormals();   
        //child.geometry.normalsNeedUpdate = true; //... only required if object has already been rendered.
    }
}; )

DISCLAIMER

These tricks got things working for me with this particular scenario. I don't say that this is the best way of doing things.

THREE.js OBJMTLLoader - Request for simple example files

1 Answers