✨ Designed, produced, and managed by me, Jackie Lovins ✨
This is my take on a project requiring my class to create a reimagined version of our business cards hosted through WebXR, thus creating an innovative and engaging way to present my professional information. Through this journey, I learned much about developing web-based AR and VR experiences using WebXR, three.js, and A-Frame.
To start I wanted to build on what I already knew about ARCore in Unity and started researching WebXR from there. Thankfully with my prior experience, it gave me a solid place to work from. Unlike Unity, where everything is mostly built-in or easily accessible, WebXR is more like herding cats when gathering resources. Initially, I had planned to build exclusively in three.js but after further research I found it might be difficult to build for iOS. A suggestion from my instruction sent me searching in the direction of A-Frame and that is what my project is mostly built in.
A-Frame is an open-source web framework built on top of Three.js, using it as its rendering engine while working in a more user-friendly environment. A-Frame does typically focus more on VR development the AR which made the requirements of this project a little more difficult at first. However, I knew from the start that I wanted to allow my creative side to shine in this project. I wanted to develop not only the required web-based AR experience but also a second VR experience tied to it. Doing this was the biggest challenge of this project, as the two a-scenes did not want to play nice together until the last minute.
I spent days working through three.js scripts and libraries trying to understand what A-Frame was built on and digging through A-frame components. There are so many cool features I wanted to add but I simply just didn't have the time to implement, like haptics for the mobile version, a particle system in the VR environment, and some font styles with curved plane edges for the AR entity. In the end, I was already reaching and had to with doing two types of worlds in such a short time and I had to keep my goals realistic.
Start by scanning the QR code below and follow this quick guide⤵️
- Upon entering the website the user will be asked for the use of their camera, if on a mobile device, they will also be asked for the use of motion sensors.
- After confirmation, the user will load into the landing page. This allows background scripts and scenes to load while also providing an aesthetically pleasing visual.
- A "Click to Enter" is the user's confirmation to move forward into the experience. From there the AR scene is loaded with my business card, links to my LinkedIn, Github, and Email is to the left.
- The user can move the view with the mouse and with the camera itself. When the mouse/cursor hovers over a clickable item it turns green.
- The mouse/cursor is controlled with touch/tap in the AR scene. All links are opened in a new tab except the VR forest.
- To the right of my name and title is a kitten which will take the user to the VR forest scene.
- Just like the AR scene, all links are opened in new tabs, however, there is a major change in this experience the user should note. The mouse/cursor is controlled with *Gaze Control* in the VR forest scene.
- To sum up the Gaze control; the user must put the cursor on the clickable object, keep their head straight while maintaining the cursor on the object, and then nod forward to click.
- I understand this can be a bit cumbersome but I wanted to first try to implement this type of input in WebXR as I've had experience and success doing so in Unity with ARCore. And second I thought it would be fun to have a little quirkiness in the VR bit since I was going off the path here anyway.
- After entering the VR forest, the user will see three animated rings within a forest at night.
- The middle is the pink ring that contains my bio and a link to my resume.
- To the left is the orange ring that contains four of my project highlights with links to their Github repos.
- To the right is the purple ring that contains my social links. They are the same as the AR card, but the plane in the VR scene is animated.
- Locked to the center screen is a button to take the user back to the landing page.
🌟 View my business card yourself by scanning my QR code or use this link! 🌟
