In 2018 my brother and I started experimenting with web-based virtual reality. What started as a simple 3D environment built on Three.js and A-Frame quickly turned into a full-fledged system for building and publishing immersive virtual reality experiences that could be viewed in the browser, on a mobile device or in any virtual reality headset.
We knew from the beginning that the way users interacted with our virtual spaces could make or break the experience. While there are plenty of existing Three.js and A-Frame components that offer a simple way to navigate 3D spaces on various devices, none of them would give us the level of control we needed to deliver a great cross-platform user experience.
To solve this, I created a robust A-Frame movement component specifically for Paragram experiences. Creating this component from scratch gave us a ton of freedom when it came to designing user-interaction for desktop users, mobile users and VR users; not only giving us full control over every aspect of user navigation, but also allowing us to integrate it into other core Paragram systems. Some of the key features of this component are:
While my brother focused on 3D modeling, texturing and keeping up-to-speed with rapidly changing WebVR standards, I focused on developing a system that would streamline the process of converting a complex 3D scene in Blender into a highly optimized Three.js scene. Some of the key features of this system are:
The website featured a responsive one-page design custom built with minimal HTML, CSS and Javascript. A PHP templating system made it easy to add new project pages and populate their hero videos, image galleries, SEO meta tags and more.