Turning a Physical Clock into a Virtual Bubble Clock with Three.js

About Three.js

Three.js is a powerful JavaScript library that simplifies the creation and manipulation of 3D objects, scenes, and animations on the web. As a result, creating interactive and engaging visualizations, games, and applications has never been easier. With a large community of developers, Three.js provides a wide range of tools and resources for developers of all skill levels.

I was first introduced to Three.js by Fireship IO on YouTube, but I quickly discovered the incredible work of Bruno Simon. I learned a lot from watching his work and trying to imitate his techniques, which you can see in my portfolio landing page. As the saying goes, "everything is a remix of a remix of a remix," and I think that applies especially well to the world of web development.

My first Rodeo

This I can call mine: the original or the interpretation of a physical thing. You geeks on the internet might have come across this ping pong clock using a bunch of RGB LEDs and Arduino. I also made one a while back; you can see pictures here.

Modeling it in blender

The steps involved in modeling the clock in Blender are as follows: make it as low-poly as possible and export it in a format supported by three.js.

Next, I wrote the JavaScript logic for the 10 segment modules, but I'm not proud of the code, so I won't include it here.

This is the code responsible for the smooth-moving RGB background color. For those wondering, I got this logic from the internet (full disclosure).

And the function being called from the main

I used post-processing libraries in Three.js to achieve a more realistic feel to the clock's movement and appearance.

this is my post processing setup

And voila , we have this
https://seven-segement-bubble-clock.vercel.app/