World Clock in VR using MomentJS in WebVR
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.
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.
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Get your Free Lesson now.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function outerRing() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 10, 0, Math.PI * 2); ctx.strokeStyle = '#92949C'; ctx.stroke(); } function outerRing2() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 7, 0, Math.PI * 2); ctx.strokeStyle = '#929BAC'; ctx.stroke(); } function centerRing() { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2); ctx.lineWidth = 3; ctx.fillStyle = '#353535'; ctx.strokeStyle = '#0C3D4A'; ctx.stroke(); } |
We need to create a list of timezones for displaying in VR. We’ll be using BoxGeometry to show the clocks.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var listOfClocks = [ { canvas: canvases[0], timezone: 'America/Los_Angeles', text: 'LA' }, { canvas: canvases[1], timezone: 'America/New_York', text: 'New York' }, { canvas: canvases[2], timezone: 'Asia/Tokyo', text: 'Tokyo' }, { canvas: canvases[3], timezone: 'Asia/Colombo', text: 'Colombo' }, { canvas: canvases[4], timezone: 'Europe/Madrid', text: 'Madrid' }, { canvas: canvases[5], timezone: 'Australia/Sydney', text: 'Sydney' } ]; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var materials = []; function setUpMesh() { for (var j = 0; j < listOfClocks.length; j++) { var planeGeometry = new THREE.PlaneGeometry(3, 1); var planeTexture = new THREE.Texture(); planeTexture.minFilter = THREE.LinearFilter; planeTexture.image = listOfClocks[j].canvas; var planeMaterial = new THREE.MeshBasicMaterial({ map: planeTexture, side: THREE.DoubleSide }); planeMaterial.map.needsUpdate = true; materials.push(planeMaterial); } var boxGeometry = new THREE.BoxGeometry(8000, 8000, 8000); var faceMaterial = new THREE.MultiMaterial(materials); var mesh = new THREE.Mesh(boxGeometry, faceMaterial); mesh.scale.x = -1; scene.add(mesh); } |
We’ll need to add the following code to animate function for the system to work.
|
1 2 3 4 5 6 7 8 9 10 |
var date = new Date(); for (var i = 0; i < listOfClocks.length; i++) { showClock(listOfClocks[i].canvas, moment(date).tz(listOfClocks[i].timezone), listOfClocks[i].text); } for (var k = 0; k < materials.length; k ++) { materials[k].map.needsUpdate = true; } |
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.
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Download Source Code
Get your Free Lesson now.
Leave a Reply