A-Frame : Web XR Asset Color Customization & Overview
Tags: aframe, javascript, ux, webdev
Published: 2022-06-26 05:32:55

<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-asset-color-customization-aframe-fullscreen-share.html" target="_blank">Open Demo &gt;</a></h3>
<h4><a href="https://github.com/Minty-Crisp/mintycrispblog/blob/main/assets/js/assetcolorcustom.js" target="_blank">Open JS File &gt;</a></h4>
<!-- Line Break -->
<hr />

<h2 id="summary">Summary</h2>
<p>Customize a skateboard's color scheme in 3D by adjusting the board, the wheels and each of the 3 main truck parts individually or cycle through random variations instead.</p>
<!-- Line Break -->
<hr />
<h2 id="controls">Controls</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h4>Orbit Cursor Movement</h4>
<ul>
	<li>Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out</li>
	<li>Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out</li>
</ul>
</div>
<div class="col-6 col-12-medium">
<h4>Click &amp; Selection</h4>
<ul>
	<li>Desktop - Click</li>
	<li>Mobile - Tap</li>
</ul>
</div>
</div>


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

<h2 id="what-to-do">What to Do</h2>
<p>Use the Orbit Cursor to move around the 3D skateboard to preview it from all angles. Use the HTML buttons to adjust the <strong>color selection</strong> for each of the <strong>5 sets of parts</strong>. You can also hit the <strong>Randomize button</strong> to randomly pick a color for each of the part sets.</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>system : </strong>Handles the collection of assets by part class and the assigning of colors via button selections as well as the randomize feature.</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/orbit-controls" target="_blank">A-Frame Orbit Controls </a></li>
</ul>
</div>
</div>

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

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>The randomize function is satisying to cycle through the many variations.</p>
</div>

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

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>This was a pretty straight forward scene although it became obvious the more simple a scene was, the more impressive the model needs to be. With the help of other talented artists at blendswap.com/ I was able to find a good starting point and spent a large chunk of development time just prepping the 3D model. If you have 5 hours to cut down a tree, spend the first 3 hours sharpening your axe essentially.</p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>Add support for immersive VR to play around with the model and make selections, but also AR support. Not just to let it float in the scene which is just no background with A-Frame AR, but to actually orientate it and stick it to the user's hand / the floor / wall etc... Supporting additional assets that are ideally based on or scanned from real world objects and allowing further more detailed part customizations. </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-asset-color-customization-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

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