A-Frame : Web XR Orb Sky Changer Scene & Overview
Tags: aframe, javascript, ux, webdev
Published: 2022-06-26 04:40:00

<span id="#articleText">

<h2>Table of Contents</h2>
<a href="#summary" target="_blank">Summary</a>
<a href="#controls" target="_blank">Controls</a>
<a href="#what-to-do" target="_blank">What to Do</a>
<a href="#components" target="_blank">Components</a>
<a href="#favorites" target="_blank">Favorites</a>
<a href="#difficulties" target="_blank">Difficulties</a>
<a href="#future-builds" target="_blank">Future Builds</a>

<!-- Line Break -->
<hr />

<!-- Demo -->
<h3><a href="https://mintycrisp.com/xr-orb-sky-changer-aframe-fullscreen-share.html" target="_blank">Open Demo &gt;</a></h3>
<h4><a href="https://github.com/Minty-Crisp/mintycrispblog/blob/main/assets/js/orbs.js" target="_blank">Open JS File &gt;</a></h4>
<!-- Line Break -->
<hr />

<h2 id="summary">Summary</h2>
<p>Swap the scene's sky image with 1 of 6 bubble selections that each hold a unique 360 image.</p>
<!-- Line Break -->
<hr />
<h2 id="controls">Controls</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h4>View Cursor Movement</h4>
<ul>
	<li>Desktop - Mouse</li>
	<li>Mobile - Gyro / Swipe</li>
	<li>VR - Headset</li>
</ul>
</div>
<div class="col-6 col-12-medium">
<h4>Click &amp; Selection</h4>
<ul>
	<li>Desktop - Fuse Click (Hover for 2sec)</li>
	<li>Mobile - Fuse Click (Hover for 2sec)</li>
	<li>VR - Fuse Click (Hover for 2sec)</li>
</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<h2 id="what-to-do">What to Do</h2>
<p>Use the View Cursor to look around the 360 environment and <strong>Hover</strong> over a floating bubble. This will pause the orbit rotation for all bubbles.  Continue to hover over that bubble for <strong>2 seconds</strong> 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.</p>

<!-- Line Break -->
<hr />

<div class="row">
<div class="col-12 col-12-medium">
<h2 id="components">Components</h2>
<h4>Built</h4>
<ul class="alt">
	<li><strong>orb-expanding : </strong>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.</li>
	<li><strong>sky-fix : </strong>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.</li>
	<li><strong>center-sky-fix : </strong>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.</li>
	<li><strong>orbit-user : </strong>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.</li>
</ul>
<h4>Public</h4>
<ul>
	<li><a href="https://github.com/aframevr/aframe/" target="_blank">A-Frame 1.3.0</a></li>
	<li><a href="https://github.com/n5ro/aframe-extras" target="_blank">A-Frame Extras 6.1.0 </a></li>

</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>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.</p>

</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>It was mostly just figuring out the method and types of variables that A-Frame would accept changes from Javascript for dynamic animations.</p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>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.</blockquote>
<!-- Line Break -->
<hr />

<div class="row">
<h2>Thank you for your time!</h2>
<li>More <a href="https://dev.to/mintycrisp">Dev</a> Articles</li>
<li>My homepage <a href="https://mintycrisp.com" target="_blank" >mintycrisp.com</a></li>
<li>View my <a href="https://github.com/Minty-Crisp" target="_blank" >Github</a> Repositories</li>
<li>Peruse my <a href="https://twitter.com/minty_crisp" target="_blank" >Tweets</a></li>
<li><a href="https://ko-fi.com/mintycrisp" target="_blank" >Ko-fi</a> tips if you enjoy my work</li>
<h2> - Minty Crisp ^-^</h2>
<a href="https://mintycrisp.com/xr-orb-sky-changer-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

<!-- End Article Text -->
</span>