Web-App, die zeigt, wie ein PC aufgebaut ist: Sie zerlegt seine Komponenten in 3D, vom Prozessor bis zum Netzteil, und lässt sie arbeiten – Temperaturen, Verbrauch und Taktraten ändern sich in Echtzeit. Acht Komponenten, neunzig einzeln erklärte Teile und im Hintergrund das Fließband jeder Komponente. Läuft komplett im Browser, mit three.js.
**Banco Hardware 3D** (italienisch für „Hardware-Werkbank“) ist ein persönliches Projekt: eine virtuelle Werkbank, auf der die Komponenten eines PCs bis zur letzten Schicht zerlegt werden und dann an die Arbeit gehen. Die Modelle sind erfunden, wie der Prozessor NX-9 1490K oder die Grafikkarte BH Prisma 7080, aber Maße und Zahlen sind die heutiger Hardware: der ATX-Formfaktor, DDR5, das 253-W-Limit eines Desktop-Prozessors.
**Was sie kann**
- **Acht Komponenten in 3D**: Prozessor, CPU-Kühler, Mainboard, DDR5-RAM, Grafikkarte, Netzteil, NVMe-SSD und der komplette PC im Gehäuse. Man dreht sie, zieht sie in der Explosionsansicht auseinander und betrachtet sie aus vier Blickwinkeln, bis hinunter zum Die des Prozessors. - **Neunzig erklärte Teile**: Ein Klick auf ein Teil stellt es scharf und öffnet seine Karte, mit seiner Aufgabe, den technischen Daten und einem Detail, das man wissen sollte. - **Das Fließband**: Im Hintergrund wird jede Komponente Schritt für Schritt gebaut, 92 Schritte insgesamt, etwa das Reflow-Löten bei 250 °C, bei dem der Die des Prozessors aufgelötet wird. - **Der Betrieb**: fünf Lastprofile, von „Inattivo“ (Leerlauf) bis „Stress AVX“. Temperatur, Leistung, Takt und Spannung bewegen sich gemeinsam, die 16 Kerne zeigen Last und Takt, und in einem Kern führt die sechsstufige Pipeline eine Assembler-Schleife aus. - **Eine Simulation pro Komponente**: die Wärme auf dem Weg vom Die in die Luft, der Strom in den Phasen des Mainboards, die 32 Bänke eines DRAM-Chips, der Flaschenhals zwischen Prozessor und Grafikkarte, die 16 NAND-Dies der SSD mit ihrem SLC-Cache, die Luft, die durch das Gehäuse strömt. Mit dem 450-W-Netzteil löst eine Lastspitze der Grafikkarte die Schutzschaltung aus, und das Netzteil schaltet ab.
**Der schwierige Teil**
Auf der Seite gibt es keine einzige 3D-Datei und kein Bild: Jedes Teil wird im Code gebaut, und Leiterbahnen, Beschriftungen und die Karte des Dies werden mit einem Zufallsgenerator mit festem Startwert auf Canvas gezeichnet, sodass jeder Besuch dieselben Schaltungen sieht. Der Code der Seite wiegt komprimiert 110 KB, three.js weitere 209. Die Simulation sagt, wo sie vereinfacht: Die Pipeline läuft etwa eine Milliarde Mal langsamer, und der Kühler hat ein Viertel seiner echten Masse, damit man nicht minutenlang warten muss, bis er warm wird.
JavaScript ohne Framework und three.js im Browser; ein kleiner Node-Server ohne Abhängigkeiten liefert die Seiten komprimiert aus, mit einer Content Security Policy, die die Hashes der Skripte auflistet, in einem schreibgeschützten Container auf meinem Server.
Konzeption, Full-Stack-Entwicklung und Veröffentlichung · 2026
three.js, JavaScript, Node.js, HTML, CSS