Abstract: This beginner course introduces virtual reality interaction design with no prior coding or VR experience required. Students build their first interactive VR environment using A-Frame and WebXR, understand the core principles of presence and cybersickness prevention, design basic locomotion and object interaction, and complete a portfolio project viewable in any WebXR-compatible browser or headset. Outline: Introduction to VR concepts → First VR scene (A-Frame) → Locomotion & navigation → Object interaction → Feedback & spatial audio → Portfolio project.
Learning Objectives
By the end of this course, students will be able to:
- Explain (Bloom: remembering/understanding) what virtual reality is, the difference between presence and immersion, and the main types of VR experiences.
- Create (creating) an interactive VR scene in the browser with A-Frame, with no server or compilation.
- Apply (applying) a simple locomotion pattern (teleportation or keyboard movement) suited to a WebVR experience.
- Design (creating) basic object interactions: click, grab, feedback animation.
- Evaluate (evaluating) the comfort of a VR experience against latency, framerate, and movement criteria.
- Produce (creating) a documented, presentable capstone project (in browser, no headset required).
Module 1 — What Is VR? (2h)
Concept
Virtual reality replaces the perception of the real world with an environment entirely generated by computer. It rests on three pillars: immersion (sensory isolation), presence (subjective feeling of being "there"), interactivity (the environment responds to the user).
Fundamental distinction:
- Immersion = objective property of the system (resolution, FoV, latency). Measurable.
- Presence = subjective experience of the user. Depends on immersion but also on content and emotional context.
Source: Slater, M., & Wilbur, S. (1997). A Framework for Immersive Virtual Environments (FIVE). Presence, 6(6), 603–616.
Three types of VR experiences:
- Room-scale VR: the user walks in physical space (≥ 2×2m)
- Stationary VR: seated or standing, without movement
- WebVR / WebXR: VR in the browser, accessible without installation
Cybersickness: discomfort (nausea, dizziness) caused by the conflict between visual movement and physical stillness. Golden rule: framerate ≥ 60 fps + latency < 20ms + avoid camera movements not initiated by the user.
Lab 1.1 — Observe and Analyze
Objective: develop a critical eye for existing VR experiences (in browser).
Steps:
- Open an A-Frame example on a computer (without headset): https://aframe.io/examples/showcase/helloworld/
- Navigate by clicking-dragging the mouse. Observe: what do you feel? Which object is interactive? What is missing?
- Open a second example (https://aframe.io/examples/) — choose freely.
- For each example, note: What creates a sense of depth? What feedback indicates interactivity? What would you improve?
Mini-exercise: Sketch by hand (paper prototype) a simple virtual room with 3 objects. For each, indicate: is it interactive? What behavior does it trigger?
Module 2 — First VR Scene with A-Frame (2h)
Concept
A-Frame is a declarative HTML framework for creating WebXR 3D scenes. No compilation, no server — just an HTML file opened in Chrome or Firefox.
Documentation: https://aframe.io/docs/
Minimal structure: html <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky color="#87CEEB"></a-sky> <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#228B22"></a-plane> <a-box position="-1.5 0.5 -3" color="#EF2D5E" shadow="cast: true; receive: false"></a-box> <a-sphere position="0 1 -3.5" radius="0.5" color="#FFC65D"></a-sphere> <a-cylinder position="1.5 0.75 -3" radius="0.3" height="1.5" color="#4CC3D9"></a-cylinder> <a-entity id="rig" position="0 1.6 0"> <a-camera></a-camera> </a-entity> </a-scene> </body> </html>
Core attributes: position (x y z in meters), rotation (degrees), scale, color, visible, shadow
Camera entity: the <a-entity id="rig"> at height 1.6m simulates an adult's eye height.
Lab 2.1 — My First VR Scene
Steps:
- Create a
vr-scene.htmlfile on your desktop - Copy the template above, open in Chrome
- Navigate with mouse (drag) + WASD to move
- Modify: change colors, add a torus (
<a-torus>), 3D text (<a-text value="Hello VR" position="0 2 -3">) - Observe depth and perspective — how do distances read?
Mini-exercise: Create a scene representing a closed room (4 walls + floor + ceiling) with 3 objects of different sizes at distinct positions. Each object must "tell" something about the space.
Module 3 — Locomotion and Navigation (2h)
Concept
Locomotion is the mode of movement in virtual space. It is the most important cybersickness factor — a bad locomotion pattern makes an experience unusable.
Two main patterns for beginners:
| Pattern | Mechanism | Comfort | When to use |
|---|---|---|---|
| Teleportation | Point + confirm → instant jump | Excellent | General public, long sessions |
| Mouse/keyboard navigation | WASD + drag (desktop) | Acceptable (desktop) | Quick prototyping |
Adding teleportation in A-Frame (npm component): html <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-teleport-controls.min.js"></script> html <a-entity id="rig" position="0 1.6 0"> <a-camera> <a-cursor></a-cursor> </a-camera> <a-entity teleport-controls="cameraRig: #rig; teleportOrigin: #camera; button: trigger" laser-controls="hand: left"></a-entity> </a-entity>
Locomotion comfort rules:
- Never non-user-initiated camera rotation
- No abrupt acceleration/deceleration
- Always offer an alternative for people sensitive to cybersickness
Lab 3.1 — Navigation Zone
Steps:
- Take the scene from Lab 2.1
- Delimit a visible navigable zone on the ground (grid texture or different color)
- Add teleportation destination markers (glowing circles on the ground)
- Test with 2 colleagues or family members: do they notice the markers? Do they understand they can move?
Mini-exercise: Draw the navigation map of your capstone project: where the user starts, which zones they can reach, which zones are blocked and why.
Module 4 — Object Interaction (2h)
Concept
VR object interaction must respect physical affordances: a manipulable object must signal it visually.
Cursor/gaze pattern in A-Frame: The <a-cursor> is a reticle at the center of the screen — the object is selected by pointing at it and clicking (or after a delay).
html <a-camera> <a-cursor color="#FF5733" fuse="true" fuse-timeout="1500"></a-cursor> </a-camera>
Responding to interactions: html <a-box id="mybox" position="0 1 -3" color="#4CC3D9" animation__hover="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter; dur: 200" animation__unhover="property: scale; to: 1 1 1; startEvents: mouseleave; dur: 200" animation__click="property: color; to: #FF5733; startEvents: click; dur: 300"> </a-box>
Three states of an interactive object:
- Idle: neutral appearance
- Hover: indication that the object is targeted (scale, outline, color)
- Active: action confirmation (animation, sound)
Lab 4.1 — Interactive Objects
Steps:
- In your scene, choose 2 objects and add the 3 states (idle / hover / active)
- Use A-Frame's
animation__*for each transition - For the "active" feedback: add a distinct color change + a brief scale animation (1 → 1.3 → 1)
- Test: do you understand you can interact before pointing at the object?
Mini-exercise: List the 3 objects in your capstone project and define their 3 states. How does the user know, before interacting, that the object is clickable?
Module 5 — Feedback and Spatial Audio (2h)
Concept
Sound is the second presence vector after visuals. In desktop VR, adding spatial audio radically transforms the experience.
Positional sound in A-Frame: html <a-entity position="0 1 -3" sound="src: url(click.mp3); on: click; positional: true; rolloffFactor: 2"> </a-entity>
Ambient audio (environment sound): html <a-entity sound="src: url(ambience.mp3); autoplay: true; loop: true; volume: 0.3"> </a-entity>
Audio comfort rule:
- Ambient volume: 20–30% (don't dominate interaction sounds)
- Interaction sound: brief (< 500ms), clear, distinct from ambiance
- Always plan for the silent experience (accessibility, audio-free environments)
CC0 sound resources: https://freesound.org (filter "CC0") · https://pixabay.com/music/
Lab 5.1 — Scene with Sound
Steps:
- Find a CC0 ambient sound (e.g. light wind, calm interior space)
- Find 2 CC0 interaction sounds (e.g. click, bell, pop)
- Add ambiance to the scene + one sound per interactive object
- Test without looking at the screen: can you understand the space from sound alone?
Mini-exercise: Describe in 3 sentences the sound design of your capstone project. What sound informs the user of each key action?
Module 6 — Basic User Testing (2h)
Concept
Even a desktop browser WebVR prototype can be tested without a headset. The goal is to validate that interactions are understandable and movement is comfortable.
Minimal test protocol (desktop, 2 testers):
Nielsen & Landauer (1993): 5 testers reveal ~85% of problems. 2 testers are enough at the start of a project for critical issues.
- Prepare 2 concrete tasks ("Go to the red object and interact with it")
- Observe without intervening
- Note: hesitations, blockers, spontaneous comments
- 3 open-ended post-test questions
Lab 6.1 — Test with 2 People
Steps:
- Prepare your prototype on a dedicated test computer
- Draft 2 tasks (not "explore" — "do X")
- Test with 2 different profiles (non-gamers if possible)
- Fill in the grid: Task completed? Time? Hesitations? Comments?
Mini-exercise: List the 3 problems revealed by your 2 tests. For each, propose a concrete fix and the priority (blocker / important / minor).
Capstone Project — "My First VR Space"
Brief
Create a simple VR space in the browser that presents, explores, or tells something — an imaginary place, a meaningful object, a personal universe.
Constraints
- Technology: A-Frame (WebXR)
- No headset required — works in desktop browser
- The space must contain at least 3 interactive objects (3 states each)
- At least 1 positional sound and 1 ambient sound
- Target usage duration: 2–5 minutes
Deliverables
- Functional HTML file (or hosting link like Glitch.com, CodePen)
- Short documentation (1 A4 page): concept, 3 design decisions and their rationale, navigation map
- Observation grid from user test (2 testers)
- Presentation (5 min): live demo + reflective debrief
Evaluation Rubric
| Criterion | Insufficient (1) | Satisfactory (2) | Good (3) | Excellent (4) |
|---|---|---|---|---|
| Technical functionality | Doesn't open or crashes | Works with difficulties | Works reliably | Works without friction, stable 60 fps |
| Navigation & comfort | Disorientation, cybersickness | Navigable with help | Clear navigation | Intuitive navigation, 0 cybersickness |
| Interactions | No functional interaction | 1–2 interactions without feedback | 3 interactions with feedback | 3+ interactions + 3 well-defined states |
| Audio | Absent | Sound present but poorly balanced | Ambient sound + interactions | Positional spatial audio + coherent sound design |
| Documentation | Absent | Present but incomplete | Concept + 3 decisions | Deep reflection + alternatives considered |
Readings & Resources
- A-Frame documentation: https://aframe.io/docs/
- A-Frame school (interactive tutorials): https://aframe.io/aframe-school/
- Glitch.com (free WebXR hosting): https://glitch.com
- Slater, M., & Wilbur, S. (1997). A Framework for Immersive Virtual Environments. Presence, 6(6), 603–616.
- LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin, 32(1), 47–56.
- Freesound.org (CC0 sounds): https://freesound.org
- WebXR W3C spec: https://www.w3.org/TR/webxr/
→ Next level: VR Interaction Design — Level 2 → Custom workshop for your school or team: Book a 30-min call — free
Intensive workshop (1–2 days) for schools, studios, museums — condensed theory, guided labs, project mentoring.
Book a 30-min call (free) →