3

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

TMAC
  • 45
  • 4
  • Do you mind sharing one of your OBJs in this thread? – Mugen87 Apr 07 '22 at 08:18
  • I get an error when I try to insert full .obj "An error occurred submitting the edit" If its not enough I can try to insert full file again. – TMAC Apr 07 '22 at 09:00
  • Screenshots of your OBJs raw data are not helpful. Consider to upload the asset to something like Google Drive and share a link. – Mugen87 Apr 07 '22 at 09:45
  • 1
    I uploaded google drive below screenshots. – TMAC Apr 07 '22 at 10:24

1 Answers1

1

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).

Mugen87
  • 28,829
  • 4
  • 27
  • 50