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.
Try out one of our first demo scenes; a beautiful 1950’s Ferrari 250 Testa Rossa.
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: