R3F Massonory Galery
Timeline
2022
My role
Frontend developer
Tech stack
React
React three fiber
Three.js
React spring
R3F Massonory Galery
Dynamic 3D gallery using React and Three.js for an immersive display of visuals. It offers a responsive, interactive layout for showcasing portfolios or art, blending web development with 3D graphics effectively.
Challenge
Jumping into React Three Fiber and Three.js was a whole new adventure for me. It was tough at first, no doubt, but totally gripping. Figuring out how to work with 2D/3D stuff on the web canvas pushed me in ways I didn't expect, making me both scratch my head and get excited about what I could create next. It's been a mix of challenge and thrill, and I'm just getting started!
Interesting learnings
A cool thing I picked up was how the 3D world ditches pixels for points. For a frontend dev like me, thinking in pixels just feels more natural. So, I tweaked the camera settings until one point matched up with one pixel. Made my life a whole lot easier!
If you are interested in how I did this, feel free to check out the code in the repo (it's public):
threejs-masonry