/3D-Model-Playground

A web page that showcases interactive 3D models using the <model-viewer> element. Explore different models and learn how to use the element's attributes and properties. Try it out or fork the repo and add your own models.

Primary LanguageCSS

3D Model Playground

Featuring an AR view option on mobile devices and some easy to use controls that allow the user to manipulate the model to their liking, this project was ideal to practice my skills.

How it Started

Inspired by the book "So Good They Can't Ignore You" by Cal Newport I set at this project with the idea to do some deliberate practice. I came across an article about embedding 3D Models in webpages and decided to do a close study on the subjet.

The Process

As I was studying the page and implementing what I learned in a webpage, I decided to make an entire separate project out of this. First I just embedded the 3D Model but then I discovered some of the features made possible with on their website. Straight away I started playing around, trying to implement the color-changing feature. Later I also added the texture changing sliders.

Learning

I documented all my learning on a notion page, carefully noting down what I knew my future questions would be. I also wrote a short overview on how to implement . This outline can be found below. I learned several basic features of as well as some more JS methods.

Implementation

This additional skill will give me a slight edge to other self-taught junior devs.

Credits