in previous tutorial we talked about how to display 3d model on your website with three.js
now in this tutorial we are going to show you how to setup a light
and shadow to make your model look more realistic ready let's check it out so
first let's start with downloading a free 3d model on sketchfab you can
register a free account to download a free model
and here's the downloaded content let's put it to your web directory
now this project is going to need to import three JavaScript files first is
three.js core file the second one is orbit controls js for the camera control
and the last one is GLTFLoader for loading 3d model you can find all of
these in three.js zip file from the official site
orbitcontrol is inside the example/js/control folder
and GLTFLoader is in example/js/loaders
first I'm going to declare necessary variables scene, camera, renderer and
orbitcontrol
let's start with creating a scene and set up the background color to light gray
then set up a perspective camera with 60 degree viewing angle
using current window aspect-ratio and 5,000 units viewing frustum
then place the camera away from the origin point
also enabled orbitcontrol so we can use mouse to rotate camera
this time I'm going to also axeshelper this will add XYZ axis to the
scene for easier development
then set up the WebGL renderer using current window size
and add the scene to our page as canvas element
finally create our rendering loop function
inside we will use renderer to render the scene using our camera
and call itself recursively using requestanimationframe
and that should do for the basic scene setup
you should see AxeHelper on the page now
next I'm going to load 3d model
we will create a gltf loader and call it a load method and past the location of
the GLTF file
and provide the callback function when the loading is finish
sometimes the single GLTF file contains more than one object so we need
to select the first child and add it to our scene
I will also start the render loop after we load the model
now you will notice two things first the model is pitch black this because we
haven't setup the light yet and another one is the model position is not at the
origin point this happens sometimes and it depends on how the model was created
so first let's move the model back to the origin point
and next set up the lights I'm going to set up a hemisphere light
which is a light position directly above the scene and fading from the sky color
to the ground color this is similar to the reflection of sunlight during the
day I'm going to use a pale orange as a sky
color and gray for the crown with 4 intensity
now we can see the model but the color is too saturated and unrealistic we can
fix that by changing the color tone mapping
for this project I'm going to use a Reinhard tone mapping which has balanced HDR
you can try other tone mapping types in three.js for various result
but this will make the scene dimmer so I will also increase the exposure
next I'm going to add a spotlight this will represent the main source of the
light like the Sun
I will use the orange yellow color with 4 intensity
we'll need this light to cast shadows so our set the cast shadow property to true
then inside rendering loop I will use the camera position to update the light
position with a small offset
this is a trick to simulate the real-world dynamic light sources
now you will notice that the shadow is still invisible we'll fix that
first we'll need to iterate through all mesh in the model and set the castShadow
and receiveShadow properties to true we can do that using traverse
method and update the properties if the object is a mesh
then we will need to enable the shadow map in our renderer
the shadow is visible now but this time you will see some artifacts also the
shadow resolution is horrible again we'll fix that
first we can remove the shadow artifacts by decreasing shadow bias this will
reduce the shadow sensitivity
and next we can increase the shadow resolution by increasing the map size to
a multiplier of 1024
and next we'll increased the texture filtering quality by increasing anisotropy
property of the model texture map
looks good now I'm going to replace the background
with cubemap texture I have and remove the axeshelper and here's the final result
and that's the basic of light and shadow set up in three.js hope you guys
enjoy if you want to see more development tips and tutorials subscribe
this channel to stay tuned thanks for watching see you next time bye