Harold in XR

CSE115A — Team 5 Nerds
Release Date: December 1, 2025

🎯 Overview

Harold in XR is a WebXR-based 3D drawing and prototyping tool that allows users to create and manipulate drawings in virtual reality. Designed for VR headsets and browsers that support WebXR, the experience enables artists, developers, and designers to freely prototype ideas in spatial environments.

🚀 Features

• Draw in 3D with VR controllers
• Erase specific lines using eraser mode
• Tool Menu with colors and drawing modes
• Clear Canvas with confirmation
• Toggle Background for better visibility
• Move & Rotate Perspective in VR
• Ruler Mode for straight lines
• Basic Shapes (cube / cone) that can be placed, rotated, and drawn on
• Scale Grid for spatial measurement

🧩 Technology Stack

• A-Frame
• A-Frame Extras
• A-Frame Particle System Component
• @fern-solutions/aframe-sky-background
• A-Frame Environment Component
• Vite

📌 User Experience Summary

This application satisfies core VR user experience requirements:

• Reliable VR headset + controller tracking
• Responsive drawing interaction with low latency
• Intuitive tool switching and spatial movement
• Clean UI with visible feedback during actions

🎮 Controls

Action	Control
Draw	VR Controller Trigger
Erase	Tool switch via UI menu
Change Color/Tool	Select from UI panel
Move Perspective	Head movement or joystick
Place Shapes	Menu selection
Toggle Grid / Background	UI panel buttons
Clear All	Clear button + confirmation

Installation Guide

Harold in XR

This guide explains how to set up and run Harold in XR on a local machine for development or demonstration.

---

🛠 System Requirements

Requirement	Version
Node.js	18+ recommended
npm	Bundled with Node
Browser with WebXR support	Chrome / Firefox Reality / Meta Quest Browser
Optional VR Hardware	Meta Quest / HTC Vive / Windows MR

---

📦 Software Dependencies

This project uses:

• Vite (local server + bundler)
• A-Frame and XR components

All required packages will be installed with npm install.

---

🚀 Installation Steps

1️⃣ Clone the repository

git clone https://github.com/sierrajanson/cse115a.git

cd cse115a

2️⃣ Install node dependencies

npm install

If installation fails:

npm install aframe aframe-extras aframe-particle-system-component @fern-solut

3️⃣ Launch development server

npm run dev

4️⃣ Open the application

http://localhost:5173/

🎧 VR Setup

Device Setup Notes Meta Quest Use Quest browser or Air Link (PCVR) HTC Vive requires a compatible SteamVR browser Desktop mode can simulate with a mouse, but has limited experience

Ensure VR permissions are granted when prompted.

❤️ Credits

• Based on A-Frame and open-source WebXR components
• Developed by Team 5 Nerds

📄 License

For educational use under CSE115A — UC Santa Cruz