- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Using pointer light for better lighting in React JS with React-Three-Fiber
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.