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.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1
We've launched a WebVR Course with 25+ projects with source code! Check it out.
Get The Course