Three.js Light
Tags: webdev, beginners, programming, threejs
Published: 2022-11-07 01:19:51

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)
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yjrhes19ptx8gadpwze.png)

- 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)

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a5qr87dwzxkenpty4nx.png)

- 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) 

```



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxlcgr81zkuif4cvxoez.png)


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

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2mll08d1zicb0xfh7i9.png)

- 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);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uyyqp9v4a7exirib5ry.png)

- 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);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q63bzbz2y7866pndbh7e.png)

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

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arjjmo4xjivtm0uowbm4.png)


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

Thanks for reading