title: Material renders unnaturally (glossy)
body: <p>I'm trying to render an object with materials using Three.js, but it looks differently than in other online viewers like <a href="https://3dviewer.net" rel="nofollow noreferrer">https://3dviewer.net</a> (also uses Three.js under the hood)</p>
  
  <p>I tried to rise level of details (LOD) and also used NearestFilter / LinearFilter but without any effect. </p>
  
  <p>This is <a href="https://i.stack.imgur.com/1a9rU.png" rel="nofollow noreferrer">how it should look</a> (screenshot of rendered by 3dviewer object) . </p>
  
  <p>And this is <a href="https://i.stack.imgur.com/Ia9G5.png" rel="nofollow noreferrer">how it looks in my app</a></p>
  
  <p>In 3dviewer version it looks more natural, and in my it is too shiny and glossy</p>
  
  <p>Should I apply some specific filter (though did not find it in 3dviewer sources) or may be lighting?</p>
  
  <p>My current code is:</p>
  
  <pre><code>let scene = new THREE.Scene();
  scene.background = new THREE.Color( '#edeff2' );
  
  let camera = new THREE.PerspectiveCamera( 100,   window.innerWidth/window.innerHeight, 1, 1000 );
  camera.position.z = 100;
  
  let renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enableZoom = true;
  
  let keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
  keyLight.position.set(-100, 0, 100);
  
  let fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
  fillLight.position.set(100, 0, 100);
  
  let backLight = new THREE.DirectionalLight(0xffffff, 1.0);
  backLight.position.set(100, 0, -100).normalize();
  
  scene.add(keyLight);
  scene.add(fillLight);
  scene.add(backLight);
  
  let mtlLoader = new THREE.MTLLoader();
  mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');
  mtlLoader.setPath('/examples/3d-obj-loader/assets/');
  mtlLoader.load('b.mtl', function (materials) {
  
  materials.preload();
  
  let objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('/examples/3d-obj-loader/assets/');
  objLoader.load('b.obj', function (object) {
  
      scene.add(object);
      object.position.y -= 100;
  
      object.scale.x = 0.01;
      object.scale.y = 0.01;
      object.scale.z = 0.01;
  
      let boundingBox = new THREE.Box3().setFromObject(object)
      let size = boundingBox.getSize()
  });
  });
  
  var animate = function () {
      requestAnimationFrame( animate );
      controls.update();
      renderer.render(scene, camera);
  };
  
  animate();
  </code></pre>
  
  <p>Link to object, materials + textures - <a href="https://www.dropbox.com/s/wtyqtqz2eopp9ld/three.zip?dl=0" rel="nofollow noreferrer">dropbox</a></p>