Include the model.obj file into the three.MESH framework

Question

Include the model.obj file into the three.MESH framework

I am a beginner in three.js and I am developing an augmented reality application on the web to showcase plates of food. Currently, I have successfully displayed a cube. However, when I attempted to display a model.obj instead of using geometry and material in mesh, I encountered an issue. I am struggling to figure out how to incorporate a model.obj in THREE.MESH. Below is my code snippet.

 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 portion of code within the CreateMarkerMesh function successfully generated a cube. However, after commenting out those sections and attempting to display an object, nothing seems to be working as expected. Please assist me in resolving this issue.

javascript three.js

Answer 1

Answer №1

Give this modification a try in your script... Notify me if any issues arise.

function generateMarkerMesh(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;
        //inside child, both geometry and material are accessible
        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

Give this modification a try in your script... Notify me if any issues arise.

function generateMarkerMesh(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;
        //inside child, both geometry and material are accessible
        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 3

Answer №2

After much searching, I have finally cracked the code and figured out a solution to the problem at hand. Allow me to elucidate on what exactly was causing the issue with the code above. Hopefully, this explanation will prove useful.

The root of the problem lied in the premature invocation of createMarkerObject before the mesh had even been created. This led to the object3D container being populated with an empty mesh. To rectify this issue, I decided to declare the modelContainer as a global variable and embed it within the createMarkerMesh function. Additionally, I added an if statement inside createMarkerObject to ensure that the modelContainer is not empty before adding it to the object3D container. Below, you'll find the revised code snippet.

// Function that loads the model and texture, creates a mesh, and returns the mesh
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);
    });
} 

// Function that defines the position of the object on the marker
function createMarkerObject() {
    modelContainer = createContainer();
    var modelMesh = createMarkerMesh();

    if (modelMesh){
        modelContainer.add(modelMesh);
    }

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

    return {
        transform: transform,
        model: modelContainer
    };

    return {
        createMarkerObject: createMarkerObject
    };
}

Answer 4

After much searching, I have finally cracked the code and figured out a solution to the problem at hand. Allow me to elucidate on what exactly was causing the issue with the code above. Hopefully, this explanation will prove useful.

The root of the problem lied in the premature invocation of createMarkerObject before the mesh had even been created. This led to the object3D container being populated with an empty mesh. To rectify this issue, I decided to declare the modelContainer as a global variable and embed it within the createMarkerMesh function. Additionally, I added an if statement inside createMarkerObject to ensure that the modelContainer is not empty before adding it to the object3D container. Below, you'll find the revised code snippet.

// Function that loads the model and texture, creates a mesh, and returns the mesh
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);
    });
} 

// Function that defines the position of the object on the marker
function createMarkerObject() {
    modelContainer = createContainer();
    var modelMesh = createMarkerMesh();

    if (modelMesh){
        modelContainer.add(modelMesh);
    }

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

    return {
        transform: transform,
        model: modelContainer
    };

    return {
        createMarkerObject: createMarkerObject
    };
}

Include the model.obj file into the three.MESH framework

Answer №1

Answer №2

Similar questions

JavaScript believes that the function is not defined, despite its clear existence

Executing an external HTTP request within an ExpressJS middleware prior to rendering the response

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

The reactjs-toolbox radio button group remains unchanged

Repeatedly triggering the Jquery Dialog Event

Prevent individual elements from shifting around on browser resizing within a React form

Utilize jQuery Function on Identical Class of <ul> Elements

What is the most effective way to dynamically incorporate external input into a SlimerJS script?

Learn how to properly register the order of checkboxes in AngularJS

Leverage JavaScript to retrieve content and generate an iframe

Tips for implementing custom fonts in NextJS without relying on external services

Changing Underscores in ES6 Techniques

Error message encountered: "Node.js Object [object Object] does not support the method"

adding numerous items to an array using JavaScript

Using Javascript to select a radio button in a form depending on the value entered in a text box

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

Tips for passing a function and an object to a functional component in React

Converting a Number from Negative to Positive in JavaScript and Representing it as 32 Bit Binary

When a base html tag is dynamically added, the browser mistakenly loads assets twice

Show all column data when a row or checkbox is selected in a Material-UI datatable