- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
Creating a Sky shader in React using React-Three-Fiber
In this article, we will see how to create a Sky shader in React JS using React-Three-Fiber. It will appear to look like original sky and it is really a great effect. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL
Example
First install the following packages −
npm i --save @react-three/fiber npm i --save @react-three/drei
react-three/fiber will be used as an intermediate between threejs and React.js and drei will be used to implement premade optimizable sky effect in it.
Now, insert the following piece of code in App.js −
import React from "react"; import { Canvas } from "react-three-fiber"; import { Sky } from "@react-three/drei"; export default function App(props) { return ( <Canvas> <Sky distance={450000} sunPosition={[5, 1, 8]} inclination={0} azimuth={0.25} {...props} /> </Canvas> ); }
Explanation
Here we simply created a Canvas inside which we created the <Sky> object which takes different argument for different effects.
It is very simple, try to tweak its arguments, sunposition, distance, inclination, etc., to see different types of effects. On changing the arguments, you will see different effects.
Output
It will produce the following output −
- Related Articles
- Creating a Plane in React using React-Three-Fiber
- Creating a 3D donut-like structure in React using react-three-fiber
- Creating a 3D Metal Texture Box in React using React-Three-Fiber
- Creating 3D Text using React-three-fiber
- Creating 3D Globe using React-three-fiber
- Making a wobbling cube in React using react-three-fiber
- Making an axes helper in React using react-three-fiber
- How to make a 3D cube in React using react-three-fiber
- Using pointer light for better lighting in React JS with React-Three-Fiber
- Creating a parallax scrolling effect in React using react-spring.mp4
- Adding OrbitControls in React using reactthree-fiber
- How to make a ring in React using reactthree-fiber
- How to make a cylinder in React using reactthree-fiber
- Creating a Particle Animation in React JS
- Creating a Customizable Modal in React JS
