How to multiple textures from mtlLoader and objLoader using in three.js?

Question

I have .mtl,.obj and multiple textures .jpg file. I tried to use different textures in export loader obj. I am able to make my object visible on the scene but my object black colour visible. Any idea on what is wrong/is missing in my code?

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('models/LivingRoom/Sample/');
mtlLoader.load( 'small plant.mtl', function( materials ) {
  materials.preload();

  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('models/LivingRoom/Sample/');
  objLoader.load( 'small plant.obj', function ( object ) {

      var geometry = object.children[ 0 ].geometry;
      var materials = [];
      var mat1=new THREE.MeshLambertMaterial( { map : THREE.ImageUtils.loadTexture('models/LivingRoom/Sample/Listik-2.jpg')});
      var mat2=new THREE.MeshLambertMaterial({ map : THREE.ImageUtils.loadTexture('models/LivingRoom/Sample/22_zemlya_oboi_1920x1080.jpg')});
      materials.push(mat1);
      materials.push(mat2);
      mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,materials);
      mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,threeDTexture);

      object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.materials = materials;

        }
      });

    },
    function ( xhr ) {
      returnValue = ( xhr.loaded / xhr.total * 100 ) + '% loaded';
      console.log(returnValue);
    },
    function ( error ) {
      console.log( 'An error happened' );
    }
  );
});

vishnuajan · Answer 1 · 2018-03-01T06:58:44.997

Check textures path from your .mtl file. If the path is wrong you can use 3d object Editor(like - Blender or some other 3d editor tool).

Blender imports obj files with textures just fine with Blender Internal renderer as the active renderer. But importing obj files with texture while Cycles is the active renderer is currently not supported. With Cycles you have to create a new material with your texture So first idea is to check what renderer you use while trying to import the mesh. Then there was the file format itself. The Obj file format is made of two files, not one. The *.obj file contains the mesh data. The *.mtl file contains one or more simple phong material(s) with the associated texture paths. And the good news is Obj is a super simple file format in text form. You can open the files in a text editor and edit them to your needs. When the *.mtl file is missig then there is nothing to import for Blender. No mtl file means no material and no texture available. When the *.mtl file exists, but the texture paths in the file are absolute, and the texture is at another location, then there is nothing to import for Blender since the textures are not found. So first thing to check: does the *.mtl file exist? And if that's the case and the textures doesn't import: are the texture paths in the *.mtl file relative or absolute? Open the *.mtl file in wordpad for example. Have a look at the line(s) with map_kd at the front. For example, an absolute path would be map_Kd C:\UserX\myfolder\mytextures\mytexture.png When you change it to map_Kd mytexture.png then this path becomes relative. And when you put your texture besides the obj file, then the texture gets usually loaded - when Blender Internal is the active renderer. As told, Cycles is not supported at this point.

How to export .obj format file with texture in blender?

How to multiple textures from mtlLoader and objLoader using in three.js?

1 Answers1