Table of Contents
Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds
Open Demo >
Open JS File >
Summary
Swap the scene's sky image with 1 of 6 bubble selections that each hold a unique 360 image.
Controls
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.
Components
Built
- 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.
Public
Favorites
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.
Difficulties
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!
- Minty Crisp ^-^
Top comments (0)