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

Questions
,
1

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

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

3

hi i have added the images.

4

@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
5
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>
6

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

7

hi issue is solved. i have used extra lighting’s with high intensity that’s why textures where looking different.