Vibe Skills

Parcourez des centaines de compétences prêtes à l'emploi pour Claude, Cursor, et plus encore.

Mettre en ligne un jeu 3D sur Vercel avant dimanche soir : Le guide de déploiement en 48 heures

Vous pouvez passer d'un vendredi soir vierge à un lien votregame.vercel.app avant le dîner du dimanche. La pile technique est Three.js, Cursor, une compétence IA de Vibe Skills, et le niveau gratuit de Vercel. Coût total pour le week-end : 0 $. Infra totale dont vous devez vous occuper : également zéro.

Il ne s'agit pas de « créer un prototype sur votre ordinateur portable et de considérer cela comme terminé ». Il s'agit d'une URL publique que tout le monde dans le monde peut ouvrir dans un navigateur, avec HTTPS, le cache de périphérie et un domaine personnalisé si vous le souhaitez. La compétence IA fournit l'échafaudage Three.js et un vercel.json fonctionnel. Cursor gère la boucle d'itération. Vercel gère le déploiement. Vous gérez la conception.

Ce guide s'adresse aux développeurs indépendants, aux codeurs "vibe", aux participants de hackathons et à tous ceux qui en ont marre des onglets localhost:5173 à moitié terminés. Nous expliquons pourquoi cette pile technique fonctionne, l'anatomie du déploiement en 48 heures, cinq compétences de jeu 3D conçues pour ce flux de travail et le déroulement étape par étape du vendredi au dimanche.

Vibe Skills

Parcourez des centaines de compétences prêtes à l'emploi pour Claude, Cursor, et plus encore.

Explorer les compétences

Commencer gratuitement maintenant

Pourquoi Vercel + Three.js + Compétences IA est la pile technique du développeur solo

Vercel est la cible de déploiement la plus simple possible pour un jeu Three.js. Poussez vers GitHub, Vercel le remarque, crée le projet et vous renvoie une URL en 60 secondes. Pas de serveur à provisionner, pas de fichier Docker, pas de configuration NGINX, pas de configuration SSL. Le bundle Three.js n'est qu'un ensemble statique de HTML, JS et d'actifs WebGL, ce qui est exactement ce que le réseau de périphérie de Vercel a été conçu pour servir.

Le niveau gratuit couvre confortablement un lancement de week-end :

100 Go de bande passante par mois. Une construction Three.js de 5 Mo à 10 000 lectures représente 50 Go. Vous manquerez de week-end avant de manquer de bande passante.
Déploiements statiques illimités avec HTTPS et un sous-domaine *.vercel.app.
Prise en charge des domaines personnalisés sur le niveau gratuit - apportez votre propre nom-jeu.com si vous en avez un, sinon l'URL gratuite vercel.app est partageable sur toutes les plateformes sociales.
Déploiements de prévisualisation pour chaque commit - chaque poussée obtient sa propre URL, vous pouvez donc partager une construction avec un ami et continuer à itérer sans la casser.

Ajoutez une compétence IA de Vibe Skills et le boilerplate disparaît également. La configuration de la scène Three.js, le contrôleur du joueur, le pipeline de construction et un vercel.json prêt pour Vercel sont générés en une seule commande. Ensuite, Cursor transforme le reste du week-end en une conversation où vous décrivez le gameplay souhaité et ajustez la sortie. C'est la pile technique complète : une compétence de marché pour la base, un éditeur IA pour l'itération et Vercel pour le déploiement. Solo, gratuit et rapide.

Vibe Skills

Parcourez des centaines de compétences prêtes à l'emploi pour Claude, Cursor, et plus encore.

Explorer les compétences

Commencer gratuitement maintenant

L'anatomie en 48 heures : du concept du vendredi au déploiement du dimanche

Chaque mise en ligne du week-end qui aboutit réellement suit les mêmes étapes. L'astuce est de planifier le déploiement le vendredi, pas le dimanche après-midi, afin que les six dernières heures soient consacrées au polissage plutôt qu'à la lutte contre une erreur de build.

Phase	Bloc de temps	Ce que vous faites	Ce qui est livré à la fin de la phase
Phase 1 : Concept	Vendredi 18h - 22h	Choisir le genre, écrire un document de conception d'une page, installer la compétence de jeu 3D Vibe Skills, pousser le starter sur GitHub, se connecter à Vercel	URL `nom-jeu.vercel.app` en direct avec la scène boilerplate
Phase 2 : Construction	Samedi 9h - 20h	Remplacer le placeholder par votre mécanique principale, ajouter 1 niveau, faire fonctionner l'état de victoire/défaite	Build jouable à la même URL Vercel, auto-déployé à chaque poussée
Phase 3 : Polissage	Dimanche 10h - 16h	Son, effets, popup tutoriel, passage de correction de bugs, vérification des performances sur mobile	Un build qui ne plante pas dans les 60 premières secondes sur aucun appareil
Phase 4 : Lancement	Dimanche 16h - 20h	Définir le domaine personnalisé (facultatif), enregistrer un GIF, écrire la page itch.io, publier le lien	URL publique + page itch.io + une publication de lancement sur les réseaux sociaux

La raison pour laquelle cela fonctionne est la poussée du vendredi vers Vercel. Une fois que l'URL existe, chaque commit du samedi et du dimanche est déployé automatiquement. Il n'y a pas de « panique du déploiement du dimanche soir » car le déploiement a déjà eu lieu vendredi et fonctionne en pilote automatique tout le week-end.

À quoi ressemble le "Vibe Coding" d'un jeu 3D sur Vercel

Le Vibe Coding signifie décrire ce que vous voulez en langage clair et laisser un éditeur IA écrire le code, puis itérer sur la sortie. Pour un jeu Three.js sur Vercel, la boucle est exceptionnellement nette : chaque changement dans Cursor est à un pnpm dev de la rétroaction locale, puis à un git push d'une URL de prévisualisation en direct, puis déployé automatiquement en production sur main.

Un week-end de jeu Vercel "Vibe Coded" ressemble à ceci :

Ouvrez le dossier de démarrage de la compétence dans Cursor.
Décrivez une fonctionnalité dans le chat : « double saut si l'espace est pressé deux fois en 200 ms ».
Cursor modifie le fichier du contrôleur. Sauvegarder. pnpm dev recharge. Vous ressentez le saut dans le navigateur.
Si cela semble correct, git push. Vercel crée une URL de prévisualisation. Envoyez-la à un ami.
Fusionnez dans main lorsque le ressenti est verrouillé. L'URL de production se met à jour en 60 secondes.

L'IA fait la frappe. Vercel fait le déploiement. Vous faites le ressenti et la conception.

5 compétences IA de jeux 3D qui rendent cela possible sur Vibe Skills

Ces compétences sont conçues pour le flux de travail week-end Vercel + Three.js + Cursor. Chacune est livrée avec un projet Three.js basé sur Vite, un vercel.json fonctionnel, un pnpm build qui produit un bundle statique que Vercel peut servir depuis la périphérie, et un chemin de déploiement testé. Tous se trouvent dans la catégorie 3D Games sur Vibe Skills.

1. Starter de jeu Three.js + Vercel

Le choix par défaut. Génère une scène Three.js avec un contrôleur de joueur, une caméra à la troisième personne, un éclairage, un ciel et un plan au sol avec des collisions. Livré avec un vercel.json qui définit les bons en-têtes de cache pour les bundles d'actifs Three.js. pnpm dev s'exécute localement ; un clic dans le tableau de bord Vercel connecte le dépôt GitHub et vous obtenez une URL en direct.

Idéal pour : tout genre sauf le 2D pur. Utilisez ceci si vous ne savez pas encore ce que vous construisez.

2. Marcheur Vercel à la première personne

Un contrôleur à la première personne peaufiné (WASD + verrouillage du pointeur de la souris + gravité + sprint + saut) avec des crochets pour les pas, le mouvement de la tête et un vercel.json qui gère correctement les en-têtes CSP de verrouillage du pointeur. Celui-ci pose des problèmes à de nombreux développeurs solo en production. La compétence le résout pour vous.

Idéal pour : simulateurs de marche, prototypes d'horreur, jeux narratifs, expositions de musées.

3. Kit de tir d'arène pour navigateur

Une arène vue du dessus (contrôleur twin-stick, générateur de vagues, IA ennemi de base, système de projectiles, HUD de score) avec une construction optimisée pour Vercel qui compresse les actifs, divise le code de l'IA et charge la musique en différé. Hooks multijoueurs inclus ; le week-end livre le mode solo.

Idéal pour : jeux de tir d'arcade, bullet hell, entrées de jam qui doivent se charger rapidement sur mobile.

4. Puzzle Platformer Vercel

Un jeu de plateforme à la troisième personne (saut variable, temps de coyote, détection de rebord), des points de contrôle, trois niveaux factices que vous pouvez modifier dans Blender ou en code, et une boucle de réapparition. Le vercel.json est configuré pour des rechargements de niveau instantanés en cache de périphérie, de sorte que le jeu semble vif sur un téléphone.

Idéal pour : puzzle platformers, prototypes de parkour, expériences de conception de niveaux.

5. Bac à sable de conduite Vercel

Ressenti de conduite arcade (courbe d'accélération, physique de dérive, décalage de caméra, terrain de base) avec une voiture low-poly, un modèle de piste et un déploiement optimisé pour les maillages de terrain volumineux. Les en-têtes HTTP prédéfinis font démarrer le contexte WebGL plus rapidement sur Safari, historiquement le navigateur le plus lent pour Three.js.

Idéal pour : courses d'arcade, conduite tout-terrain, démos de ressenti de voiture pour un portfolio.

Parcourir toutes les compétences de jeux 3D sur Vibe Skills →

Étape par étape du vendredi au dimanche

C'est le calendrier exact. Ajustez l'heure de début, mais gardez l'ordre. La principale étape clé est le déploiement Vercel du vendredi soir. Tout ce qui suit est une itération.

Vendredi 18h - 20h : Choisir la compétence, pousser sur GitHub, connecter Vercel

Étape 1 : Choisir une compétence de jeu 3D sur Vibe Skills. Parcourez la catégorie Jeux 3D, choisissez celle qui correspond à votre genre et installez le starter dans un nouveau dossier. Ouvrez-le dans Cursor. Vous devriez voir une scène Three.js avec un joueur en mouvement avant 19h.

Étape 2 : Créer un dépôt GitHub et pousser. git init, git remote add, git push. Utilisez le slug de votre jeu comme nom de dépôt (crystal-runner, lunar-fishing, peu importe). Le nom du dépôt devient souvent votre URL.

Étape 3 : Connecter le dépôt à Vercel. Connectez-vous à Vercel avec GitHub (gratuit), cliquez sur « Ajouter un nouveau projet », choisissez le dépôt. Vercel détecte automatiquement Vite et configure la construction. Cliquez sur Déployer. En 60 secondes, vous avez une URL crystal-runner.vercel.app. Ouvrez-la sur votre téléphone. Partagez avec un ami. La barre de déploiement est maintenant à zéro pour le reste du week-end.

Vendredi 20h - 22h : Rédiger le document de conception

Étape 4 : Répondre à cinq questions en langage clair. Ouvrez une page Notion ou un fichier markdown dans le dépôt et répondez :

Que fait le joueur toutes les 5 secondes ? (la boucle principale)
Quelle est la condition de victoire et la condition de défaite ?
Combien de temps dure une partie ou un niveau ?
Quel est le point d'accroche visuel ? (palette, éclairage, référence de style)
Quelle est la fonctionnalité unique qui rend ce jeu mémorable en 30 secondes ?

Étape 5 : Committer le document de conception. Poussez-le dans le dépôt. Vercel redéploiera. La discipline de pousser chaque changement significatif maintient l'URL en direct honnête.

Samedi 9h - 13h : Construire la mécanique principale

Étape 6 : Remplacer la mécanique placeholder par votre fonctionnalité unique. C'est la seule fonctionnalité qui compte. Utilisez le chat de Cursor pour la décrire (« lorsque le joueur ramasse un cristal, figer les ennemis proches pendant 2 secondes et jouer un carillon »). Itérez localement avec pnpm dev. Lorsque cela semble correct, poussez.

Étape 7 : Connecter l'état de victoire/défaite. Une construction de 60 secondes avec une vraie fin ressemble à un jeu. Une construction de 60 minutes sans fin ressemble à une démo technique. Toujours connecter d'abord l'écran de victoire, puis tout le reste.

Samedi 13h - 20h : Ajouter un niveau

Étape 8 : Construire un niveau peaufiné. Pas trois niveaux à moitié cuits. Utilisez des cubes placeholders pour la géométrie. Utilisez le personnage standard de la compétence. Ajustez le ressenti - hauteur de saut, décalage de caméra, intensité des particules.

Étape 9 : Ajouter une superposition de tutoriel. Un popup de deux phrases « WASD pour bouger, cliquer pour tirer » au premier lancement évite que votre lancement soit gâché par des joueurs confus qui abandonnent en 8 secondes. Cursor peut générer la superposition React (ou DOM vanilla) en 30 secondes.

Étape 10 : Pousser toutes les heures. Chaque poussée obtient une URL de prévisualisation Vercel. Envoyez chacune à un ami. La boucle de rétroaction est l'arme secrète de cette pile.

Dimanche 10h - 16h : Polissage

Étape 11 : Ajouter trois sons. Boucle de pas, nappe ambiante, jingle de victoire. Même trois sons élèvent considérablement un prototype de week-end. Sources gratuites : freesound.org, opengameart.org.

Étape 12 : Ajouter des effets. Particules à l'impact, secousses d'écran à l'impact, popups de chiffres sur le score. Les effets sont ce qui fait qu'une construction de 48 heures ressemble à une construction de 6 mois dans un GIF. Demandez à Cursor d'ajouter « une secousse d'écran d'intensité 0.3 pendant 150 ms lorsque le joueur subit des dégâts » - il écrira le hook de secousse de caméra en cinq secondes.

Étape 13 : Exécuter un passage Lighthouse. Ouvrez l'URL Vercel sur un téléphone et exécutez Chrome DevTools Lighthouse. Les bundles Three.js font généralement entre 400 Ko et 1,5 Mo. Si vous dépassez 3 Mo, demandez à Cursor d'activer la séparation de code sur les modules lourds. Le gzip et le brotli de Vercel s'occuperont du reste.

Étape 14 : Passage de correction de bugs. Jouez votre URL en direct cinq fois de suite. Corrigez tout ce qui plante deux fois. Ignorez tout ce qui plante une fois.

Dimanche 16h - 20h : Lancement

Étape 15 : (Facultatif) Définir un domaine personnalisé. Si vous avez acheté un nom-jeu.com à l'avance, ajoutez-le dans les paramètres du projet Vercel. Le SSL est automatique. Sinon, l'URL *.vercel.app convient - elle a HTTPS, elle est partageable et elle se charge partout.

Étape 16 : Enregistrer un GIF de 15 secondes du meilleur moment. Utilisez l'URL en direct, pas localhost. Le GIF est ce qui est cliqué sur Twitter, Bluesky et Reddit.

Étape 17 : Créer une page itch.io (facultatif mais très rentable). Titre, slogan d'une ligne, trois captures d'écran, le GIF, les commandes, les crédits et une intégration de votre iframe *.vercel.app (itch.io prend en charge les intégrations iframe pour les jeux HTML5). Vous avez maintenant deux URL - une pour le partage occasionnel et une pour le public des joueurs.

Étape 18 : Publier le lien. Twitter, Bluesky, votre Discord communautaire de développeurs, r/IndieDev, r/threejs, r/WebGames. Menez toujours avec le GIF. Incluez toujours l'URL. Si vous avez utilisé une compétence Vibe Skills, mentionnez-la dans le post devlog - d'autres développeurs qui lisent voudront le même starter.

Comment éviter les trois échecs de déploiement Vercel les plus courants

Trois choses cassent presque tous les jeux Three.js + Vercel de développeurs solo en un week-end. Toutes les trois sont des corrections de 5 minutes si vous les attrapez le vendredi soir, et des dédales de 5 heures si vous les découvrez le dimanche à 19h.

Répertoire de sortie de build incorrect. Vite par défaut sur dist/. Vercel détecte automatiquement Vite et utilise dist/. Si vous avez personnalisé la sortie, définissez outputDirectory dans vercel.json ou les paramètres du projet, sinon votre déploiement sera un 404.
Chemins d'actifs qui fonctionnent localement mais qui renvoient 404 en production. Utilisez des chemins relatifs ou l'assistant Vite import.meta.env.BASE_URL pour tout fichier GLB, texture ou audio chargé à l'exécution. Les chemins codés en dur /assets/... fonctionnent généralement, mais les chemins Windows absolus copiés-collés ne fonctionneront absolument pas.
En-têtes CSP qui bloquent le verrouillage du pointeur ou le contexte audio. Les jeux à la première personne nécessitent le verrouillage du pointeur. L'audio nécessite une activation par geste de l'utilisateur. Toute compétence de la catégorie Jeux 3D est livrée avec le bloc headers approprié dans vercel.json pour gérer cela. Si vous avez écrit le vôtre à partir de zéro, copiez la configuration du dépôt de la compétence.

Le déploiement fonctionne le vendredi, donc lorsque ces éléments échouent le dimanche, c'est toujours en raison d'un changement récent. git bisect est votre ami. Encore mieux : continuez à pousser toutes les 30 minutes afin que le commit défectueux soit petit.

Questions fréquemment posées

Le niveau gratuit de Vercel tiendra-t-il vraiment si mon jeu reçoit du trafic ?

Oui pour un lancement de week-end et les premières semaines. Le niveau gratuit vous donne 100 Go de bande passante par mois, ce qui correspond à environ 20 000 parties d'une construction Three.js de 5 Mo. Si vous atteignez ce plafond, le plan Pro coûte 20 $/mois et vous fait passer à 1 To. Pour une mise en ligne de week-end, le gratuit est plus que suffisant. Les compétences sur Vibe Skills sont livrées avec des configurations de build qui minimisent la taille des bundles, ce qui étire davantage le niveau gratuit.

Puis-je utiliser un domaine personnalisé sur le niveau gratuit de Vercel ?

Oui. Le niveau gratuit prend en charge les domaines personnalisés avec HTTPS automatique. Achetez un domaine (Namecheap, Cloudflare Registrar, Porkbun), pointez-le vers Vercel, et Vercel s'occupe du certificat SSL. La configuration prend environ 10 minutes. Si vous n'avez pas de domaine, l'URL nom-jeu.vercel.app est suffisamment courte pour être partagée sur n'importe quelle plateforme.

Cette pile technique convient-elle pour une soumission de jam ?

Oui, et c'est l'une des meilleures piles pour les soumissions de jam. La plupart des jams (Ludum Dare, GMTK, js13k, GitHub Game Off) acceptent n'importe quelle URL jouable sur le web. Un lien *.vercel.app fonctionne exactement comme une URL itch.io pour les juges. De nombreux gagnants de jam publient sur les deux - itch.io pour le public des joueurs, Vercel comme URL canonique rapide.

Ai-je besoin de connaître Three.js avant de commencer ?

Vous avez besoin de suffisamment de JavaScript pour lire ce que Cursor écrit et ajuster les valeurs. Vous n'avez pas besoin d'écrire Three.js à partir de zéro. Les compétences sur Vibe Skills génèrent la configuration du moteur, la caméra, le contrôleur et la configuration de build. Cursor s'occupe du code de gameplay à partir de vos descriptions.

Que se passe-t-il si ma construction Vercel échoue le dimanche à 19h ?

La cause la plus fréquente est une erreur TypeScript ou une variable d'environnement manquante. Vercel affiche le journal de construction avec la ligne défaillante mise en surbrillance. Un clic dans le tableau de bord revient à la dernière construction fonctionnelle et la promeut en production. Comme chaque poussée est un déploiement de prévisualisation, vous n'êtes jamais à plus d'un commit d'une construction fonctionnelle. C'est pourquoi pousser toutes les 30 minutes le samedi et le dimanche est important.

Puis-je vendre ou modifier le code d'une compétence de jeu 3D Vibe Skills ?

Oui. Les compétences sur Vibe Skills sont livrées avec une licence conviviale pour le commerce qui vous permet de publier le code dans votre propre jeu sur Vercel, itch.io, Steam ou ailleurs. Les créateurs conservent la propriété intellectuelle de la compétence, vous conservez la propriété intellectuelle du jeu construit dessus.

Et si je ne veux pas utiliser Cursor ?

Tout éditeur IA capable d'éditer des fichiers de projet fonctionne. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - n'importe lequel d'entre eux peut itérer sur l'échafaudage Three.js d'une compétence Vibe Skills. La compétence elle-même est indépendante de l'éditeur.

Lancez-le ce week-end

La raison pour laquelle la plupart des développeurs solo ne lancent jamais de jeu 3D n'est pas le moteur, le genre ou le niveau de compétence. C'est le vendredi soir où ils « recherchent un peu plus » et ne commencent jamais. Le prochain week-end libre que vous aurez, suivez le plan en quatre phases : installez une compétence de jeu 3D Vibe Skills, poussez sur GitHub, connectez Vercel, déployez avant vendredi 20h, puis passez le samedi et le dimanche à itérer sur une URL en direct.

Votre portfolio de dix jeux de week-end lancés sur Vercel vaut plus que votre projet hypothétique de moteur de rêve de six mois. Le jeu expédié gagne toujours. L'URL Vercel gratuite est la preuve.

Parcourir les compétences de jeux 3D sur Vibe Skills →

Évitez le marathon de boilerplate Three.js. Installez une compétence de jeu 3D sur Vibe Skills, poussez sur Vercel et ayez une URL en direct avant dimanche soir.