52W: W8 - 3D animations with Three.js

February 28, 2023

I decided to centralize my posts on my own website according to POSSE principles.
The original post is on Substack here: https://52weeks.substack.com/p/week-8-3d-animations-with-threejs

This week I created two interactive 3D web animations using Three.js and React Three Fiber. The first one (pictured above) is 52 Candles (give it a bit to load, I haven’t learned how to optimize/compress the images yet) which lights a candle for each week of the year, and the second is VoxVisual, a voice spectrum visualizer (below.

Tools I used:

Context:

This was the first week where I started with a technology in mind (three.js) without a clear goal ahead of time. I recommend having a look at some of the example projects - it’s impressive what you can do just in the browser.

I kicked off the week with 2 friends who also wanted to build 3D web animations. They started with the three.js journey - a comprehensive tutorial explaining how to use it from the ground up. If I had more than a week to get something out I would love to follow along, it seems like a super high quality course. However, I’m trying to be strict in my weekly timebox, so I have to cut some corners and skip the tutorials.

Process:

My first idea, drawing inspiration from my dad who loves Sudoku, and the success of Wordle, was to make a 3D animated Sudoku. I found a three.js implementation of a Sudoku game -this would be a good place to start.

Instead of one 9x9 2D grid I wanted to do 6 Sudokus on the face of a cube (ie ‘Sudokube’). My brain slowly melted thinking about how I could map this to a 6 faced cube (and have the edge numbers be shared between adjacent faces), until I discovered that someone had beat me to it, and they stole the name too!


More brain melt

Probably for the best or I’d be spending the week struggling with equations.

Instead I turned to my new best friend ChatGPT to brainstorm some interactive experiences I could create with Three.js, and decided I’d try something with the micophone input. I asked it to give me basic code to get started. I tweaked a few parameters and the styling of the lines, and in 30 mins I already had something entertaining.

I called it VoxVisual - it records your microphone and then displays you a spectrum. It’s fun to whistle and slide up and down a scale, or to hum or sing and see the harmonics. Here’s the live demo.

You’ll see the black cubes below the waveform. Currently they trigger when a corresponding part of the waveform reaches a certain amplitude. My plan was to turn this into a DDR or Guitar Hero type game where you have to sing a certain note at a certain time to get points. I also played around with generating a sci-fi version of my desk setup:

VoxVisual x Blade Runner

However, I took a step back and reflected that this game was far too 2D for me to be satisfied. As fun as the game was shaping up to be, I decided to go in a different direction. I wanted to get my hands dirty making some 3D models from scratch, and play with lighting, textures, camera angles, depth, and animation.

So I spent several hours between ChatGPT, documentation, and a lot of trial and error to build… a table. 52 Candles was born.

It doesn’t that impressive, but it was incredibly satisfying to create the geometry and textures for the tabletop, table legs, candles, candle flames, floating text, light sources, and cameras. The animation will update, lighting a candle for every week of the year. I didn’t quite get this working - but I want each candle to be clickable and send you to the corresponding blog post for that week, maybe with an animated popup as well.

I used HDReye - a free iOS app - to take 51 pictures in our living room and convert them to a 360 image. I was able to use this locally for my candle table (so it looked like the table was in our living room) but I had some issues getting it to upload and display properly when uploading to the Github page. Here’s what it would have looked like:

Learnings:

  • Learning the bare minimum of a new framework in a week is hard… but doable!

  • I still have a lot to learn about rendering, image assets, page optimization

  • Thinking in 3D is fun. I’d love to spend more time with interactive 3D experiences

  • I can be obsessive about getting stuck on a tiny detail that doesn’t make a huge impact on the final experience. I think I spent 2 hours trying to figure out how to make a realistic candle flame with a particle system until I gave up and used a flat candle image. It’s tricky to know when to give up and when to be stubborn

Next steps:

  • Add in a 360 background

  • Compress the image assets for faster page load

  • Make each candle clickable and redirect to a blog post

  • Add a character to move around the scene

  • Add some animations

  • Gamify VoxVisual

  • Create a 3D animated short film