Esperimento Three.js · Geometria procedurale

Un disegno a mano diventa un videogioco

Il robot del foglio è ricostruito pezzo per pezzo con primitive 3D: nessuna mesh importata, nessuna texture. Si muove nella scena, cammina, ride e sa afferrare la scatola di cartone.

La storia Comandi Codice su GitHub

66mesh procedurali
0texture
10stati animati

La spalla

Dal foglio al videogioco

Quattro passaggi, ogniuno verificato nel browser: il disegno, la geometria, il rig animato e infine il gioco con controller, scatola e regia cinematografica.

Il foglio di partenza: matita a pastello, contorni tratteggiati e colori a tempera.
01
Il disegno

Testa a televisore, antenne a sfera, braccia aperte a V con pinze a “C”, torso blu con quadrante rosso e pannello a quattro pulsanti, cosce lavanda e tibie a bande. Ogni elemento del foglio è diventato una specifica di costruzione.
- proporzioni
- palette
- articolazioni
La ricostruzione: 66 mesh generate a runtime, contorni neri in stile disegno.

02
La geometria

RoundedBoxGeometry per cranio e arti, cilindri per giunti e collo, sfere per occhi e ginocchi, un TorusGeometry ad arco per la pinza “C” e un’ExtrudeGeometry per il profilo trapezoidale del torso. I contorni sono una seconda passata di mesh con side: BackSide.
Il rig: busto, gomiti e ginocchi come pivot, IK a due ossa per le braccia.

03
Il rig animato

Dieci stati (idle, walk, laugh, wave, approach, reach, grab, lift, carry, place) pilotati da una macchina a stati a passo fisso a 60 Hz. Le braccia usano l’IK analitica a due ossa per afferrare la scatola, il busto si inclina per raggiungere il terra.
Il videogioco: muovimento libero, scatola da trasportare e regia cinematografica.

04
Il videogioco

Tastiera, touch e gamepad alimentano lo stesso controller; la camera segue il robot e, in modalità Cinema, cambia inquadratura in base allo stato (primo piano per la risata, campo basso per la scatola). Il tutto gira a 60 fps senza asset esterni.