Help with Lighting Controls

Questions
1

Hi ! I am just starting out on using Three.js , i have been working on importing a 3D .OBJ model and rendering it using the Chrome browser. I have managed to successfully import the 3D model and render it but i have having issues with its appearance. I am trying to render the model exactly how i found it on Free3D.com but my model appears grey whereas the original model is white. In addition, parts of the model appear white whereas in the original model on the website appears black(not sure if there is an an issue with the downloaded model) or some parts are hazy and appear true to form when i zoom in. My understanding is that i am messing up with the Lighting Controls, i would like to understand how do i manipulate the lights for each model ? How does one decide which light is appropriate and its position?

Please find below , the code i have been working with

 var scene = new THREE.Scene();

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

camera.position.y = 300;

camera.position.z = -2;

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

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

renderer.setClearColor('white');

document.body.appendChild( renderer.domElement );

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

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

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

camera.updateProjectMatrix();

})

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

 controls.enableDamping = true;

 controls.dampingFactor = 0.25;

 controls.enableZoom = true;


 var ambient = new THREE.AmbientLight(0x404040, 2.0);

  scene.add(ambient);

  var keyLight = new THREE.DirectionalLight('0x404040', 1.0);

  keyLight.position.set(-100, 0, 100);

  keyLight.castShadow= true;

  var fillLight = new THREE.DirectionalLight('0x404040', 1.0);

  fillLight.position.set(100, 0, 100);

  var backLight = new THREE.DirectionalLight(0x404040, 1.0);

  backLight.position.set(100, 0, -100).normalize();

   scene.add(keyLight);

   scene.add(fillLight);

    scene.add(backLight);

    var mtlLoader = new THREE.MTLLoader();

    mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');

    mtlLoader.setPath('/examples/3d-obj-loader/assets/');

    mtlLoader.load('Controller.mtl', function (materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();

    objLoader.setMaterials(materials);

     objLoader.setPath('/examples/3d-obj-loader/assets/');

    objLoader.load('Controller.obj', function (object) {

     scene.add(object);
     object.position.y -= 1;

   });

});

var animate = function () {

requestAnimationFrame( animate );

controls.update();

renderer.render(scene, camera);

} ;

animate();

The model i am tried exporting is https://free3d.com/3d-model/xbox-one-controller-295065.html
Would i get better results if i used .glTF models ?

2

There is not right or wrong approach since putting lights into a scene is always an artistic choice. However, there are a few things to keep in mind:

  • The screenshot on Free3D.com probably was produced with a different rendering engine than three.js. Since material and lighting implementations usually vary from engine to engine, it’s often hard to replicate exact visual results.
  • It seems there are two issue in your code: Adding an ambient light with an intensity value of 2 is normally way too high. Try it with a value smaller value like 0.4. Besides, '0x404040' is no valid argument for colors since it’s a wrong string representation. It should be '#404040' or just 0x404040 (a number).
  • And yes, if you have the possibility always use glTF instead of OBJ.
3

Thank you Mugen87 ! I also see some parts of the imported 3D model not rendering correctly (that is slightly hazy ) which goes away when i zoom in, into the model. Is this an issue with the model or is this because of the way i have placed the camera in my scene ?

4

It could be related to the camera settings. Do you see any difference when you increase the far plane value (to 5000)?

5

No. I didn’t see a difference on changing the value to 5000.