When building a website, it is important to make sure that your audience is properly interacting with as much content as possible. Engagement- that goal remains the same regardless of medium, and 3D websites were certainly not an exception.
I wanted to give our creators as much information as possible at the engagement happening on their sites. I had started off by making page view and session duration information available for each site, but more importantly I had to find ways to include analytics tracking in the building process.
This meant that instead of just displaying data as text, building a story around a tool that creators could use while in their worlds that would also have a purpose.
Enter Ghost Goggles!
My team and I came up with the idea of making engagement information easier to digest by giving creators the ability to replay visitor activity in their worlds. We named it “Ghosts” because it was like seeing the ghosts of former visitors and their past actions. The Ghost Goggles would be the tool that a creator would use to be able to see the Ghosts from their worlds, and relive their journeys.
The 3 main steps I considered when designing and developing Ghost Goggles:
Find a way to track user movement & position
Save that information to a database and retrieve it efficiently
Implement player controls to allow for the intuitive “replaying” of that information
In 3D scenes, where a user is consists of two main parts: position and rotation. (In 3D graphics a quaternion is often times used to represent rotation) To be able to get that position and rotation information, I had to take advantage of the Camera object from ThreeJS.
With that, I was able to easily get position and rotation information by doing:
//get the position
camera.position
//get the rotation
camera.quaternion