Web VR with Framer
Checkout the Web VR demo below by panning the "+" cursor. Click here for Phone Fullscreen Demo
Objective : building an introductory website using Framer VR Module.
I have not thought much about UI for virtual reality, before I started this project. But just as I opened my sketchbook for ideation I realized that this is not going to be easy. So I began reading some articles.
SKETCHING VR UI
Touch vs Pan
Unlike regular mobile prototyping that use touch as input, web VR is most often design for headset uses. So instead of touch, gaze pointer is used like a mouse input (hover).
Ideating and thinking dimensionally
I was used to designing and sketching 3D objects (products) but sketching 3D environment and UI for the environment at first challenging. I started out with drawing viewports and the extending UIs beyond the viewport. First, a flat map was drawn then I realized the cylindrical sketch best represented the concept, however even this sketch cannot capture everything (top, bottom view).
Capturing 3D environment
With virtual reality there are many ways of setting the scene. A-Frame library supports html for creating 3d objects. I chose to find ways to take 3D environment image of my surrounding. I use Google Street View's Sphere Photo to take collection of images, which were stitched together into a single equirectangular image.
Framer is a coffee script based mobile prototyping tool. I choose Framer VR for implementation to study Framer and build quick prototypes. Using framer vr module and marker-test codes from Ravaz's resume I began building my project.