javascriptthree.js3d-modelobjloader

Is it possible to load .obj file with colors if I don't have .mtl?


I'm new to three.js and I came up to this problem. I made a 3D scan of my face and it gave me only .obj file. If I open that file on Meshlab model comes with color on it. But after I load it on three.js it is without texture.

            
    
            // Loader 
            
            const loader = new OBJLoader();

            loader.load( './models/scene.obj', 
            function ( OBJ ) {
            
            var boundingBox = new THREE.Box3().setFromObject( OBJ );
            boundingBox.getCenter( OBJ.position ).negate();
            
                scene.add( OBJ );
                
            },
            
            

            function ( xhr ) {

                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

            },
            

    function ( error ) {

        console.log( 'An error happened' );

    }
);

It's how my 3D model looks on three.js

also it's one-sided from the wrong side

Also tried this solution but that's not working. "An error happened" shows up without explanation

objLoader.load('assets/faceimage9.obj', function(object) {
  scene.add(object);
  object.traverse(node => {
    if (node.material) {
      node.material.vertexColors = true;
    }
  });
});

Thank you for your answers!

Edit: My .obj looks like that at first ~50000 lines My obj and then like this enter image description here


Solution

  • The OBJ asset defines vertex colors in the range [0,255] which is not supported by THREE.OBJLoader. Color data have to be defined in the normalized [0,1] range. Unfortunately the OBJ spec does not mention vertex colors so applications do not consistently export such data.

    A simple fix to improve the rendering of your asset in three.js is this:

    objLoader.load('assets/faceimage9.obj', function(object) {
      scene.add(object);
      object.traverse(node => {
        if (node.material) {
          node.material.side = THREE.BackSide;
        }
      });
    });
    

    In this way, the faces should be correctly displayed (but without vertex colors).