How we built Frozen Goodies in just three weeks using React Three Fiber and Blender
tldr: Visit Frozen Goodies now!
Every winter we like to experiment with something fun at Code & Wander. Typically it’s a game that might involve skiing down an infinite mountain or creating a snowman in VR, something that allows us to break free from constraints and try new technologies that may reveal what direction the web is heading in.
Early November 2020, we had the idea to build a digital snowball slingshot that you could fire with your phone whilst trying to hit targets on your desktop. We got a little ahead of ourselves, imagining usage of your phone’s accelerometer and gyroscope to aim, using sockets for multiplayer and designing a massive 3D icy environment, but we realised, best save those for later!
We chose to build a digital Advent Calendar. But not any Calendar. This Calendar would be made of ice, surrounded by a beautiful but harsh environment, with chilling wind and ice that would fall from the sky.
Where’s the ice? The chilling environment?
Like a lot of projects this project evolved from basic, humble beginnings. Tired of all our incomplete winter escapades, we laid out a multi-staged plan to ensure whatever happens, this year we will deliver something.
We managed to throw the above mockup together pretty swiftly using React and Next.js and with our 3D fingers itching we jumped into the idea of adding an extra dimension. What if the ‘doors’ were cubes?
So we installed React Three Fiber and had a play. Could this work?
What might it look when you first load the page?
The doors in the mockup were blue so let’s change that. Also, the motion is a little flat, let’s add some rotation and scale.
Nice! So, obviously it’s an Advent Calendar, meaning every day we should be able to open a new door or cube in our case. We’ll need some kind of hover effect as well a transition that reveals the contents of the cube.
Okay, those blue cubes are clearly ice cubes…Beautiful, imperfectly shaped, transparent ice cubes that refract the light passing through them. Stay with me.
Let’s add a background, an ice cube model and a refractive shader based texture.
Refraction is cool. The number of frames we’re getting is not. Originally the cubes were refracting the contents of the canvas which contained a plane for the background. For a quick win, we decided to remove the background from the environment and stick it in the DOM. We also stopped refracting the contents of the scene every frame and just pass the background image. The cubes won’t be overlapping anyway so should be a good compromise.
Oh! You know what might also be cool? Adding snow! Oh! And if they’re ice cubes, why not let them fall from the sky, like hail?!
Now the reveal we made earlier when clicking a cube was okay, but not great. What happens to hail when it hits the ground? It shatters! If we use Blender to add a Cell Fracture to our ice cube, it will create a bunch of random and irregular segments which we can then use to shatter an ice cube. Add a bit of positional oscillation to simulate our ice cube rupturing and then…💥
Add some numbers, give it a name and voila!
Of course, all these gifs don’t do it justice and we recommend checking out the real deal at FrozenGoodies.co, complete with extra frames and complimentary sound effects 🔊
Stay frosty! ☃️
