Help in making model realistic

I am working on learning how to make an exported 3D model appear as realistic as possible. I am rendering a GLTF model from sketchfab and trying to get it to render as close as possible to its appearance on sketchfab. Currently, the model appears dull to me and i think it has to do with the lights used .

Also when i spin the model,the logo on the back appears hazy.

I would appreciate any help in understanding what i could do to make this model resemble this sketchfab version https://sketchfab.com/3d-models/surface-book-3-88f28c608c3d408f98411ff3bd8b5974

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 
  1000 
   );

  camera.position.x = -300;

  camera.position.z = 500;

  camera.position.y = 200;

  var renderer = new THREE.WebGLRenderer({antialias:true});

   renderer.setSize( window.innerWidth, window.innerHeight );

 renderer.setClearColor(0x2E2E2E);

 document.body.appendChild( renderer.domElement );

window.addEventListener('resize', ()=>{

renderer.setSize( window.innerWidth, window.innerHeight );

camera.aspect = window.innerWidth/window.innerHeight;

camera.updateProjectionMatrix();

})

 var controls = new THREE.OrbitControls(camera, renderer.domElement);

 controls.enableDamping = true;

 controls.dampingFactor = 0.25;

 controls.enableZoom = true;

 var ambient = new THREE.AmbientLight(0xffffff, 1.0);

 scene.add(ambient);


 var hemilights = new THREE.HemisphereLight(

 0xb1becc, 

 0xffffff,

 3,

);

 scene.add(hemilights);

 var loader = new THREE.GLTFLoader();

 loader.load('/examples/3d-obj-loader/assets/Surface/scene.gltf', function ( gltf ) {

  var model = gltf.scene

  scene.add( model );

   model.position.y -= 60;



  }, undefined, function ( error ) {

    console.error( error );

  } );

  var animate = function () {

  requestAnimationFrame( animate );

  controls.update();

  renderer.render(scene, camera);

  };

  animate();

Have a look at the lighting setup in https://threejs.org/examples/?q=gltf#webgl_loader_gltf — especially for metallic models, using an environment map (material.envMap or scene.environment) is essential. This provides the reflections you see, and more interesting details in the lighting than ambient or hemisphere lights.

Thanks for getting back to me ! I tried using RGBELoader and keep getting an error ‘RGBELoader not defined’ in the JS Console. My understanding is – I am not picking the right RGBELoader.js file ?

I have added this script tag in my index.html
https://rawcdn.githack.com/mrdoob/three.js/r99/examples/js/loaders/RGBELoader.js

As i am using r99 version of three.js

I even tried copying the file locally but i still run into the same error. Am i picking the RGBELoader.js from the right place ?

Here’s the same demo, back in r99: https://github.com/mrdoob/three.js/blob/1cbcaab0b8c80cd66b5812881597529f9ebd19c0/examples/webgl_loader_gltf.html

The new version looks more realistic, so if you’re able to update three.js to a more recent version it might be worth it, but the older version would improve your screenshot a lot too.

I tried using the demo you shared and it definitely helped improve the model but i now have a background . Is it possible to keep the lighting and have a plain background. Attaching the picture as a reference.

Sure, just get rid of the line that says scene.background = background; to hide that. :slight_smile:

Thank you ! That worked. I can see a blue tinge on the model – My understanding of this is due to the light reflected from the background image used. Would i need a different image to get a silver tinge or would manipulating the hemisphere light work ?