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

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >


Summary

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.


Controls

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.


Components

Built

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

Public


Favorites

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


Difficulties

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.


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 mintycrisp.com
  • 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.