For two weeks, I gave myself a simple challenge: merge my two favorite mediums, 3D and the Web. The goal was to build a fictional sunglasses store called ALL SHADE, and create a 3D mascot for it from scratch.
The first step was designing the character, Anna. I started the old-school way, sketching her out on a notepad from different angles and in a few quick poses until her look felt right.
It took me about 3-4 days to model, texture, and rig Anna.
After the model was completed, I built a barebones Three.js scene with live, configurable camera, lighting, and material controls. That scene lived inside a mock website template I created for ALL SHADE.
From there, I built two pages, each with its own Three.js moment:
Interactive landing page character viewer
A playful landing page where Anna’s head follows your mouse cursor, plus secondary motion dynamics that drive her hair so it wobbles naturally as her head pivots.
“Place Order” celebration animation
A quick little surprise after you click the Place Order button. The UI clears out, Anna pops into view, and she celebrates with levitating sunglasses around her.
As a final challenge, I set a strict timer: create four loading animations in 60 minutes total. It was chaotic and forced me to move fast with almost no time to overthink, which made it a really fun mini sprint.
Overall, ALL SHADE was a great learning project and a solid excuse to stress-test a bunch of technical skills in one tight timeframe.
Here’s a quick breakdown of what this project touched:
- 3D modeling
- UV unwrapping and texturing
- Rigging and weight painting
- Lighting
- Web programming (JavaScript, React, Three.js)
- UI and UX design
- Logo creation
