Vibe Skills

د Claude، Cursor، او نورو لپاره په سلګونو چمتو شوي مهارتونه براوز کړئ.

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

Vous pouvez passer du vendredi soir vierge à un lien votre-jeu.vercel.app avant le dîner du dimanche. La pile technologique comprend 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 : zéro aussi.

Il ne s'agit pas de « construire 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, une mise en cache en 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 d'ambiance, aux participants de hackathons et à tous ceux qui en ont marre des onglets localhost:5173 à moitié terminés. Nous expliquons pourquoi cette pile fonctionne, l'anatomie du déploiement en 48 heures, cinq compétences de jeu 3D conçues pour le flux de travail et les étapes détaillées du vendredi au dimanche.

Vibe Skills

د Claude، Cursor، او نورو لپاره په سلګونو چمتو شوي مهارتونه براوز کړئ.

مهارتونه وپلټئ

اوس وړیا پیل کړئ

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

Vercel est la cible de déploiement la plus simple possible pour un jeu Three.js. Poussez sur GitHub, Vercel le remarque, crée le projet et vous renvoie une URL en moins de 60 secondes. Aucun serveur à provisionner, aucun fichier Docker, aucune configuration NGINX, aucune configuration SSL. Le bundle Three.js est simplement des actifs HTML, JS et WebGL statiques, ce qui est exactement ce que le réseau périphérique 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 pour 10 000 parties 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.
Support de domaine personnalisé 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.
Aperçus de déploiement 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 de 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 discussion où vous décrivez le gameplay que vous souhaitez et ajustez la sortie. C'est la pile complète : une compétence de marché pour la fondation, un éditeur IA pour l'itération et Vercel pour le déploiement. Solo, gratuit et rapide.

Vibe Skills

د Claude، Cursor، او نورو لپاره په سلګونو چمتو شوي مهارتونه براوز کړئ.

مهارتونه وپلټئ

اوس وړیا پیل کړئ

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

Chaque expédition de week-end qui se concrétise suit les mêmes étapes. L'astuce est de planifier le déploiement le vendredi, et non 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 construction.

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, rédiger un document de conception d'une page, installer la compétence de jeu 3D Vibe Skills, pousser le modèle vers GitHub, 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	Construction jouable à la même URL Vercel, automatiquement déployée à chaque poussée
Phase 3 : Polissage	Dimanche 10h - 16h	Son, effets, pop-up de tutoriel, passage des bogues, vérification des performances sur mobile	Une construction qui ne plante pas dans les 60 premières secondes sur aucun appareil
Phase 4 : Lancement	Dimanche 16h - 20h	Configurer 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 l'URL créée, chaque commit du samedi et du dimanche se déploie automatiquement. Il n'y a pas de « panique de déploiement du dimanche soir » car le déploiement a déjà eu lieu vendredi et fonctionne en mode automatique tout le week-end.

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

Le codage d'ambiance signifie décrire ce que vous voulez en anglais 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 propre : chaque changement dans Cursor est à un pnpm dev des commentaires locaux, puis à un git push d'une URL d'aperçu en direct, puis automatiquement déployé en production sur main.

Un week-end de jeu Vercel codé en ambiance ressemble à ceci :

Ouvrez le dossier du modèle de la compétence dans Cursor.
Décrivez une fonctionnalité dans le chat : « double saut si la barre d'espace est pressée deux fois en moins de 200 ms ».
Cursor édite le fichier du contrôleur. Enregistrez. pnpm dev recharge. Vous ressentez le saut dans le navigateur.
Si cela vous semble correct, git push. Vercel crée une URL d'aperçu. Envoyez-la à un ami.
Fusionnez dans main lorsque la sensation est verrouillée. L'URL de production se met à jour en moins de 60 secondes.

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

5 compétences IA de jeu 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 Jeux 3D sur Vibe Skills.

1. Three.js + Vercel Game Starter

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 rig d'éclairage, un skybox et un plancher avec collisions. Livré avec un vercel.json qui définit les bons en-têtes de mise en 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. First-Person Vercel Walker

Un contrôleur à la première personne peaufiné (WASD + verrouillage du pointeur de la souris + gravité + sprint + saut) avec des crochets de pas, un léger mouvement de tête et un vercel.json qui gère correctement les en-têtes CSP de verrouillage du pointeur. Celui-ci piège 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. Browser Arena Shooter Kit

Une arène vue de dessus (contrôleur à double joystick, générateur de vagues, IA d'ennemis basique, système de projectile, HUD de score) avec une construction optimisée pour Vercel qui compresse les actifs, divise le code de l'IA et charge la musique paresseusement. Des hooks multijoueurs sont inclus ; le week-end produit le mode solo.

Idéal pour : jeux de tir d'arcade, bullet hell, participations à des jams qui doivent se charger rapidement sur mobile.

4. Vercel Puzzle Platformer

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 dans le code, et une boucle de réapparition. Le vercel.json est configuré pour des rechargements de niveau instantanés mis en cache en périphérie, de sorte que le test de jeu est rapide sur un téléphone.

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

5. Vercel Driving Sandbox

Sensation de conduite d'arcade (courbe d'accélération, physique de dérive, décalage de caméra, terrain basique) avec une voiture low-poly, un modèle de piste et un déploiement optimisé pour les grandes mailles de terrain. 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 sensation de voiture pour un portfolio.

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

Étapes détaillées du vendredi au dimanche

Voici le programme exact. Ajustez l'heure de début, mais conservez l'ordre. L'étape clé est le déploiement Vercel du vendredi soir. Tout ce qui suit est de l'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 modèle dans un nouveau dossier. Ouvrez-le dans Cursor. Vous devriez voir une scène Three.js avec un joueur en mouvement d'ici 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 moins de 60 secondes, vous obtenez une URL crystal-runner.vercel.app. Ouvrez-la sur votre téléphone. Partagez-la 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 anglais 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 ?
Quelle est la durée d'une partie ou d'un niveau ?
Quel est l'accroche visuelle ? (palette, éclairage, référence de style)
Quelle est la caractéristique unique qui rend cela mémorable en 30 secondes ?

Étape 5 : Commiter 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 caractéristique unique. C'est la seule caractéristique qui compte. Utilisez le chat de Cursor pour la décrire (« lorsque le joueur ramasse un cristal, geler les ennemis à proximité pendant 2 secondes et jouer un carillon »). Itérez localement avec pnpm dev. Lorsque cela semble correct, poussez.

Étape 7 : Câbler l'état de victoire/défaite. Une construction de 60 secondes avec une fin réelle ressemble à un jeu. Une construction de 60 minutes sans fin ressemble à une démo technique. Câblez toujours d'abord l'écran de victoire, puis tout le reste.

Samedi 13h - 20h : Ajouter un niveau

Étape 8 : Construire un niveau peaufiné. Pas trois mal fagotés. Utilisez des cubes placeholder pour la géométrie. Utilisez le personnage stock de la compétence. Ajustez la sensation - hauteur du saut, décalage de la caméra, intensité des particules.

Étape 9 : Ajouter une superposition de tutoriel. Une popup de deux phrases « WASD pour bouger, clic pour tirer » au premier lancement évite que les joueurs confus 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 d'aperçu Vercel. Envoyez chacun à 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 améliorent considérablement un prototype de week-end. Sources gratuites : freesound.org, opengameart.org.

Étape 12 : Ajouter des effets. Particules à l'impact, tremblement d'écran à l'impact, pop-ups de nombres sur le score. Les effets donnent l'impression qu'une construction de 48 heures ressemble à une construction de 6 mois dans un GIF. Demandez à Cursor d'ajouter un « tremblement d'écran d'intensité 0.3 pendant 150 ms lorsque le joueur subit des dégâts » - il écrira le hook de tremblement 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 division du code sur les modules lourds. Le gzip et le brotli de Vercel s'occuperont du reste.

Étape 14 : Passage des bogues. Jouez votre URL en direct cinq fois de suite. Corrigez tout ce qui casse deux fois. Ignorez tout ce qui casse une fois.

Dimanche 16h - 20h : Lancement

Étape 15 : (Facultatif) Configurer 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 est correcte - 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 obtient des clics sur Twitter, Bluesky et Reddit.

Étape 17 : Créer une page itch.io (facultatif mais très utile). Titre, slogan d'une ligne, trois captures d'écran, le GIF, les contrôles, 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 de communauté de développeurs, r/IndieDev, r/threejs, r/WebGames. Commencez toujours par le GIF. Incluez toujours l'URL. Si vous avez utilisé une compétence Vibe Skills, mentionnez-la dans la publication du journal de développement - d'autres développeurs qui lisent voudront le même modèle.

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

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

Répertoire de sortie de construction incorrect. Vite utilise par défaut 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 renvoient un 404 en production. Utilisez des chemins relatifs ou l'assistant import.meta.env.BASE_URL de Vite 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 absolus Windows 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 utilisateur. Toute compétence de la catégorie Jeux 3D est livrée avec le bloc headers correct 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, de sorte que le commit défectueux soit petit.

Foire aux questions

Le niveau gratuit de Vercel tiendra-t-il vraiment si mon jeu obtient 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, soit 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 expédition de week-end, le gratuit est plus que suffisant. Les compétences sur Vibe Skills sont livrées avec des configurations de construction qui minimisent la taille du bundle, ce qui étend le niveau gratuit davantage.

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 gère le 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 est-elle adaptée à une soumission de jam de jeu ?

Oui, et c'est l'une des meilleures piles pour les soumissions de jams. 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 jams livrent sur les deux - itch.io pour le public des joueurs, Vercel comme URL canonique rapide.

Dois-je 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 construction. Cursor gère le 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 réussie et la promeut en production. Étant donné que chaque poussée est un aperçu de déploiement, vous n'êtes jamais à plus d'un commit d'une construction réussie. 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.

Mettez-le en ligne ce week-end

La raison pour laquelle la plupart des développeurs solo n'expédient jamais de jeu 3D n'est pas le moteur, le genre ou le plafond de compétence. C'est le vendredi soir où ils « font juste un peu plus de recherches » 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 expédiés sur Vercel vaut plus que votre projet hypothétique de moteur de rêve de six mois. Celui qui est expédié gagne toujours. L'URL gratuite de Vercel en est la preuve.

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

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