DEV Community

Cover image for Hanukkah lighting in WebXR
Michael Salaverry
Michael Salaverry

Posted on • Edited on

1

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay