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 blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

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

Okay