A-Frame : Web XR Thunderstorm Scene w/ Teleportation Types & Overview
Tags: aframe, javascript, ux, webdev
Published: 2022-06-26 05:21:30

<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>

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

<h2 id="summary">Summary</h2>
<p>A minorly procedurally generated Thunder Storm scene with Teleportation nodes for quick movements within the 3D world and different mode types to help avoid vr sickness.</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 - Click</li>
	<li>Mobile - Tap</li>
	<li>VR - Controller Click</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 interact with a few various items in scene, most notably the <strong>colored circles</strong> on the ground. Click to a node to ready it for travel. Once ready, you may select Cancel to stop or select <strong>Teleport Here</strong> to move to that location with the currently selected move effects: <strong>instant</strong>, <strong>fade</strong>, <strong>locomotion</strong>, <strong>sphere</strong> or <strong>blink</strong>. Cycle through move effects in the center area on the <strong>blue screen</strong> by clicking it.</p>
<p>There are also a total of <strong>4 assets</strong> in the scene that are each clickable. When all are found, it unlocks a <strong>secret locomotion teleport</strong> from the center ground to high up in the sky and back.</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>rain : </strong>Generates a set of entities to recreate the visual effects of rain and ground splatter along with it's inherit randomness.</li>
	<li><strong>raindrop : </strong>Controls the rain's main animation of falling and resetting to a new random position within a set radius from the user to help simulate endless rain on movement. Aka, it's the universe doesn't like you rain cloud that follows you everywhere.</li>
	<li><strong>lightningbolt : </strong>Generates a complex set of entities that make up a Lightning Bolt visual that hits randomly within a set interval. The random hits start an animation chain to more realistically simulate the type of effect with varied blink phases and the scene lighting being affected as well.</li>
	<li><strong>scenespawner : </strong>Spawn randomized versions of and positions of a lily pond, gltf animated rigged grass, gltf tree w/ a-frame animations, rocks, fireflys w/ a-frame animations, flowers w/ a-frame animations and clouds w/ a-frame animations. All other scene objects and animations are in HTML like the sky and ground.</li>
	<li><strong>teleportation : </strong>Handles the various move types of instant, fade, locomotion, sphere and blink to move the user to the location of their choice.</li>
	<li><strong>teleport-button : </strong>Allows the user to adjust the Move Type via a blue-screen at center using an entity's properties as an accessible global variable.</li>
	<li><strong>secret-init : </strong>Sets up the Secret Teleport animations as well as the entity Global Variable for manaing Secrets Found.</li>
	<li><strong>secret-button : </strong>The required component to make an asset a clickable secret. Added to 4 total assets with feedback and when all are found, they show a new button at the center to access the secret teleport.</li>
	<li><strong>secret-teleport1 : </strong>Event Emitter for the Up animation.</li>
	<li><strong>secret-teleport2 : </strong>Event Emitter for the Down animation.</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>
	<li><a href="https://github.com/supermedium/superframe/tree/master/components/animation-timeline/" target="_blank">A-Frame Timeline 2.0.0</a></li>
	<li><a href="https://github.com/zcanter/aframe-gradient-sky" target="_blank">A-Frame Gradient Sky</a></li>
	<li><a href="https://github.com/tlaukkan/aframe-three-color-gradient-shader" target="_blank">A-Frame Three Color Gradient Shader</a></li>
	<li><a href="https://github.com/matrix-org/aframe-look-at-component" target="_blank">A-Frame Look At</a></li>
</ul>
</div>
</div>

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

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>The rain, lightning and sounds all coming together really helps sell the immersion. And The rotating alpha sky with gradient animated background as well is amazing. Created that 360 star alpha'd image in Blender and wrapped that sky entity within another color gradient sky. It animates in a rotation similar to platery star rotations as well as the gradient animates through varies colors for a cosmic light show.</p>

</div>

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

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>Manually moving the user and getting a multiple controls set up, everything else felt like cake in comparision. I spent a lot of time playing with configurations for the user, their rig and all sub entities. I was able to get a solid set up for Click, Fuse and Controller based controls that worked well on the 3 setups for desktop, mobile &amp; vr. </p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>Generating entites is amazing fun stuff and so much potential there. What this scene really helped spark in me was the importance of how the user navigates their environment or how the environment navigates around the user. This is a seemingly unlimited and non-physically restricted reality, why limit ourselves to real world travel limitations? Granted, ease of use, accessibility and someone not making that better idea yet have kept use here. We just need more experimentation.</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-thunderstorm-scene-teleportation-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

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