360 Holiday Card
This was my final project for a course called Software Structures for Usable
Interfaces. The prompt was to scope a web-based project that would take three weeks to build and include course topics.
The original scope of the project was to create an augmented reality holiday card, but after much research, I found that to access the camera on a mobile device via the web, I would have to use getUserMedia, which only works on Android devices, or a specified AR browser. Realizing that this would exclude most of my users, I decided to pivot to a 3D web viewer built in three.js with a mobile VR version.
Libraries Used:
- Three.js (WebGL)
- Tween.js (animation)
- Reticulum.js (Google Material Design based reticle)
Paper Prototyping
What I learned from paper prototyping was that I would need a different interface for web and mobile if I wanted to make my design compatible with Google Cardboard in which you can not touch a specific part of the screen.
The primary class topic I focused on was library extension. Three.js has a lathe geometry object which takes a set of points and wraps them about an axis to create a geometry. This is how I made the tree in my design. When I went to figure out which points to use, I opened illustrator and drew a path. I then exported that path as an SVG so I could use those points. After I had done this, I realized I could just write a function that takes an SVG file, parses the points, and creates the geometry.
Some final screenshots
