Using mtl-obj loader 3dModel is not looking same in terms of texture and material as it is looking in microsoft 3Dviewer

it is not looking same in terms of texture and material as it is looking in microsoft 3Dviewer

threejsImg
Image model image i am getting through three js loader


image from microsoft3Dviewer

Why it is different since mtl-obj file is same for both. what changes shall i make? pls suggest

hi i have added the images.

@Thunder_Bird please also share all the code you are using to load the model in three.js.

3DViewer is setting up default lighting and environment mapping. Unless you can set up exactly the same as they do, it’s going to look different.

2 Likes
three.js webgl - OBJLoader + MTLLoader
<body>
	<div id="info">
	<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader + MTLLoader
	</div>

	<script type="module">
		import * as THREE from '../build/three.module.js';
		import { MTLLoader } from './jsm/loaders/MTLLoader.js';
		import { OBJLoader } from './jsm/loaders/OBJLoader.js';
		var container;
		var camera, scene, renderer;
		var mouseX = 0, mouseY = 0;
		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;
		init();
		animate();
		function init() {
			container = document.createElement( 'div' );
			document.body.appendChild( container );
			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
			camera.position.z = 250;
			// scene
			scene = new THREE.Scene();
			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
			scene.add( ambientLight );
			var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
			camera.add( pointLight );
			scene.add( camera );
			// model
			var onProgress = function ( xhr ) {
				if ( xhr.lengthComputable ) {
					var percentComplete = xhr.loaded / xhr.total * 100;
					console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
				}
			};
			var onError = function () { };
			var mtl= new MTLLoader();
                            var objl= new OBJLoader();
                mtl
                .setMaterialOptions({side: THREE.DoubleSide})
				.load('model.mtl' ,  ( materials ) =>{
                    materials.preload();
					objl
						.setMaterials( materials )
						.load( 'model.obj',  ( object )=> {
                            object.scale.x = 1;
                            object.scale.y = 1;
                            object.scale.z = 1; 
                            object.position.set(0,-125,0);
                            object.rotateY(55);
                            scene.add( object );
                        
						},onProgress, onError);
                } );
           
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );
			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
			//
			window.addEventListener( 'resize', onWindowResize, false );
		}
		function onWindowResize() {
			windowHalfX = window.innerWidth / 2;
			windowHalfY = window.innerHeight / 2;
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
		}
		function onDocumentMouseMove( event ) {
			mouseX = ( event.clientX - windowHalfX ) / 2;
			mouseY = ( event.clientY - windowHalfY ) / 2;
		}
		//
		function animate() {
			requestAnimationFrame( animate );
			render();
		}
		function render() {
			camera.position.x += ( mouseX - camera.position.x ) * .05;
			camera.position.y += ( - mouseY - camera.position.y ) * .05;
			camera.lookAt( scene.position );
			renderer.render( scene, camera );
		}
	</script>

</body>

Can you please also share model.mtl, model.obj and all related textures?