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.
There are a lot of dependencies for this:
yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing
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
Inside the canvas, we need the lights and the shadows, so our models will have their shadows, and look bright
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
Finally, we will cast the hearts with
Instances and put it to the
Lastly, we need some effects
Live demo: https://threejs-floating-hearts.vercel.app/
Source code: https://github.com/leduc1901/threejs-floating-hearts