A 2-hour hands-on workshop

Spatial Storytelling

Design and publish your own interactive 3D scene using WebXR — no prior coding or 3D experience required. Nothing to install. You'll leave with a real, shareable scene you built yourself, viewable in any browser, or in VR if there's a headset on hand.

Open the live scene Facilitator slides View on GitHub
PIZZA.EXE concept art: the NETDEFENDER PRO 98 main menu, a military cyberspace simulator with a PIZZA.EXE sticker taped over its branding

This is what you're editing

A live A-Frame scene, running right here in the page. Click and drag to look around; use W A S D to walk. It's one HTML file you can read top to bottom.

Embedded here for convenience — open it full-screen to get the VR button.

Quick start

Pick whichever works on the network you're on.

Glitch — recommended

Import the repo, hit Preview, then go to /starter-template/. You get a live HTTPS URL that reloads as you type, and it stays yours after the session.

Locally

Clone the repo, then run a server from its root and open localhost:8000/starter-template/: 

python3 -m http.server 8000

Why not just double-click the file? You can, and the scene will render — but the VR button won't appear and models may fail to load. WebXR only enters VR from a secure context: HTTPS, or localhost. That's a browser rule, not something a scene can opt out of.

The 4 Ds

The session is built around four moments, in order — not a feature-by-feature software tutorial.

D

Direction

Pick a mood, theme, or concept before writing anything. Intent comes first.

D

Description

Write the tags that describe your scene. In A-Frame this is unusually literal: describing the scene is the code.

D

Discernment

Choose assets deliberately. The skill is judgment about what serves the mood, not how much you can find.

D

Delegation

A-Frame's defaults handle the camera, controls and lighting maths, so your hour goes on composition instead.

What you'll build

The floor, not the ceiling. Finish early and there are stretch goals.

  1. An environment — at least one sky or skybox.
  2. At least one light, set deliberately rather than left wherever it landed.
  3. Two or three objects placed with intention — position, scale, rotation and colour should each reflect a decision.
  4. A scene that loads and enters VR mode from your shared link.

Full brief, asset rules and stretch goals: the assignment.

Read the source

The starter template is commented for someone who has never seen A-Frame. These links drop you straight onto the relevant lines.

starter-template/index.html the whole scene, top to bottom #L63 loading A-Frame from a CDN — the only dependency #L73-L92 the sky, and swapping it for a real panorama #L128-L129 the two lights, and why there are two #L150-L195 your objects — where you start editing #L197-L221 the camera rig, cursor, and what A-Frame does for you

The asset kit has a point of view

Rather than a bag of unrelated props, the kit is built around one world — PIZZA.EXE: a decommissioned military cyberspace simulator being relabelled as pizza-delivery training, in real time, by an assistant manager with a printer and no budget. A coherent set gives the Discernment step something to actually discern between.

Technical reference sheet for the Delivery Vector, a light-cycle style vehicle
Delivery VectorThe recurring hero asset — light-cycle chassis with a pizza-box payload dock.
Reference sheet of five powerup pickups with front, side and top views
PickupsFront, side and top orthographics with materials and scale — what a modelling reference should look like.
Character sheet for UNIT-7, the military AI guide
UNIT-7The simulator's original military guide, still running its briefing script.
Roster sheet showing the game's boss designs
Boss rosterEscalating corruption, from clean military hardware to fused pizza-code.

Why this matters for the workshop. Every asset carries the same three-state pipeline — clean military hardware, cheap pizza retheme, full corruption. Picking which state serves your scene's mood is the Discernment lesson.

Documentation

Everything needed to take the scene further, or to run the session yourself.

Learn A-Frame

A guide from zero: concepts, primitives, transforms, lighting, models and interactivity.

Cheat sheet

One page, print-friendly, covering exactly the syntax this workshop uses.

Run the workshop

Run of show with clock times, a pre-session checklist, and fixes for what usually goes wrong.

How this was built

The process — build phases, architecture, and the decisions behind the constraints.