Building an interactive 3D event badge with React Three Fiber
In this post, we’ll look at how we made the dropping lanyard for the Vercel Ship 2024 site, diving into the inspiration, tech stack, and code behind the finished product.
We’ve shared digital tickets for event attendance in the past, but this time, we wanted to take it one step further by creating a tangible experience.
When Studio Basement made a video in Blender that depicted a virtual badge dropping down, we liked the idea of it so much that we started to wonder whether we could make it interactive and run it in the browser.
While some of the concepts we’re about to cover may not look familiar, don’t let them overwhelm you. The implementation is about 80 lines of mostly declarative code, with a sprinkle of math.
In order to use the MeshLine library, which is vanilla Three.js in React, we need to extend it. The extend function extends React Three Fiber's catalog of known JSX elements. Components added this way can then be referenced in the scene graph using camel casing, similar to native primitives (e.g., <mesh>):
Now we can set up a basic canvas. We need React Three Fiber’s <Canvas> component, which is a doorway into declarative Three.js. We also add a <Physics> provider, which allows us to tie shapes to physics; in Rapier, this is called a <RigidBody>.
.jpg)
