Как да пуснете 3D игра на Vercel този уикенд (с AI умения)

Vibe Skills

Разгледайте стотици готови умения за Claude, Cursor и други.

Разгледайте умения

Започнете безплатно сега

Публикувайте 3D игра на Vercel до неделя вечер: Наръчникът за 48-часово внедряване

Можете да преминете от празна петък вечер до връзка your-game.vercel.app до неделна вечеря. Стека е Three.js, Cursor, AI умение от Vibe Skills и безплатния слой на Vercel. Обща цена за уикенда: 0 $. Обща инфраструктура, която трябва да поддържате: също нула.

Това не е "създайте прототип на лаптопа си и го наречете завършен". Това е публична връзка, която всеки по света може да отвори в браузър, с HTTPS, кеширане на границата и персонализиран домейн, ако искате такъв. AI умението предоставя Three.js скелета и работещ vercel.json. Cursor се справя с циклите на итерация. Vercel се справя с внедряването. Вие се справяте с дизайна.

Този наръчник е за самостоятелни разработчици, кодери за атмосфера, участници в хакатони и всеки, който е уморен от полузавършени табове на localhost:5173. Разглеждаме защо този стек работи, анатомията на 48-часовото внедряване, пет AI умения за 3D игри, създадени за работния процес, и стъпките от петък до неделя.

Vibe Skills

Разгледайте стотици готови умения за Claude, Cursor и други.

Разгледайте умения

Започнете безплатно сега

Защо Vercel + Three.js + AI умения е стекът за самостоятелни разработчици

Vercel е най-мързеливата възможна цел за внедряване на Three.js игра. Натискате към GitHub, Vercel забелязва, изгражда проекта и ви връща връзка в рамките на 60 секунди. Няма сървър за осигуряване, няма Docker файл, няма NGINX конфигурация, няма SSL настройка. Three.js пакетът е просто статични HTML, JS и WebGL активи, което е точно това, за което мрежата на Vercel е създадена да обслужва.

Безплатният слой покрива удобно стартиране през уикенда:

• 100 GB трафик на месец. Three.js пакет от 5 MB при 10 000 игри е 50 GB. Ще ви свърши уикенда, преди да ви свърчи трафика.
• Неограничени статични внедрявания с HTTPS и поддомейн *.vercel.app.
• Поддръжка на персонализирани домейни в безплатния слой - въведете свой собствен name-game.com, ако имате такъв, иначе безплатната връзка vercel.app е споделяема на всяка социална платформа.
• Прегледни внедрявания за всеки ангажимент - всеки натиск получава собствена връзка, така че можете да споделите пакет с приятел и да продължите да итерирате, без да го разваляте.

Добавете AI умение от Vibe Skills и излишният код също изчезва. Three.js настройка на сцената, контролер на играча, процес на изграждане и vercel.json, готов за Vercel, се генерират с една команда. След това Cursor превръща остатъка от уикенда в чат, където описвате желаната игра и настройвате изхода. Това е пълният стек: пазарно умение за основата, AI редактор за итерация и Vercel за внедряване. Самостоятелно, безплатно и бързо.

Vibe Skills

Разгледайте стотици готови умения за Claude, Cursor и други.

Разгледайте умения

Започнете безплатно сега

Анатомията на 48-часовото внедряване: Концепция в петък до внедряване в неделя

Всеки уикенд внедряване, което всъщност се осъществява, следва едни и същи стъпки. Хитростта е да се планира внедряването в петък, а не в неделя следобед, така че последните шест часа да отидат за полиране, вместо за борба с грешка при изграждане.

Причината това да работи е петъчното натискане към Vercel. След като URL връзката съществува, всеки ангажимент в събота и неделя се внедрява автоматично. Няма "паника при внедряване в неделя вечер", защото внедряването вече се е случило в петък и е работило на автопилот през целия уикенд.

Как изглежда "Vibe кодирането" на 3D игра на Vercel

Vibe кодирането означава да опишете какво искате на прост английски и да оставите AI редактор да напише кода, след което да итерирате върху изхода. За Three.js игра на Vercel, цикълът е необичайно чист: всяка промяна в Cursor е на pnpm dev разстояние от локална обратна връзка, след това на git push разстояние от жива прегледна URL връзка, след което автоматично внедряване в продукция на main.

Уикенд на Vercel игра, кодиран с vibes, изглежда така:

1. Отворете стартовата папка на умението в Cursor.
2. Опишете функция в чата: "двоен скок, ако интервалът е натиснат два пъти в рамките на 200 ms".
3. Cursor редактира файла на контролера. Запазете. pnpm dev се презарежда. Усещате скока в браузъра.
4. Ако се чувства добре, git push. Vercel изгражда прегледна URL връзка. Изпратете я на приятел.
5. Обединете към main, когато усещането е заключено. URL връзката за продукция се актуализира в рамките на 60 секунди.

AI върши писането. Vercel върши внедряването. Вие се занимавате с усещането и дизайна.

5 AI умения за 3D игри, които правят това възможно на Vibe Skills

Тези умения са създадени за работния процес на Vercel + Three.js + Cursor през уикенда. Всеки от тях доставя Three.js проект, базиран на Vite, работещ vercel.json, pnpm build, който произвежда статичен пакет, който Vercel може да обслужва от границата, и тестван път за внедряване. Всички са в категорията 3D игри на Vibe Skills.

1. Three.js + Vercel Game Starter

Изборът по подразбиране. Генерира Three.js сцена с контролер на играча, камера от трето лице, осветителна система, небесна сфера и наземна равнина със сблъсъци. Доставя се с vercel.json, който задава правилните заглавки за кеширане за Three.js пакети с активи. pnpm dev работи локално; едно кликване в таблото на Vercel свързва GitHub хранилището и вие имате активна URL връзка.

Най-добре за: всеки жанр, освен чист 2D. Използвайте това, ако все още не знаете какво изграждате.

2. First-Person Vercel Walker

Рафиниран контролер от първо лице (WASD + заключване на показалеца на мишката + гравитация + спринт + скок) с куки за стъпки, трептене на главата и vercel.json, който правилно обработва CSP заглавките за заключване на показалеца. Това затруднява много самостоятелни разработчици при продукция. Умението го решава вместо вас.

Най-добре за: симулатори на ходене, прототипи на ужаси, наративни игри, музейни експонати.

3. Browser Arena Shooter Kit

Арена отгоре надолу (двоен джойстик контролер, генератор на вълни, базов AI на враговете, система за снаряди, HUD за резултати) с Vercel-оптимизиран пакет, който компресира активите, разделя AI на части и зарежда музика със закъснение. Включени са мрежови куки; през уикенда се доставя игра за един играч.

Най-добре за: аркадни шутъри, bullet hell, записвания за джем, които трябва да се зареждат бързо на мобилни устройства.

4. Vercel Puzzle Platformer

Платформер от трето лице (променлив скок, време за отстъпление, откриване на перваз), контролни точки, три нива-заместители, които можете да редактирате в Blender или в код, и цикъл за повторно появяване. vercel.json е конфигуриран за мигновено зареждане на нива с кеширане на границата, така че тестването се чувства бързо на телефон.

Най-добре за: пъзел платформъри, паркур прототипи, експерименти с дизайн на нива.

5. Vercel Driving Sandbox

Аркадно усещане за шофиране (крива на ускорение, физика на дрифта, закъснение на камерата, базов терен) с нискополигонална кола, шаблон за писта и внедряване, оптимизирано за големи мрежови текстури на терена. Предварително зададени HTTP заглавки карат WebGL контекста да стартира по-бързо на Safari, исторически най-бавният браузър за Three.js.

Най-добре за: аркадни състезания, офроуд шофиране, демонстрации на усещане за кола за портфолио.

Разгледайте всички AI умения за 3D игри на Vibe Skills →

Стъпка по стъпка от петък до неделя

Това е точният график. Коригирайте началното време, но запазете реда. Ключовият етап е петъчното внедряване на Vercel. Всичко след това е итерация.

Петък 18:00 - 20:00: Изберете умение, натиснете към GitHub, свържете Vercel

Стъпка 1: Изберете AI умение за 3D игри на Vibe Skills. Разгледайте категорията 3D игри, изберете това, което отговаря на вашия жанр, и инсталирайте стартовия пакет в нова папка. Отворете го в Cursor. Трябва да видите Three.js сцена с движещ се играч до 19:00.

Стъпка 2: Създайте GitHub хранилище и натиснете. git init, git remote add, git push. Използвайте идентификатора на вашата игра като име на хранилището (crystal-runner, lunar-fishing, каквото и да е). Името на хранилището често става вашата URL връзка.

Стъпка 3: Свържете хранилището с Vercel. Влезте в Vercel с GitHub (безплатно), кликнете "Add New Project", изберете хранилището. Vercel автоматично разпознава Vite и конфигурира изграждането. Кликнете Deploy. В рамките на 60 секунди ще имате URL връзка crystal-runner.vercel.app. Отворете я на телефона си. Споделете с един приятел. Лентата за внедряване сега е нула за остатъка от уикенда.

Петък 20:00 - 22:00: Напишете документа за дизайн

Стъпка 4: Отговорете на пет въпроса на прост английски. Отворете страница в Notion или markdown файл в хранилището и отговорете:

• Какво прави играчът на всеки 5 секунди? (основният цикъл)
• Какво е условието за победа и условието за загуба?
• Колко време трае едно преминаване или едно ниво?
• Какъв е визуалният елемент? (палитра, осветление, референция за стил)
• Коя е едната функция, която прави това запомнящо се за 30 секунди?

Стъпка 5: Натиснете документа за дизайн. Натиснете го към хранилището. Vercel ще превнедрява. Дисциплината на натискане на всяка смислена промяна поддържа активната URL връзка честна.

Събота 9:00 - 13:00: Създайте основната механика

Стъпка 6: Заменете плейсхолдър механиката с вашата единствена функция. Това е единствената функция, която има значение. Използвайте чата на Cursor, за да я опишете ("когато играчът вземе кристал, замразете близките врагове за 2 секунди и пуснете звук"). Итерирайте локално с pnpm dev. Когато се усеща добре, натиснете.

Стъпка 7: Свържете състоянието за победа/загуба. Пакет от 60 секунди с истински край се усеща като игра. Пакет от 60 минути без край се усеща като техническо демо. Винаги свързвайте екрана за победа първо, след това всичко останало.

Събота 13:00 - 20:00: Добавете едно ниво

Стъпка 8: Създайте едно полирано ниво. Не три полу-изпечени. Използвайте плейсхолдър кубове за геометрия. Използвайте стандартния герой на умението. Настройте усещането - височина на скока, закъснение на камерата, интензитет на частиците.

Стъпка 9: Добавете наслагване на урок. Две изречения "WASD за движение, кликнете за стрелба" изскачащ прозорец при първото стартиране спестява вашето стартиране от объркани играчи, които се отказват след 8 секунди. Cursor може да генерира наслагването на React (или vanilla DOM) за 30 секунди.

Стъпка 10: Натискайте всеки час. Всяко натискане получава Vercel прегледна URL връзка. Изпратете всяко на приятел. Цикълът на обратна връзка е тайното оръжие на този стек.

Неделя 10:00 - 16:00: Полиране

Стъпка 11: Добавете три звука. Цикъл на стъпки, амбиентен звук, победен сигнал. Дори три звука значително подобряват прототип, направен през уикенда. Безплатни източници: freesound.org, opengameart.org.

Стъпка 12: Добавете ефекти. Частици при удар, треперене на екрана при удар, изскачащи числа при резултат. Ефектите са това, което прави пакет, направен за 48 часа, да изглежда като направен за 6 месеца в GIF. Попитайте Cursor да добави "треперене на екрана с интензитет 0.3 за 150 ms, когато играчът понесе щети" - той ще напише куката за треперене на камерата за пет секунди.

Стъпка 13: Стартирайте Lighthouse тест. Отворете URL връзката на Vercel на телефон и стартирайте Chrome DevTools Lighthouse. Three.js пакетите обикновено са около 400 KB до 1.5 MB. Ако сте над 3 MB, помолете Cursor да активира разделяне на кода за тежките модули. Vercel gzip и brotli ще се погрижат за останалото.

Стъпка 14: Преглед за грешки. Играйте активната си URL връзка пет пъти подред. Коригирайте всичко, което се чупи два пъти. Игнорирайте всичко, което се чупи веднъж.

Неделя 16:00 - 20:00: Стартиране

Стъпка 15: (По избор) Настройте персонализиран домейн. Ако сте закупили name-game.com предварително, добавете го в настройките на проекта на Vercel. SSL е автоматичен. В противен случай URL връзката *.vercel.app е добре - има HTTPS, споделяема е и се зарежда навсякъде.

Стъпка 16: Запишете 15-секунден GIF на най-добрия момент. Използвайте активната URL връзка, не localhost. GIF е това, което се кликва в Twitter, Bluesky и Reddit.

Стъпка 17: Създайте страница в itch.io (по избор, но с висока ефективност). Заглавие, едноредово мото, три скрийншота, GIF-а, контроли, кредити и вграждане на вашата *.vercel.app iframe (itch.io поддържа iframe вграждания за HTML5 игри). Сега имате две URL връзки - една за случайно споделяне и една за геймърската аудитория.

Стъпка 18: Публикувайте връзката. Twitter, Bluesky, вашия Discord общност за разработчици, r/IndieDev, r/threejs, r/WebGames. Винаги започвайте с GIF. Винаги включвайте URL връзката. Ако сте използвали AI умение от Vibe Skills, споменете го в публикацията за дневник на разработката - други разработчици, които четат, ще искат същия стартов пакет.

Как да избегнете трите най-чести неуспеха при внедряване на Vercel

Три неща чупят почти всеки самостоятелен Three.js + Vercel уикенд. И трите са 5-минутни корекции, ако ги хванете в петък вечер, и 5-часови проблеми, ако ги откриете в неделя в 19:00.

• Грешна директория за изходно изграждане. Vite по подразбиране е dist/. Vercel автоматично разпознава Vite и използва dist/. Ако сте персонализирали изхода, задайте outputDirectory в vercel.json или настройките на проекта, или вашето внедряване ще бъде 404.
• Пътища до активи, които работят локално, но дават 404 в продукция. Използвайте относителни пътища или помощната функция Vite import.meta.env.BASE_URL за всеки GLB, текстура или аудио файл, заредени по време на изпълнение. Пътища с твърд код /assets/... обикновено работят, но копирани абсолютни пътища на Windows определено няма да работят.
• CSP заглавки, които блокират заключване на показалеца или аудио контекст. Игрите от първо лице се нуждаят от заключване на показалеца. Аудиото се нуждае от активиране с жест на потребителя. Всяко умение от категорията 3D игри доставя правилния блок headers в vercel.json, за да се справи с това. Ако сте написали свой собствен от нулата, копирайте конфигурацията от хранилището на умението.

Внедряването работи в петък, така че когато тези се счупят в неделя, винаги е поради скорошна промяна. git bisect е ваш приятел. Още по-добре: продължете да натискате на всеки 30 минути, така че счупеният ангажимент да е малък.

Често задавани въпроси

Безплатният слой на Vercel наистина ли ще издържи, ако играта ми получи трафик?

Да, за стартиране през уикенда и първите няколко седмици. Безплатният слой ви дава 100 GB трафик на месец, което е приблизително 20 000 игри на Three.js пакет от 5 MB. Ако достигнете този таван, Pro планът е $20/месец и ви увеличава до 1 TB. За стартиране през уикенда, безплатно е повече от достатъчно. Уменията на Vibe Skills доставят конфигурации за изграждане, които минимизират размера на пакета, което удължава безплатния слой още повече.

Мога ли да използвам персонализиран домейн в безплатния слой на Vercel?

Да. Безплатният слой поддържа персонализирани домейни с автоматичен HTTPS. Купете домейн (Namecheap, Cloudflare Registrar, Porkbun), насочете го към Vercel и Vercel ще се погрижи за SSL сертификата. Настройката отнема около 10 минути. Ако нямате домейн, URL връзката name-game.vercel.app е достатъчно кратка, за да бъде споделена на всяка платформа.

Този стек подходящ ли е за подаване в джем за игри?

Да, и това е един от най-добрите стекове за подаване в джем. Повечето джемове (Ludum Dare, GMTK, js13k, GitHub Game Off) приемат всяка URL връзка, която може да се играе в уеб. Връзка *.vercel.app работи точно като URL връзка на itch.io за съдиите. Много победители в джемове ги публикуват и на двете - itch.io за геймърската аудитория, Vercel като бърза канонична URL връзка.

Трябва ли да знам Three.js преди да започна?

Трябва да знаете достатъчно JavaScript, за да четете какво пише Cursor и да настройвате стойности. Не е нужно да пишете Three.js от нулата. Уменията на Vibe Skills генерират настройката на двигателя, камерата, контролера и конфигурацията за изграждане. Cursor се грижи за кода на геймплея от вашите описания.

Какво става, ако моето внедряване на Vercel се провали в неделя в 19:00?

Най-честата причина е грешка в TypeScript или липсваща променлива на средата. Vercel показва дневника на изграждане с маркирания ред, който се проваля. Едно кликване в таблото отменя последното работещо внедряване и го повишава до продукция. Тъй като всяко натискане е прегледно внедряване, вие сте винаги на не повече от един ангажимент от работещо внедряване. Ето защо натискането на всеки 30 минути в събота и неделя е важно.

Мога ли да продавам или модифицирам кода от AI умение за 3D игри на Vibe Skills?

Да. Уменията на Vibe Skills доставят лиценз, благоприятен за търговски цели, който ви позволява да публикувате кода в собствената си игра на Vercel, itch.io, Steam или където и да е другаде. Създателите запазват интелектуалната собственост на умението, вие запазвате интелектуалната собственост на играта, изградена върху него.

Ами ако не искам да използвам Cursor?

Всеки AI редактор, който може да редактира файлове на проекта, работи. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - всеки от тях може да итерира върху Three.js скелета от AI умение на Vibe Skills. Самото умение не зависи от редактора.

Публикувайте го този уикенд

Причината повечето самостоятелни разработчици никога да не публикуват 3D игра не е двигателят, жанрът или прагът на уменията. Това е петък вечерта, когато "просто проучват още малко" и никога не започват. Следващия свободен уикенд, следвайте четирифазовия план: инсталирайте AI умение за 3D игри Vibe Skills, натиснете към GitHub, свържете Vercel, внедрете до петък 20:00, след което прекарайте събота и неделя в итерация върху активна URL връзка.

Вашето портфолио от десет уикенд-публикувани игри на Vercel струва повече от вашия хипотетичен шестмесечен мечтател проект за двигател. Публикуваният винаги печели. Безплатната URL връзка на Vercel е доказателството.

Разгледайте AI умения за 3D игри на Vibe Skills →

Пропуснете маратона с boilerplate на Three.js. Инсталирайте AI умение за 3D игри на Vibe Skills, натиснете към Vercel и имайте активна URL връзка до неделя вечер.