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.
Ultimately, we wanted a highly shareable element that rewards the user for signing up and makes it worth their time.
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.
With this, we have everything we need: 'Now let's make the band happen. We need a couple of references to access them later on. The canvas size is important for meshline, and a THREE.CatmullRomCurve3 helps us to calculate a smooth curve with just a few points.'
[
add
]
[
|
|
...
]