# Using pointer light for better lighting in React JS with React-Three-Fiber

React JSJavascript LibraryFront End Technology

In this article, we will see how to use a different type of light in react-three-fiber to make our objects look better. It will mainly act as a torch light that point toward an object. Three.js needs light to show colors, shadow effect, and many different kinds of effects.

We will make a cube and then we will add the pointer light to it.

## Example

First of all, install the following packages −

npm i --save @react-three/fiber three

threejs and react-three/fiber will be used to add webGL renderer to the website and three-fiber will be used to connect threejs and React

Now, insert the following lines of code in App.js

import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";

function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial color={"orange"} />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[0, 0, 0]} />
</Canvas>
);
}

## Explanation

The pointLight takes one argument, i.e., position. We set its "x, y, z" coordinates; it is diagonally in backward direction of the object.

We used it for creating a shadow effect over the object.

## Output

On execution, it will produce the following output −

You can notice a shadow effect on the side of the cube. The yellow color appears darker on the right and lighter on the front side. It just acts like we set a torchlight behind the cube and hence it's creating the shadow effect. You can add as many pointLight as you like.

Updated on 29-Sep-2021 08:52:22