OBJ Loads, MTL is always shiny and dark when Texture is mapped

Questions
, , , ,
3

I took your files and loaded them in my test app:

I had to scale the model down a bunch and add an ambient light to get it visible.

I also had to specify the path to my “assets” directory for the OBJ/MTL loaders.

Here’s the code i ended up with:



import {MTLLoader} from "three/addons/loaders/MTLLoader.js"
import {OBJLoader} from "three/addons/loaders/OBJLoader.js"
new MTLLoader()
    .setPath("./assets/")
	.load( 'small.mtl', function ( materials ) {
		materials.preload();
		new OBJLoader()
            .setPath("./assets/")
			.setMaterials( materials )
			.load( 'small.obj', function ( object ) {
				scene.add( object );
                object.scale.multiplyScalar(.01)
                let box = new THREE.Box3().setFromObject(object)
                let center = box.getCenter(new THREE.Vector3())
                object.position.sub(center)
			});
	} );

scene.add(new THREE.AmbientLight());

image
image1920×1080 62.8 KB

The model itself is a bit jittery when rendered, I think because the units in the file are very large.
You may want to scale the geometry itself down if possible into a more manageably range, if you see the vertices jumping around when rendering.

Edit: I added some code to re-center the mesh around it’s center of mass, and rescale it down to size 1, so that it doesn’t jitter.

new MTLLoader()
    .setPath("./assets/")
	.load( 'small.mtl', function ( materials ) {
		materials.preload();
		new OBJLoader()
            .setPath("./assets/")
			.setMaterials( materials )
			.load( 'small.obj', function ( object ) {
				scene.add( object );
                object.position.set(0,0,0)
                object.scale.set(1,1,1);
                let mesh = object.children[0]; //Grab the mesh (since we know it's child 0
                let box = new THREE.Box3().setFromObject(object)
                let center = box.getCenter(new THREE.Vector3())
                mesh.geometry.translate(-center.x,-center.y,-center.z); //Center the object by subtracting the center point from its vertices
                let size = box.getSize(new THREE.Vector3())
                let maxSz = Math.max(size.x,Math.max(size.y,size.z));
                let rescale = 1/maxSz;
//Compute the scaling factor to scale the model down to size 1 on its max axis
                mesh.geometry.scale(rescale,rescale,rescale);

                mesh.geometry.rotateX(Math.PI*-.5);//Rotate it to Y=up

//Now scale the parent object up so that it's in a nice visual range (100)
                object.scale.multiplyScalar(100.)
			});
	} );

Now it renders nice and jitter free:

image
image1920×1080 102 KB

(To be clear… the scaling issue is due to your 3d scan being in what looks like to be a 64 bit coordinate system, (global coordinate system?) so the units are very large, and lose accuracy when converted/rendered with 32 bit floats in WebGL, thus the need to rescale/recenter the model around the origin.)

1 Like