Analog Clock Web App

Here is my first Three.js project. I did a coding kata related to clock hands and angles shortly before coming across Discover Three.js and completing the tutorials. That kata inspired me to try coding an actual 3D Clock.

Check it out here:

6 Likes

Looks good. Next kata could be adding shadows of clock hands and some discrete motion of the seconds hand (currently it is too smooth).

Hi! Thanks for the feedback!
I hadn’t thought about shadows, but maybe they would be a nice touch.
As for the seconds hand, I did try that at first but wasn’t getting it quite right. But maybe I should try it again.

Here is my quadravigesimal/decimal analog clock made in OpenGL, the seconds hand has mass, so it steps back after every tick.

2 Likes

Used smooth motion for the seconds hand here: Die Taschenuhr (The pocket watch)

And now I was just curious, that maybe easings from tween.js will help to make discrete motion.
Video:


Demo: https://codepen.io/prisoner849/full/XWvORjj

4 Likes