Building an interactive 3D event badge with React Three Fiber
What's this blog post about?
In this post, we explore how a 3D event badge with an interactive lanyard was created for the Vercel Ship 2024 site. The inspiration came from a Blender video depicting a virtual badge dropping down. To make it interactive and run in the browser, React Three Fiber, Drei, react-three-rapier, and MeshLine were used. The implementation is about 80 lines of mostly declarative code with some math involved. The final product includes physics joints, a curve for the lanyard, an interactive card, and dynamic name display.
Company
Vercel
Date published
April 17, 2024
Author(s)
Paul Henschel
Word count
1624
Hacker News points
None found.
Language
English