WebVR Experiment: #3— Dynamic Discography Preview

6/18–6/22 –4x45 Mins Sprints

July 9, 2018

Code & Design

Experiment 3 Goal:

Single-User, On-Gaze, Dynamic Album Preview:

  • Display Multiple Album Buttons
  • On-Gaze Change Selected Album Box, Album Environment, & Album Track

Experiment 3 Shipped:

Single-User, On-Gaze, Dynamic Album Preview: https://musicworldtest2.neocities.org/


  • Displays Three Album Buttons — <a-box> entities with a material component skin set to <imgs>; active album larger than peers
  • Loads An Associated Album Environment — using the public A-Frame Environment component with a pre-loaded preset that matches the active album color palette
  • Plays An Associated Album Track — <a-sound> entity with the “src:” attribute set to our selectedAlbumTrack property in our state
  • On-Gaze Controls — “Clicking” to switch Active Albums now replaced with the “mouseenter” event trigger


Experiment sprint number three is now underway as the first intra-week sprint. For this sprint I once again elected to extend the previous sprint since I finished just short of the target/goal delivery.

This time around, our goal is to finally deliver a simple immersive artist album discography that’s controlled by a headset gaze.

SetAttribute() vs Object3D

Starting again from our previous sprint, a small & seemingly insignificant bug unexpectedly popped out towards the end. Specifically, clicking an Album Button successfully changed the Album Environment & Album Track; however, what it did not do is update size of the new album selected. No matter what album we clicked, only the first album remained larger than the rest — this could be really confusing to users as it’s no longer clear that a new album preview is now playing.

But the really annoying thing here is that the logic is the exact same for changing all three state properties: environment, track & selected album. When a new box is selected, emit a state change that in turn updates attributes on three components — so why was the selected album property the only updated state property not rendering???

Unfortunately I took a disproportionate amount of time (close to ~90 mins) to answer the previous question, but, fortunately, the answer illuminated low-level A-Frame knowledge that in retrospect I’m glad I took the time to learn. A-Frame’s default attribute updating function, setAttribute(), is the right tool for the job 99% of the time; as luck would have it, updating the scale of a component through re-setting attributes is one of the few 1% instances where setAttribute() is the wrong tool of choice.

For a handful of core attributes (position, rotation, scale & visibility), A-Frame demands accessing the lower-level Three.JS methods for performance reasons. An applied example of the previous is as follows:

document.querySelector(“#albumThree”).object3D.scale.set(.75, .75, .75);

And off I went to test. Now when an Album Box is clicked, all three property changes are appropriately reflected — the new active Album Box successfully resizes!

Image for post

From On-Click to On-Gaze

With close to an hour left, it’s looking like I might ship our intended goal (for the first time in this series…). With our active album box now successfully re-scaling, the only bug left is switching the event-triggers on our album box buttons from “clicking” to “gazing” — the mixed reality equivalent of “hover.”

A quick Google search led to a neat forum discussing the different trigger methods that are native to Javascript; within those methods I found the declaration that made the most sense: “mouseenter.”

this.el.addEventListener(‘mouseenter’, function (evt) {
var target = String(‘#’ + el.id);
if (el.id == “albumOne”) {
console.log(“Album one was clicked”);
... rest of state changes when Album one is clicked

And that is all she wrote — finished early of our intended goal for once. As I was looking at the final product, found here, https://musicworldtest2.neocities.org/ , an idea bubbled up that I’d like to make the focus of the next sprint: I’d like to add another layer of immersive-ness to the album discography by implementing nothing short of a music visualizer.

On to WebVR Experiment 4!

New Public Components & Technologies Used:

None / ninguno / niel