Three.JS Lite – Dev Community

Every movie scene uses differential lighting depending on the story told on that scene. In some cases manufacturers want very bright light and sometimes dull. The light color can also be changed to suit the story.

This three.js for different scenes is the same even in different light. In this section we will explore this lighting system.

Note – Not all material in this blog post requires lighting, we will be using MeshStandardMaterial. We choose it because it is visible only when the light is set

const material = new THREE.MeshStandardMaterial()
material.roughness = 0.4

// Objects
const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(0.5, 32, 32),
    material
)

scene.add(sphere)
enter fullscreen mode

exit fullscreen mode

  • Ambient Light: This light has no direction and cannot show shadows. That is, light comes from everywhere. The fist parameter is the color and the other is the light intensity.
const ambientLight = new THREE.AmbientLight(0xffffff,0.5);
scene.add(ambientLight)

enter fullscreen mode

exit fullscreen mode

picture description

  • DirectionLight: It is used to set the light in different directions on the screen. It inherits from the Object3D class which gives it the ability to position itself in any angle.
const directionLight= new THREE.DirectionalLight('GREEN',0.5)
directionLight.position.set(-1,0.25,0)
 scene.add(directionLight) 

enter fullscreen mode

exit fullscreen mode

picture description

  • Hemispherical Light: Hemispherical light takes two colors. The first color is the color visible to the light, while the second color is for the part of the object that the light cannot reach.
const hemispherLight= new THREE.HemisphereLight('red','blue',0.5);
 scene.add(hemispherLight);

enter fullscreen mode

exit fullscreen mode

picture description

  • Pointlight: It works like a laser light. It indicates any direction the user has decided to point the light.
const poinLight= new THREE.PointLight(0xff900,0.5,1,10);
poinLight.position.set(1,-0.5,1);

 scene.add(poinLight);
enter fullscreen mode

exit fullscreen mode

picture description

  • RectAreaLight: Namely it casts a rectangular light on the object on which it is reflexed. The last two parameters are width and height.

const rectangularLight = new THREE.RectAreaLight(0x4e00ff,5,2,1,1);
scene.add(rectangularLight);
enter fullscreen mode

exit fullscreen mode

picture description

  • Spotlight: It works exactly like Touch Light. It can be moved around the screen in different positions.
const spotLght = new THREE.SpotLight('orange',0.5);
spotLght.position.set(0,2,3);
scene.add(spotLght);

enter fullscreen mode

exit fullscreen mode

picture description

Note: All this light can be used together, but it is not suitable for display purpose.

thanks for reading

Leave a Comment