360 Holiday Card
This is a 360 photo holiday card I created as my final project for a course at CMU called Software Structures for Usable Interfaces.
| Year: | 2016 |
| Client: | CMU MHCI |
| Duration: | 3 Weeks |
| Demo |
About the Project
For this project I was changed scoping a web-based project that would take three weeks to build and include course topics.
I decided to use three.js to create a holiday card to send to my family and friends using 360 photos I had taken throughout the year.
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. I created an SVG parser which takes an SVG file and extracts the set of points to automatically create a lathe geometry. This is how I constructed my the Christmas tree.
How it works
When a user clicks on a Christmas ornament, the corresponding 360 photo becomes the background of the scene. When a user clicks each of the presents, a different song plays.
I implemented both a desktop and mobile version of the holiday card so that I could send this card to family members with various levels of tech savvy.
View the demo here.
Future Directions
Right now, the card loads rather slowly because of all of the high resolution images. In the future, I would like to optimize it for faster loading so that I can add many more ornaments/photos.