Come pubblicare un gioco 3D su Vercel questo fine settimana (con competenze IA)

Vibe Skills

Sfoglia centinaia di abilità pronte all'uso per Claude, Cursor e altro ancora.

Esplora le Abilità

Inizia Gratis Ora

Lancia un Gioco 3D su Vercel entro Domenica Sera: Il Playbook di Deploy in 48 Ore

Puoi passare da un venerdì sera vuoto a un link tuo-gioco.vercel.app entro la cena della domenica. Lo stack è Three.js, Cursor, una competenza AI da Vibe Skills, e il piano gratuito di Vercel. Costo totale per il fine settimana: $0. Infra totale di cui devi occuparti: anche zero.

Questo non è "costruisci un prototipo sul tuo laptop e chiamalo finito". Questo è un URL pubblico che chiunque nel mondo può aprire in un browser, con HTTPS, caching edge e un dominio personalizzato se ne vuoi uno. La competenza AI fornisce lo scaffolding Three.js e un vercel.json funzionante. Cursor gestisce il ciclo di iterazione. Vercel gestisce il deploy. Tu gestisci il design.

Questa guida è per sviluppatori indie, vibe coder, partecipanti a hackathon e chiunque sia stanco di schede localhost:5173 sem finite. Copriamo perché questo stack funziona, l'anatomia del deploy in 48 ore, cinque competenze per giochi 3D costruite per il flusso di lavoro e il passo dopo passo da venerdì a domenica.

Vibe Skills

Sfoglia centinaia di abilità pronte all'uso per Claude, Cursor e altro ancora.

Esplora le Abilità

Inizia Gratis Ora

Perché Vercel + Three.js + Competenze AI È lo Stack per Sviluppatori Solitari

Vercel è il target di deploy più pigro possibile per un gioco Three.js. Fai un push su GitHub, Vercel se ne accorge, compila il progetto e ti restituisce un URL entro 60 secondi. Nessun server da predisporre, nessun file Docker, nessuna configurazione NGINX, nessuna configurazione SSL. Il bundle Three.js è solo asset statici HTML, JS e WebGL, che è esattamente ciò che la rete edge di Vercel è stata costruita per servire.

Il piano gratuito copre comodamente un lancio nel fine settimana:

• 100 GB di larghezza di banda al mese. Una build Three.js da 5 MB con 10.000 riproduzioni sono 50 GB. Finirai il fine settimana prima di finire la larghezza di banda.
• Deploy statici illimitati con HTTPS e un sottodominio *.vercel.app.
• Supporto per domini personalizzati sul piano gratuito - porta il tuo nome-gioco.com se ne hai uno, altrimenti l'URL gratuito vercel.app è condivisibile su ogni piattaforma social.
• Anteprime di deploy per ogni commit - ogni push ottiene il proprio URL, quindi puoi condividere una build con un amico e continuare a iterare senza romperla.

Aggiungi una competenza AI da Vibe Skills e anche il boilerplate scompare. La configurazione della scena Three.js, il controller del giocatore, la pipeline di build e un vercel.json pronto per Vercel vengono generati con un solo comando. Poi Cursor trasforma il resto del fine settimana in una chat dove descrivi il gameplay che desideri e ottimizzi l'output. Questo è lo stack completo: una competenza del marketplace per le fondamenta, un editor AI per l'iterazione e Vercel per il deploy. Solitario, gratuito e veloce.

Vibe Skills

Sfoglia centinaia di abilità pronte all'uso per Claude, Cursor e altro ancora.

Esplora le Abilità

Inizia Gratis Ora

Anatomia del Deploy in 48 Ore: Dalla Concetto del Venerdì al Deploy della Domenica

Ogni lancio del fine settimana che va effettivamente online segue le stesse fasi. Il trucco è pianificare il deploy il venerdì, non la domenica pomeriggio, in modo che le ultime sei ore siano dedicate alla rifinitura invece che a combattere un errore di compilazione.

Il motivo per cui questo funziona è il push del venerdì su Vercel. Una volta che l'URL esiste, ogni commit di sabato e domenica viene deployato automaticamente. Non c'è "panico da deploy della domenica sera" perché il deploy è già avvenuto il venerdì ed è andato in autonomia per tutto il fine settimana.

Come Si Presenta il "Vibe Coding" di un Gioco 3D su Vercel

Vibe coding significa descrivere ciò che desideri in inglese semplice e lasciare che un editor AI scriva il codice, quindi iterare sull'output. Per un gioco Three.js su Vercel, il ciclo è insolitamente pulito: ogni modifica in Cursor è a un pnpm dev di distanza dal feedback locale, poi a un git push di distanza da un URL di anteprima live, poi deployato automaticamente in produzione su main.

Un fine settimana di gioco Vercel in vibe coding si presenta così:

1. Apri la cartella starter della competenza in Cursor.
2. Descrivi una funzionalità in chat: "doppio salto se si preme spazio due volte entro 200ms".
3. Cursor modifica il file del controller. Salva. pnpm dev ricarica. Senti il salto nel browser.
4. Se ti sembra giusto, git push. Vercel compila un URL di anteprima. Invia a un amico.
5. Esegui il merge su main quando il "feel" è bloccato. L'URL di produzione si aggiorna entro 60 secondi.

L'AI fa la digitazione. Vercel fa il deploy. Tu fai il "feel" e il design.

5 Competenze AI per Giochi 3D che Rendono Possibile Questo su Vibe Skills

Queste competenze sono costruite per il flusso di lavoro del fine settimana Vercel + Three.js + Cursor. Ognuna fornisce un progetto Three.js basato su Vite, un vercel.json funzionante, un pnpm build che produce un bundle statico che Vercel può servire dall'edge, e un percorso di deploy testato. Tutte sono nella categoria 3D Games su Vibe Skills.

1. Starter per Giochi Three.js + Vercel

La scelta predefinita. Genera una scena Three.js con un controller del giocatore, una telecamera in terza persona, un rig di illuminazione, uno skybox e un piano di terra con collisioni. Fornisce un vercel.json che imposta le intestazioni di caching corrette per i bundle di asset Three.js. pnpm dev viene eseguito localmente; un clic nella dashboard di Vercel collega il repository GitHub e hai un URL live.

Ideale per: qualsiasi genere tranne i 2D puri. Usalo se non sai ancora cosa stai costruendo.

2. First-Person Vercel Walker

Un controller in prima persona rifinito (WASD + blocco puntatore mouse + gravità + sprint + salto) con hook per i passi, head-bob e un vercel.json che gestisce correttamente le intestazioni CSP per il blocco puntatore. Questo dettaglio mette in difficoltà molti sviluppatori solitari in produzione. La competenza lo risolve per te.

Ideale per: walking simulator, prototipi horror, giochi narrativi, mostre museali.

3. Browser Arena Shooter Kit

Un'arena dall'alto (controller twin-stick, generatore di ondate, IA nemica base, sistema di proiettili, HUD punteggio) con una build ottimizzata per Vercel che comprime gli asset, divide il codice dell'IA e carica la musica in modo asincrono. Include hook multiplayer; il fine settimana fornisce il single-player.

Ideale per: sparatutto arcade, bullet hell, partecipazioni a jam che devono caricarsi velocemente su mobile.

4. Vercel Puzzle Platformer

Un platformer in terza persona (salto variabile, coyote time, rilevamento sporgenze), checkpoint, tre livelli stub che puoi modificare in Blender o nel codice e un ciclo di respawn. Il vercel.json è configurato per ricaricamenti istantanei dei livelli memorizzati nella cache dall'edge, quindi il playtesting è reattivo su un telefono.

Ideale per: puzzle platformer, prototipi parkour, esperimenti di level design.

5. Vercel Driving Sandbox

Feel di guida arcade (curva di accelerazione, fisica del drift, lag della telecamera, terreno base) con un'auto low-poly, un template di pista e un deploy ottimizzato per grandi mesh di terreno. Le intestazioni HTTP preimpostate fanno avviare il contesto WebGL più velocemente su Safari, storicamente il browser più lento per Three.js.

Ideale per: corse arcade, guida fuoristrada, demo di "car feel" per un portfolio.

Sfoglia tutte le competenze per giochi 3D su Vibe Skills →

Passo Dopo Passo da Venerdì a Domenica

Questo è il programma esatto. Modifica l'ora di inizio, ma mantieni l'ordine. La pietra miliare chiave è il deploy Vercel del venerdì sera. Tutto il resto è iterazione.

Venerdì 18:00 - 20:00: Scegli la Competenza, Fai il Push su GitHub, Collega Vercel

Passo 1: Scegli una competenza di gioco 3D su Vibe Skills. Sfoglia la categoria 3D Games, scegli quella che corrisponde al tuo genere e installa lo starter in una cartella nuova di zecca. Aprila in Cursor. Dovresti vedere una scena Three.js con un giocatore in movimento entro le 19:00.

Passo 2: Crea un repository GitHub e fai il push. git init, git remote add, git push. Usa lo slug del tuo gioco come nome del repository (crystal-runner, lunar-fishing, qualsiasi cosa). Il nome del repository diventa spesso il tuo URL.

Passo 3: Collega il repository a Vercel. Accedi a Vercel con GitHub (gratuito), clicca su "Add New Project", scegli il repository. Vercel rileva automaticamente Vite e configura la compilazione. Clicca su Deploy. Entro 60 secondi avrai un URL crystal-runner.vercel.app. Aprilo sul tuo telefono. Condividilo con un amico. La barra di deploy è ora a zero per il resto del fine settimana.

Venerdì 20:00 - 22:00: Scrivi il Documento di Design

Passo 4: Rispondi a cinque domande in inglese semplice. Apri una pagina Notion o un file markdown all'interno del repository e rispondi:

• Cosa sta facendo il giocatore ogni 5 secondi? (il loop principale)
• Qual è la condizione di vittoria e la condizione di sconfitta?
• Quanto dura un round o un livello?
• Qual è il "gancio" visivo? (palette, illuminazione, riferimento di stile)
• Qual è l'unica funzionalità che rende questo memorabile in 30 secondi?

Passo 5: Esegui il commit del documento di design. Invia al repository. Vercel ridistribuirà. La disciplina di inviare ogni modifica significativa mantiene onesto l'URL live.

Sabato 9:00 - 13:00: Costruisci la Meccanica Principale

Passo 6: Sostituisci la meccanica segnaposto con la tua unica funzionalità. Questa è l'unica funzionalità che conta. Usa la chat di Cursor per descriverla ("quando il giocatore raccoglie un cristallo, congela i nemici vicini per 2 secondi e riproduci un ronzio"). Itera localmente con pnpm dev. Quando ti sembra giusto, fai il push.

Passo 7: Collega lo stato di vittoria/sconfitta. Una build di 60 secondi con una vera fine sembra un gioco. Una build di 60 minuti senza fine sembra una demo tecnica. Collega sempre prima la schermata di vittoria, poi tutto il resto.

Sabato 13:00 - 20:00: Aggiungi un Livello

Passo 8: Costruisci un livello rifinito. Non tre mezzi-cotta. Usa cubi segnaposto per la geometria. Usa il personaggio stock della competenza. Sintonizza il "feel" - altezza del salto, lag della telecamera, intensità delle particelle.

Passo 9: Aggiungi un overlay tutorial. Un popup di due frasi "WASD per muoverti, clicca per sparare" al primo avvio salva il tuo lancio da giocatori confusi che si arrendono in 8 secondi. Cursor può generare l'overlay React (o DOM vanilla) in 30 secondi.

Passo 10: Fai il push ogni ora. Ogni push ottiene un URL di anteprima Vercel. Invia ciascuno a un amico. Il ciclo di feedback è l'arma segreta di questo stack.

Domenica 10:00 - 16:00: Rifinitura

Passo 11: Aggiungi tre suoni. Loop di passi, pad ambientale, nota di vittoria. Anche tre suoni sollevano notevolmente un prototipo del fine settimana. Fonti gratuite: freesound.org, opengameart.org.

Passo 12: Aggiungi "juice". Particelle all'impatto, scuotimento dello schermo all'impatto, popup di numeri al punteggio. Il "juice" è ciò che fa sembrare una build di 48 ore una di 6 mesi in una GIF. Chiedi a Cursor di aggiungere "uno scuotimento dello schermo di intensità 0.3 per 150ms quando il giocatore subisce danni" - scriverà l'hook di scuotimento della telecamera in cinque secondi.

Passo 13: Esegui un passaggio di Lighthouse. Apri l'URL Vercel su un telefono ed esegui Chrome DevTools Lighthouse. I bundle Three.js sono solitamente tra 400 KB e 1,5 MB. Se sei oltre 3 MB, chiedi a Cursor di abilitare lo code splitting sui moduli pesanti. Gzip e brotli di Vercel faranno il resto.

Passo 14: Passaggio di controllo bug. Gioca al tuo URL live cinque volte di seguito. Correggi tutto ciò che si rompe due volte. Ignora tutto ciò che si rompe una volta.

Domenica 16:00 - 20:00: Lancio

Passo 15: (Opzionale) Imposta un dominio personalizzato. Se hai acquistato un nome-gioco.com in anticipo, aggiungilo nelle impostazioni del progetto di Vercel. SSL è automatico. Altrimenti, l'URL *.vercel.app va bene - ha HTTPS, è condivisibile e si carica ovunque.

Passo 16: Registra una GIF di 15 secondi del momento migliore. Usa l'URL live, non localhost. La GIF è ciò che ottiene clic su Twitter, Bluesky e Reddit.

Passo 17: Crea una pagina itch.io (opzionale ma ad alto rendimento). Titolo, slogan di una riga, tre screenshot, la GIF, controlli, crediti e un embed del tuo iframe *.vercel.app (itch.io supporta gli embed iframe per giochi HTML5). Ora hai due URL - uno per la condivisione occasionale e uno per il pubblico dei giocatori.

Passo 18: Pubblica il link. Twitter, Bluesky, il tuo Discord della community di sviluppatori, r/IndieDev, r/threejs, r/WebGames. Inizia sempre con la GIF. Includi sempre l'URL. Se hai utilizzato una competenza Vibe Skills, menzionalo nel post del devlog - altri sviluppatori che ti seguono vorranno lo stesso starter.

Come Evitare i Tre Fallimenti di Deploy Vercel Più Comuni

Tre cose rompono quasi ogni gioco Three.js + Vercel di un fine settimana solitario. Tutte e tre sono correzioni da 5 minuti se le cogli venerdì sera, e tunnel da coniglio da 5 ore se le scopri la domenica alle 19:00.

• Directory di output di build errata. Vite predefinisce dist/. Vercel rileva automaticamente Vite e usa dist/. Se hai personalizzato l'output, imposta outputDirectory in vercel.json o nelle impostazioni del progetto o il tuo deploy sarà un 404.
• Percorsi degli asset che funzionano localmente ma danno 404 in produzione. Usa percorsi relativi o l'helper Vite import.meta.env.BASE_URL per qualsiasi file GLB, texture o audio caricato a runtime. I percorsi codificati /assets/... di solito funzionano, ma i percorsi assoluti di Windows copiati e incollati assolutamente no.
• Intestazioni CSP che bloccano il puntatore o il contesto audio. I giochi in prima persona necessitano del blocco del puntatore. L'audio richiede l'attivazione tramite gesto dell'utente. Qualsiasi competenza della categoria 3D Games fornisce il blocco headers corretto in vercel.json per gestire questo. Se hai scritto il tuo da zero, copia la configurazione dal repository della competenza.

Il deploy funziona il venerdì, quindi quando questi si rompono la domenica è sempre a causa di una modifica recente. git bisect è tuo amico. Ancora meglio: continua a fare il push ogni 30 minuti in modo che il commit difettoso sia piccolo.

Domande Frequenti

Il piano gratuito di Vercel reggerà davvero se il mio gioco riceve traffico?

Sì, per un lancio nel fine settimana e le prime settimane. Il piano gratuito ti fornisce 100 GB di larghezza di banda al mese, che corrispondono a circa 20.000 riproduzioni di una build Three.js da 5 MB. Se raggiungi quel limite, il piano Pro costa $20/mese e ti porta a 1 TB. Per un lancio nel fine settimana, il gratuito è più che sufficiente. Le competenze su Vibe Skills forniscono configurazioni di build che riducono al minimo le dimensioni del bundle, il che estende ulteriormente il piano gratuito.

Posso usare un dominio personalizzato sul piano gratuito di Vercel?

Sì. Il piano gratuito supporta domini personalizzati con HTTPS automatico. Acquista un dominio (Namecheap, Cloudflare Registrar, Porkbun), puntalo a Vercel e Vercel gestirà il certificato SSL. La configurazione richiede circa 10 minuti. Se non hai un dominio, l'URL nome-gioco.vercel.app è abbastanza corto da condividere su qualsiasi piattaforma.

Questo stack va bene per una sottomissione a una game jam?

Sì, ed è uno degli stack migliori per le sottomissioni alle jam. La maggior parte delle jam (Ludum Dare, GMTK, js13k, GitHub Game Off) accetta qualsiasi URL giocabile sul web. Un link *.vercel.app funziona esattamente come un URL itch.io per i giudici. Molti vincitori di jam spediscono su entrambi - itch.io per il pubblico dei giocatori, Vercel come URL canonico veloce.

Ho bisogno di conoscere Three.js prima di iniziare?

Hai bisogno di abbastanza JavaScript per leggere ciò che scrive Cursor e modificare i valori. Non hai bisogno di scrivere Three.js da zero. Le competenze su Vibe Skills generano la configurazione del motore, la telecamera, il controller e la configurazione di build. Cursor gestisce il codice di gameplay dalle tue descrizioni.

Cosa succede se la mia build Vercel fallisce domenica alle 19:00?

La causa più comune è un errore di TypeScript o una variabile d'ambiente mancante. Vercel mostra il log di build con la riga fallita evidenziata. Un clic nella dashboard torna all'ultima build funzionante e la promuove in produzione. Poiché ogni push è un'anteprima di deploy, non sei mai più di un commit da una build funzionante. Ecco perché fare il push ogni 30 minuti sabato e domenica è importante.

Posso vendere o modificare il codice da una competenza di gioco 3D di Vibe Skills?

Sì. Le competenze su Vibe Skills forniscono una licenza commerciale amichevole che ti consente di rilasciare il codice nel tuo gioco su Vercel, itch.io, Steam o ovunque altro. I creatori mantengono la proprietà intellettuale della competenza, tu mantieni la proprietà intellettuale del gioco costruito sopra.

E se non volessi usare Cursor?

Qualsiasi editor AI in grado di modificare file di progetto funziona. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - ognuno di essi può iterare sullo scaffolding Three.js da una competenza Vibe Skills. La competenza stessa è indipendente dall'editor.

Lancia il Tuo Gioco Questo Fine Settimana

Il motivo per cui la maggior parte degli sviluppatori solitari non pubblica mai un gioco 3D non è il motore, il genere o il tetto di abilità. È il venerdì sera in cui "ricercano solo un po' di più" e non iniziano mai. Il prossimo fine settimana libero che hai, segui il piano in quattro fasi: installa una competenza di gioco 3D di Vibe Skills, fai il push su GitHub, collega Vercel, distribuisci entro venerdì alle 20:00, poi passa sabato e domenica a iterare su un URL live.

Il tuo portfolio di dieci giochi spediti nel fine settimana su Vercel vale più del tuo ipotetico progetto di motore da sogno di sei mesi. Quello spedito vince sempre. L'URL gratuito di Vercel ne è la prova.

Sfoglia le competenze per giochi 3D su Vibe Skills →

Salta la maratona boilerplate di Three.js. Installa una competenza di gioco 3D su Vibe Skills, fai il push su Vercel e avrai un URL live entro domenica sera.