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!
- Minty Crisp ^-^
Top comments (0)