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.

aframevr / aframe

🅰️ Web framework for building virtual reality experiences.

A-Frame

A web framework for building virtual reality experiences.

Site — Docs — School — Slack — Blog — Newsletter

Examples

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…

View on GitHub

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.