World Clock in VR using MomentJS in WebVR

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create a VR interface in WebVR. Today, we’ll see how to create world clock using momentjs in VR.

Demo | Source

In this tutorial, we’ll use html canvas and  momentjs to create clocks in different timezones. We’ll then add then to our VR scene by importing them as textures.

Creating clock in VR

We’ll first create clock by drawing arcs in html canvas. For each of the ring we see on the clock, we draw it on the canvas using similar code like shown below.

We need to create a list of timezones for displaying in VR. We’ll be using BoxGeometry to show the clocks.

We’ll need to add the following code to animate function for the system to work.

This takes the timezone info from the list and then applies the timezone using momentjs timezeone. It then calls the showClock function which will draw the clock to the canvas. We then update the texture so that the change is reflected in the scene.

Make it better

Add more clocks and regions, and improve the resolution of the clock. Don’t forget to share what you come up with in the comments below.

Get all updates
We won't spam you

Follow me


TutorialsforVR is a platform for helping developers build applications in VR.
Follow me

Leave a Reply