DEV Community 👩‍💻👨‍💻

Cover image for A-Frame : Web XR Asset Color Customization & Overview
Minty Crisp
Minty Crisp

Posted on

A-Frame : Web XR Asset Color Customization & Overview

Table of Contents

What to Do
Future Builds

Open Demo >

Open JS File >


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.


Orbit Cursor Movement

  • Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out
  • Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out

Click & Selection

  • Desktop - Click
  • Mobile - Tap

What to Do

Use the Orbit Cursor to move around the 3D skateboard to preview it from all angles. Use the HTML buttons to adjust the color selection for each of the 5 sets of parts. You can also hit the Randomize button to randomly pick a color for each of the part sets.



  • system : Handles the collection of assets by part class and the assigning of colors via button selections as well as the randomize feature.



The randomize function is satisying to cycle through the many variations.


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

What I want to build upon this, in the future...

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.

Thank you for your time!

  • More Dev Articles
  • My homepage
  • View my Github Repositories
  • Peruse my Tweets
  • Ko-fi tips if you enjoy my work
  • - Minty Crisp ^-^

    Top comments (0)

    🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

    It's a scientific fact.