Help in making model realistic

Questions
, ,
1

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 .

My_model
My_model2472×1409 458 KB

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();
2

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.

3

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 ?

4

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.

5

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.

New_Model
New_Model2493×1451 704 KB

6

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

7

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 ?