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 and then like this
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).