Web app for understanding how a PC is built: it takes its components apart in 3D, from the processor to the power supply, and puts them to work, with temperatures, power draw and clock speeds changing in real time. Eight components, ninety parts explained one by one and, in the background, each one's assembly line. It runs entirely in the browser, with three.js.
**Banco Hardware 3D** (Italian for "hardware workbench") is a personal project of mine: a virtual workbench where the components of a PC come apart down to the last layer and then get to work. The models are made up, like the NX-9 1490K processor or the BH Prisma 7080 graphics card, but the sizes and figures are those of today's hardware: the ATX form factor, DDR5, the 253 W limit of a desktop processor.
**What it does**
- **Eight components in 3D**: processor, CPU cooler, motherboard, DDR5 RAM, graphics card, power supply, NVMe SSD and the complete PC in its case. You can turn them, pull them apart in the exploded view and look at them from four viewpoints, down to the processor's die. - **Ninety parts explained**: clicking a part brings it into focus and opens its card, with what it does, its specifications and a detail worth knowing. - **The assembly line**: in the background each component is built step by step, 92 steps in all, such as the 250 °C reflow that solders the processor's die. - **How it works**: five workloads, from "Inattivo" (idle) to "Stress AVX". Temperature, power, clock speed and voltage move together, the 16 cores show their load and frequency, and inside one core a six-stage pipeline runs an assembly loop. - **A simulation for each component**: heat flowing from the die to the air, current through the motherboard's power phases, the 32 banks of a DRAM chip, the bottleneck between processor and graphics card, the SSD's 16 NAND dies with their SLC cache, the air flowing through the case. With the 450 W power supply, a spike from the graphics card trips the protection and the power supply shuts down.
**The hard part**
There isn't a single 3D file or image on the site: every part is built in code, and the circuit traces, the labels and the map of the die are drawn on canvas with a fixed-seed random generator, so every visit sees the same circuits. The site's own code weighs 110 KB compressed, three.js another 209. The simulation says where it simplifies: the pipeline is slowed down about a billion times, and the cooler has a quarter of its real mass, so you don't wait minutes for it to warm up.
Plain JavaScript with no framework and three.js in the browser; a small Node server with no dependencies serves the pages compressed, with a Content Security Policy listing the script hashes, in a read-only container on my own server.
Design, full-stack development and deployment · 2026
three.js, JavaScript, Node.js, HTML, CSS