What is Three.JS?
Three.JS is a cross-browser JavaScript library and API used to create and display animated 3D graphics in Web browsers.
Three.JS allows the creation of GPU-accelerated 3D animations using the JavaScript language without relying on plugins
What is React Three Fiber?
react-three-fiber is a React renderer for Three.JS that has no additional overhead. Components participate in a unified render loop outside of React. It outperforms Three.JS at scale due to React’s scheduling abilities.
Set up
There are a lot of dependencies for this:
yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing
Build the canvas
The Canvas object is where you start to define your React Three Fiber Scene.
In the code above, I just created a canvas with has configured camera and shadows
Lights and Shadows
Inside the canvas, we need the lights and the shadows, so our models will have their shadows, and look bright
Create the Hearts
First, we have to create the heart shape:
Then multiply it with different factors and speed:
Because we want our hearts to float, we are going to set their position with useFrame
Finally, we will cast the hearts with Instances and put it to the Canvas above
Lastly, we need some effects
Conclusion
The results:
Live demo: https://threejs-floating-hearts.vercel.app/
Source code: https://github.com/leduc1901/threejs-floating-hearts
Top comments (6)
Visually appealing post😀
P.S.: Live demo returns 404
Sorry for wrong link, can you try again ? I just edited
🙈 for the late reply! Indeed, it is working now :)
Can I ask which OS do you use and how Three.JS runs on it?
I'm using MacOS and Windows, both run pretty good
I suspected it... on Linux every intensive graphic content is a painful experience with Chrome and Firefox (!). Surprisingly, with Opera, Brave, and Vivaldi it is way better 🤔
Very Informative and Helpful
👉 Checkout my Blog too at dev.to/lovepreetsingh/what-is-dock...
📍 And please provide any improvements