DEV Community: vishnu M R

Introducing create-threexrapp: Build WebXR Games Instantly with Three.js

vishnu M R — Fri, 07 Nov 2025 09:42:10 +0000

Hey everyone 👋

I’m Vishnu M R, a 3D and XR developer — and I’m excited to introduce something I built to make WebXR and Three.js game development super easy:
threexrapp

If you’ve ever struggled with setting up a proper Three.js + WebXR project — with physics, VR support, and player movement — this package is for you.

What Is create-threexrapp?

create-threexrapp is a complete Three.js + WebXR project template generator.
It instantly creates a fully configured 3D game environment — complete with physics, VR controls, and player setup — so you can focus on building instead of wiring up boilerplate code.

Think of it as:

“create-react-app, but for WebXR and Three.js developers.”

With a single command, you’ll get a fully structured project that’s ready to run in desktop or VR headsets — no manual setup needed.

⚡ Quick Start

Here’s all it takes to start building your own 3D world:

Create a new WebXR-ready Three.js project instantly

npx create-threexrapp myapp

Move into your project

cd myapp

Run your app

npm start

That’s it!

You’ll instantly get a working Three.js environment with:

Built-in VR support

Physics integration

Player controller

Preloaded lighting, camera, and scene structure

All you need to do is add your main 3D model and player model — everything else is handled automatically.

What’s Already Built In

Three.js + WebXR setup — ready to use out of the box
Physics engine — collisions, rigid bodies, and gravity preconfigured
Player movement controls — VR and non-VR supported
Lighting and environment — realistic scene defaults
Modular file structure — easy to extend
Optimized for performance — smooth on both desktop and VR headsets

You don’t need to manually configure cameras, renderers, controllers, or XR sessions — everything is already done for you.

** Why I Built This**

Every time I started a Three.js or WebXR project, I had to spend hours repeating the same setup:

Writing boilerplate to enable XR

Adding physics libraries

Handling controllers and movement

Organizing files

So I built create-threexrapp to eliminate all that setup time.

Now, anyone can create a ready-to-play WebXR app or 3D game in seconds — just by running one command.

It’s perfect for:

Developers learning XR or game design

3D artists testing interactions in VR

Anyone who wants to prototype 3D worlds fast

Ever wondered what your seat looks like before booking a ticket? I built a VR theater where you can preview your view + hear spatial sound — immersive ticketing is here! Check it out 👇 #VR #WebXR #ThreeJS

vishnu M R — Wed, 02 Jul 2025 10:31:27 +0000

vishnu M R

Jul 1 '25

Immersive Ticket Booking in WebXR with Three.js – View & Hear Before You Book!

#webdev #threejs #vr #webxr

Comments

2 min read

Immersive Ticket Booking in WebXR with Three.js – View & Hear Before You Book!

vishnu M R — Tue, 01 Jul 2025 08:47:50 +0000

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:

Video Link

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.