A-Frame : Web XR Hub Home, UI, Locomotion & Overview
Tags: aframe, javascript, ux, webdev
Published: 2022-06-26 05:26:01

<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-basic-hub-ui-themes-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 minor procedurally generated Thunder Storm scene with Teleportation Nodes for quick movements within the 3D world and different types of motions 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>

<div class="row">
<div class="col-6 col-12-medium">
<h4>Locomotion Controls (Hover Only)</h4>
<ul>
	<li><strong>Top Thick Bar</strong> Go Forward</li>
	<li><strong>Mid Skinny Bar</strong> Go Backward</li>
	<li><strong>Bottom Bar Chunks</strong> Swap Speed Modes (Fast / Slow)</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 the transparent <strong>locomotion controls</strong> surronding you to move around the world. When moving, assets will respawn when you move too far away from them. You can also interact with the <strong>Settings</strong>, <strong>Theme Screen</strong> and <strong>Play/Pause buttons</strong> via clicks. You can click to change the basic theme from the Settings button and Theme Screen. There's no real special configuration for the scene links, but I also added a few connections between other various scenes to travel between.</p>

<h3>Locomotion Operation </h3>
<p>In it's default mode, the 2 main control bars will be near level to the user's eyesight. <strong>Hover</strong> over either bar with the cursor to activate it. The <strong>top thick bar</strong> will move the user <strong>forward</strong> in the direction the cursor is facing. The <strong>thinner bar right below</strong> will move the user in <strong>reverse</strong> of the cursor's direction. At the very bottom are <strong>4 small blocks </strong> which when <strong>Hovered</strong> over will swap the speeds from <strong>Fast</strong> to <strong>Slow</strong> as well as move the forward / reverse bars out of the main viewport. <strong>Hover</strong> over the bars to move slowly and fine tune your position. <strong>Hover</strong> now over 1 of the 4 now red blocks to to swap speeds and bar position again.</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>variable-init : </strong>Sets a global variable on the user's entity for the current theme color selection. </li>
	<li><strong>attach : </strong>Allows attaching of any entity in the scene to another entity in the scene by id. Used to attach the below belt component to the user.</li>
	<li><strong>belt : </strong>All controls to handle the locomotion movement of a player with only hover needing to activate. Can move the player forward or backward at 1 default speed or the user can switch the belt layout to a slower speed and have it adjusted out of the main view area, but still allow slow movement for fine tuning.</li>
	<li><strong>spawnmediabuttons : </strong>Grabs various assets declared in the scene specifically obj models to be combined with A-Frame materials to recreate a media player.</li>
	<li><strong>themechangebutton : </strong>Media buttons spawned with A-Frame materials as well as other marked materials allow their colors to be changed through the Setting Icon clicked and from the Theme Screen popped up to adjust the selections there.</li>
	<li><strong>playpausebutton : </strong>Changes the visibility of the companion assets that would act a media player responding to the available commands for play and pause.</li>
	<li><strong>settingsbutton : </strong>Enables the visibility of the Theme Screen on and off.</li>
	<li><strong>canvas-test : </strong>A Basic test using the HTML Canvas as a material within XR. Entities with this material are also tests for a public A-Frame Mesh Instance component.</li>
	<li><strong>environmentspawnwithuser : </strong>The true monster component of them all. This handles the most updated version of my asset generation and placement within A-Frame via Javascript as well as now respawning with the user as they move out of range from the originally spawned location to where the user is heading.</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>
	<li><a href="https://github.com/diarmidmackenzie/instanced-mesh" target="_blank">A-Frame Instanced Mesh 0.5.0</a></li>
</ul>
</div>
</div>

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

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>The belt locomotion machine and animations were super fun to play with. Just a simple hover almost like a swipe to transform your mech for various functions is just too cool. XR could even be used as a good way to prototype IRL improvements for the handicapped and physically disabled. Hell, simply integrating an AR version of movement control via various inputs could be a life changer for some.</p>
</div>

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

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>Having the assets generally respawn in the user's view and current travel direction took a lot of re-iteration. Had many approaches setup depending on the XZ grid the user is looking through and/or which direction they are traveling.</p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>A user component to handle all of their preferences within a larger hub of linked A-Frame scenes. Storing the user preferences and transferring them from 1 page to the next. Much easier on the same domain, but could be accomplished otherwise with a shared api connection or with a common cookie etc... This will allow scenes that pre-approve of this component add-on to have users visit the page and not have to reconfigure their interaction setup. Are they a hover / fuse click user that needs swiped based teleportation or are they a full vr user with 2 6DoF controllers who slowly glides around. Components like these will help lower the entry bar for both devs and new potential users. </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-basic-hub-ui-themes-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

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