Search code examples
three.jsblenderwavefront

Normal map in *.obj file


In blender i create a normal map, i will export to blender like OBJ (Wawefront) and there is stored in *.mtl file like "map_Bump".

map_Bump have always the same bumpsacale. What parramter in MTL file defines bumpscale in THREE.JS?

my MTL file:

newmtl ship_white
Ns 0.000000
Ka 0.000000 0.000000 0.000000
Kd 0.656604 0.656604 0.656604
Ks 0.433962 0.433962 0.433962
Ni 1.000000
d 1.000000
illum 2
map_Kd 2t3l.png
map_Bump 2t3l_normal.jpg

Solution

  • Currently this is not supported. However you can remove the bump map from the file and map it manually in Three.js.

    Loading the texture.

    var bmap = THREE.ImageUtils.loadTexture('bumpmap.jpg');
    

    You will need to traverse your model and find it's material. e.g.

        object.traverse( function( node ) {
            if ( node instanceof THREE.Mesh ) {
                // for smoothing
                node.geometry.computeVertexNormals();
                console.log(node);
            }
            if (node instanceof THREE.Mesh && node.material instanceof THREE.MeshPhongMaterial ) {
                // console.log(node);
                geometry = node.geometry;
                material = node.material;
            }
        });
    

    Then either assign directly on the material you need. Or create a new Three JS mesh and assign it there. Be warned though if the OBJ contains multiple meshes you will need to find the 'right' one.

    mesh = new THREE.Mesh( geometry, material);
    material.bumpMap = bmap;
    material.bumpScale = 1;