DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Three.js Light
es404020
es404020

Posted on

Three.js Light

In every movie scene difference light are used based on the story been told on that scene.In some cases the producer might want a very bright light and other times dull ones.The light color can also be change to suit the story been told.

This is also similar in three.js different light for different scene.In this section we would be exploring this lighting .

Note - Not all material requires light in this blog post we would be using the MeshStandardMaterial.We pick this because it show only when 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

Image description

  • AmbientLight :This light doesn't have a direction and can't show shadow.Meaning the light comes from everywhere .Fist parameters is the color and second is the light intensity .
const ambientLight = new THREE.AmbientLight(0xffffff,0.5);
scene.add(ambientLight)

Enter fullscreen mode Exit fullscreen mode

Image description

  • DirectionLight: This is use to set light in various direction 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

Image description

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

Enter fullscreen mode Exit fullscreen mode

Image description

  • PointLight:This work just like lazer light .It simply point to any direction the user decided to point the light to.
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

Image description

  • RectAreaLight: From the name it gives a rectangular lighting on the object it reflex on .The last two parameter are the width and height .

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

Image description

  • SpotLight: This works exactly like a touch light .It can be moved around a screen in different position .
const spotLght = new THREE.SpotLight('orange',0.5);
spotLght.position.set(0,2,3);
scene.add(spotLght);

Enter fullscreen mode Exit fullscreen mode

Image description

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

Thanks for reading

Top comments (0)

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.