Add model.obj to three.MESH

Question

I am new to three.js and I am making an augmented reality app on web to show plates of food. So far I have managed to show a cube. The problem raised when I tried to show a model.obj instead of geomerty and material in mesh. Can anyone please help me on how to put a model.obj in THREE.MESH since I cannot do it. Below is my code.

 function createContainer() {
    var model = new THREE.Object3D();
    model.matrixAutoUpdate = false;
    return model;
}

function createMarkerMesh(color) {
       manager = new THREE.LoadingManager();
     manager.onProgress = function (item, loaded, total) {

        console.log(item, loaded, total);

    };
     var texture = new THREE.Texture();
     var loader = new THREE.ImageLoader(manager);
     loader.load(texturePath, function (image) {

      texture.image = image;
      texture.needsUpdate = true;
      texture.transparent = true;

    });

    var loader = new THREE.OBJLoader(manager);
    return loader.load(objectPath, function (object) {

        object.traverse(function (child) {

            if (child instanceof THREE.Mesh) {

                child.material.map = texture;
                child.material.transparent = true;

            }

        });
        object.position.z = -50; 

        return object;
    });

   // var geometry = new THREE.CubeGeometry( 100,100,100 );
   //var material = new THREE.MeshPhongMaterial( {color:color, side:THREE.DoubleSide } );
    var mesh = new THREE.Mesh( object.geometry, object.material);                      
    mesh.position.z = -50;

   return mesh;
}



function createMarkerObject(params) {
 //return   createMarkerMesh(params.color);
 var modelContainer = createContainer();
 var modelMesh = createMarkerMesh(params.color);
 console.log(modelMesh);
 modelContainer.add( modelMesh);

    function transform(matrix) {
        modelContainer.transformFromArray( matrix );
    }

    return {
        transform: transform,
        model: modelContainer
    }
  return {
    createMarkerObject:createMarkerObject
}

}

The code in function Create MArker MEsh is were the cube was created and worked fine now I have commented those parts and tried to show the object but nothing is happening please help me.

Answer 1

try this change in your code... let me know if any problem raise..

function createMarkerMesh(color) {
   manager = new THREE.LoadingManager();
   manager.onProgress = function (item, loaded, total) {
   console.log(item, loaded, total);
 };
 var texture = new THREE.Texture();
 var loader = new THREE.ImageLoader(manager);
 loader.load(texturePath, function (image) {

  texture.image = image;
  texture.needsUpdate = true;
  texture.transparent = true;

});
var tmpMesh;
var loader = new THREE.OBJLoader(manager);
loader.load(objectPath, function (object) {
var group = new THREE.Object3D()
object.traverse(function (child) {
    if (child instanceof THREE.Mesh) {
        child.material.map = texture;
    child.material.transparent = true;
        //here in child the geometry and material are available
        var mesh = new THREE.Mesh( child.geometry, child.material);
        //mesh.position.z = -50;
        group.add(mesh);
    }
});
group.position.z = -50;
scene.add(group);//return group;
});
}

Answer 2

Finally I have found an answer for this problem and here I am going to explain what the problem was with the above code. Hope that this will help.

The problem was that the createMarkerObject was being called before the mesh was created so the object3D container was being filled with an empty mesh. To arrange this I have declared the modelContainer as a global variable and inserted it in the createMarkerMesh function. In the createMarkerObject I have made an if condition so that it checks if the modelContainer is full before adding it to the object3D container. Below is the updated code.

//Loads the model and texture and creates a mesh returns mesh with model
   function createMarkerMesh() {
       manager = new THREE.LoadingManager();
       manager.onProgress = function (item, loaded, total) {
       console.log(item, loaded, total);
    };
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader(manager);
    loader.load(texturePath, function (image) {

    texture.image = image;
    texture.needsUpdate = true;
    texture.transparent = true;

    });
    var tmpMesh, mesh;
    var loader = new THREE.OBJLoader(manager);
    loader.load(objectPath, function (object) {
    tmpMesh = object; //store the object in a variable
    object.traverse(function (child) {
    if (child instanceof THREE.Mesh) {
        child.material.map = texture;
    child.material.transparent = true;
    }
    });

    mesh = new THREE.Mesh( tmpMesh.children[0].geometry, tmpMesh.children[0].material);
    mesh.position.z = -10;
    mesh.scale.set( 3, 3, 0 );
    console.log(mesh);
    modelContainer.add( mesh);
    console.log(modelContainer);
    //return mesh;

      });

      } 



//Creates the position of the object on the marker
 function createMarkerObject() {
 modelContainer = createContainer();
 var modelMesh = createMarkerMesh();
 //console.log(modelMesh);
 if(modelMesh){
 modelContainer.add( modelMesh);
 }
    function transform(matrix) {
     modelContainer.transformFromArray( matrix );
                }

    return {
        transform: transform,
        model: modelContainer
    }
  return {
    createMarkerObject:createMarkerObject
}

}