DEV Community

Cover image for Hanukkah lighting in WebXR
Michael Salaverry
Michael Salaverry

Posted on • Updated on

Hanukkah lighting in WebXR

To celebrate Hanukkah (חנוכה), I made a WebXR scene where the user can pan, walk around (WASD), and/or enter VR in the Western Wall (הכותל המערבי) using AFrame, an HTML/JS framework for creating WebXR experiences.

GitHub logo aframevr / aframe

🅰️ Web framework for building virtual reality experiences.

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Coverage Status Downloads Version License

SiteDocsSchoolSlackBlogNewsletter

Examples


Supercraft


A-Painter


Supermedium


A-Blast


A-Saturday-Night


Musical Forest by @googlecreativelab

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>.

❤️ Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids.

🔌 Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

Performance: A-Frame is a thin framework on…

To make a WebXR scene, I used the webcomponents proved by AFrame to create a scene with

  • a 360 image as the sky
  • a number of cylinders as candles
  • a number of gltf models for flames and the hanukiah (special thanks to Santiago Shang for the CC licensed beautiful GLTF model)
  • and some english text (doesn't support hebrew / RTL as far as I can tell)

Here is the live demo (click the ▶️ to see it in your browser, desktop or mobile)

Future plans involve adding interactivity, so that using a Quest 2 controller / pointer lets you light each candle, or to integrate hebcal so that it can automatically light the right number of candles.

Top comments (0)