DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create Floating Hearts 3D model in Three.JS and React Three Fiber
Duc Le
Duc Le

Posted on

Create Floating Hearts 3D model in Three.JS and React Three Fiber

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
Enter fullscreen mode Exit fullscreen mode

Build the canvas

The Canvas object is where you start to define your React Three Fiber Scene.

Image description

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

Image description

Create the Hearts

First, we have to create the heart shape:

Image description

Then multiply it with different factors and speed:

Image description

Because we want our hearts to float, we are going to set their position with useFrame

Image description

Finally, we will cast the hearts with Instances and put it to the Canvas above

Image description

Lastly, we need some effects

Image description

Conclusion

The results:

Image description

Live demo: https://threejs-floating-hearts.vercel.app/

Source code: https://github.com/leduc1901/threejs-floating-hearts

Top comments (6)

Collapse
 
maxdevjs profile image
maxdevjs

Visually appealing postπŸ˜€

P.S.: Live demo returns 404

Collapse
 
leduc1901 profile image
Duc Le

Sorry for wrong link, can you try again ? I just edited

Collapse
 
maxdevjs profile image
maxdevjs

πŸ™ˆ for the late reply! Indeed, it is working now :)
Can I ask which OS do you use and how Three.JS runs on it?

Thread Thread
 
leduc1901 profile image
Duc Le

I'm using MacOS and Windows, both run pretty good

Thread Thread
 
maxdevjs profile image
maxdevjs

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 πŸ€”

Collapse
 
lovepreetsingh profile image
Lovepreet Singh

Very Informative and Helpful

πŸ‘‰ Checkout my Blog too at dev.to/lovepreetsingh/what-is-dock...

πŸ“ And please provide any improvements

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket