Introduction

Allow me to introduce myself. I am Michele Giorgi, a 36-year-old Frontend developer from Rimini, Italy. I entered this field at a time when being involved in web development meant taking on various roles: designer, developer, copywriter, SEO specialist, marketing analyst, and even sysadmin at times. As the industry progressed and roles became more specialized, I gravitated towards coding, but I still believe that limiting ourselves to one specific role is not ideal. In my opinion, a proficient web developer should have a basic understanding of design, and vice versa.

Aside from my primary job, I have always had side projects to work on. These projects have been my way of learning new things and sticking to the traditional one-man-band approach. Over the past decade, I have worked on various projects such as an iOS game, a personal website (which never went live), a WordPress form plugin, and most recently, 84—24, the project I will be discussing in this article.

Motivation

Despite the fact that WebGL has been a prominent trend in web design for quite some time and shows no signs of disappearing, I had been hesitant to delve into the technology. This hesitation stemmed from not having the right project to begin with and feeling overwhelmed by the steep learning curve. However, the perfect project presented itself when I decided to purchase and restore a 1984 Macintosh 128K, which was somewhat of an early mid-life crisis decision. During the restoration process, I realized that I wanted to document and share the journey with a wider audience. To make it accessible to as many people as possible, I decided to showcase a 3D model of the Macintosh 128K alongside the story. This model had to undergo a complete teardown during the various restoration phases.

Now, all that was left was for me to learn how to:

Create a 3D model of the Mac and its internal components
Integrate the model into a web page
Animate the model

Tech Stack

Given that my focus was on learning 3D modeling and its application in web contexts, I decided to keep my tech stack as simple as possible. I avoided additional JavaScript libraries, DOM abstraction layers, and databases. I began with a blank index.html file and used Parcel.js as my build tool.

My tech stack included: