Aplicación web para entender cómo está hecho un PC: desmonta en 3D sus componentes, del procesador a la fuente de alimentación, y los pone a trabajar, con temperaturas, consumo y frecuencias que cambian en tiempo real. Ocho componentes, noventa piezas explicadas una a una y, al fondo, la línea de montaje de cada uno. Funciona entera en el navegador, con three.js.
**Banco Hardware 3D** («banco de hardware» en italiano) es un proyecto personal: un banco de trabajo virtual donde los componentes de un PC se desmontan hasta la última capa y luego se ponen a trabajar. Los modelos son inventados, como el procesador NX-9 1490K o la tarjeta gráfica BH Prisma 7080, pero las medidas y las cifras son las del hardware actual: el formato ATX, la DDR5, el límite de 253 W de un procesador de sobremesa.
**Qué hace**
- **Ocho componentes en 3D**: procesador, disipador, placa base, RAM DDR5, tarjeta gráfica, fuente de alimentación, SSD NVMe y el PC completo en su caja. Se giran, se abren con la vista explosionada y se observan desde cuatro ángulos, hasta el die del procesador. - **Noventa piezas explicadas**: un clic en una pieza la enfoca y abre su ficha, con para qué sirve, sus datos técnicos y un detalle que conviene saber. - **La línea de montaje**: al fondo, cada componente se construye paso a paso, 92 pasos en total, como la refusión a 250 °C que suelda el die del procesador. - **El funcionamiento**: cinco cargas de trabajo, de «Inattivo» (en reposo) a «Stress AVX». Temperatura, potencia, frecuencia y tensión se mueven juntas, los 16 núcleos muestran su carga y su frecuencia, y dentro de un núcleo el pipeline de seis etapas ejecuta un bucle en ensamblador. - **Una simulación por componente**: el calor que pasa del die al aire, la corriente en las fases de la placa base, los 32 bancos de un chip DRAM, el cuello de botella entre procesador y tarjeta gráfica, los 16 dies NAND del SSD con su caché SLC, el aire que atraviesa la caja. Con la fuente de 450 W, un pico de la tarjeta gráfica hace saltar la protección y la fuente se apaga.
**La parte difícil**
En el sitio no hay ni un archivo 3D ni una imagen: cada pieza se construye con código, y las pistas de los circuitos, las serigrafías y el mapa del die se dibujan en canvas con un generador aleatorio de semilla fija, así que cada visita ve los mismos circuitos. El código del sitio pesa 110 KB comprimido, three.js otros 209. La simulación dice dónde simplifica: el pipeline va unos mil millones de veces más lento, y el disipador tiene una cuarta parte de su masa real, para no esperar minutos a que se caliente.
JavaScript sin framework y three.js en el navegador; un pequeño servidor Node sin dependencias sirve las páginas comprimidas, con una Content Security Policy que enumera los hashes de los scripts, en un contenedor de solo lectura en mi servidor.
Diseño, desarrollo full-stack y publicación · 2026
three.js, JavaScript, Node.js, HTML, CSS