For the past few days, I’ve been working on something that merges my love for immersive tech and practical real-world use: a WebXR ticket booking experience.
You can try the live demo here:
Live link
Here's a quick screen recording of the full experience:
When you book tickets online — whether for a concert, movie, or sports event — you're usually shown a 2D seat map or a price category list. But you never truly know:
What’s the view really like from that seat?
How close are you to the stage?
What will the sound feel like?
So I thought:
“Why not let people actually experience the seat before booking?”
That’s how this idea started — a fully immersive, VR-capable ticket booking interface where you can:
See the seat layout in 3D
Select any seat interactively
Instantly preview the view from that seat
Hear directional sound from the stage
Tech I Used
- Three.js for 3D rendering
- WebXR for the VR experience (works in browser-supported headsets)
- GLB models for seats and stage layout
- Raycasting for selecting seats
- THREE.PositionalAudio for spatial sound
Some plain JavaScript and a simple simulated booking flow
🖱️ How the Interaction Works
You enter the scene, either in desktop or VR mode. The seats are modeled in 3D and hoverable/selectable using raycasting.
When you select a seat:
The camera smoothly transitions to that seat position.
A positional audio layer starts playing as if you're in the environment.
You get a real sense of what it’s like sitting there.
The view is exactly from that seat’s coordinates — not just a general overview. This works well especially for large venues where every row feels different.
🔊 Sound Preview
I added 3D positional audio using Three.js’s PositionalAudio. Depending on your seat's location, the sound gets softer, louder, or shifts left/right — giving you a preview of the acoustic experience.
Top comments (0)