For my latest project I wanted to look at the recent..ish full-stack technologies that I haven’t had the opportunity to use in my full time job. Next.js 13.4+ with its new router app pattern, Tailwind, and Vercel’s new storage API. I needed a project that would engage me and I figured a 3D animation editor would be ideal. I studied animation at university but haven’t been able to stretch that muscle for quite a while. Would it be possible to build a 3D animation tool in the browser that’s comparable to the early animation tools I used just over twenty years ago… Where did the time go!!!
The go to library here was Three.js and the trick would be to use a nested object approach, so when for example a shoulder moves the upper arm the forearm and the hand all move too. It’s a huge time saver when animating. I’d seen the react-flow library and figured that would be a good UI solution for describing the animation hierarchy. A bit of customisation and I had a convenient way to create nodes and enter positional and rotational info. Once an animation was added I could then save that to a postgres database.
Ok there was a lot more to it but essentially that’s the big picture. Here’s a screenshot of the editor.
And here’s a short video of the output.
