DEV Community

Cover image for A-Frame : Web XR Orb Sky Changer Scene & Overview
Minty Crisp
Minty Crisp

Posted on

A-Frame : Web XR Orb Sky Changer Scene & Overview

Table of Contents

What to Do
Future Builds

Open Demo >

Open JS File >


Swap the scene's sky image with 1 of 6 bubble selections that each hold a unique 360 image.


View Cursor Movement

  • Desktop - Mouse
  • Mobile - Gyro / Swipe
  • VR - Headset

Click & Selection

  • Desktop - Fuse Click (Hover for 2sec)
  • Mobile - Fuse Click (Hover for 2sec)
  • VR - Fuse Click (Hover for 2sec)

What to Do

Use the View Cursor to look around the 360 environment and Hover over a floating bubble. This will pause the orbit rotation for all bubbles. Continue to hover over that bubble for 2 seconds to select it as a sky replacement. When activated, the sky swap animation will play. Once completed, the bubbles will resume their orbit and you may continue to swap through all of the images.



  • orb-expanding : Controls the main animations, timings and adjustments of the entity properties for the bubble swaps. Also assists in disabling of additional user interaction during the swap phases.
  • sky-fix : The sphere of the bubbles themselves are constantly rotating to show off their scenery. Once selected, the bubble's rotation will not match the sky's and this aligns the sky to smooth the transition.
  • center-sky-fix : Because of the inheritance with parent / child relationship and their properties as well as the way the orbit is configured, matching the sky's rotation required it's own parent and that parent needed it's own rotation to be calculated for a match. This syncs the bubble's parent rotation with the sky's parent rotation for a smooth transition as well.
  • orbit-user : This builds the continuous orbit loop animation for each bubble based upon their parent. Each bubble has a parent which is rotated based on how many spheres equally from 360. Each of the children hold a sphere and have a position offset in 1 direction which acts like a radius of a circle around the user.



The floating bubble animations and expand with fade as well were quite satisfying to nail down, but I really enjoyed making the animations for the cursor countdown on Fusing.


It was mostly just figuring out the method and types of variables that A-Frame would accept changes from Javascript for dynamic animations.

What I want to build upon this, in the future...

A scene with a sea of bubbles floating all around the user with a gradient colored environment. The user can 'reach out' and pull in any bubble closer to inspect in better detail. Every bubble contains a set of media and plays a preview of it when the user holds it. A song, a video, an image, a handheld animated 3D scene of a fully immersive one, a soundeffect, a scene effect like fireworks or a sunset animation, the ability to float or shoot fireballs. Just an endless stream of selectable user creations wether traditional entertainment like 2D media or more integrated XR items like assets, scenes, components and configurations. Even things like mini-games, puzzles and quests as well. Also having ways of sorting and identifying things far away. Things like categories that have specific colors/textures, material properties, shapes, animations, media previews and easy ways of sorting.

Thank you for your time!

  • More Dev Articles
  • My homepage
  • View my Github Repositories
  • Peruse my Tweets
  • Ko-fi tips if you enjoy my work
  • - Minty Crisp ^-^

    Top comments (0)