Cara Menghantar Permainan 3D di Vercel Hujung Minggu Ini (dengan Kemahiran AI)

Vibe Skills

Semak imbas ratusan kemahiran sedia ada untuk Claude, Cursor dan banyak lagi.

Teroka Kemahiran

Mulakan Percuma Sekarang

Hantar Permainan 3D di Vercel Menjelang Malam Ahad: Buku Panduan Deploy 48 Jam

Anda boleh pergi dari malam Jumaat yang kosong kepada pautan permainan-anda.vercel.app menjelang makan malam Ahad. Tumpukan ialah Three.js, Cursor, kemahiran AI daripada Vibe Skills, dan peringkat percuma Vercel. Jumlah kos untuk hujung minggu: $0. Jumlah infrastruktur yang perlu anda jaga: juga sifar.

Ini bukan "bina prototaip pada komputer riba anda dan anggap selesai". Ini ialah URL awam yang sesiapa sahaja di dunia boleh buka dalam pelayar, dengan HTTPS, penampan tepi (edge caching), dan domain tersuai jika anda mahu. Kemahiran AI menghantar rangka kerja Three.js dan vercel.json yang berfungsi. Cursor menguruskan kitaran lelaran. Vercel menguruskan deploy. Anda menguruskan reka bentuk.

Panduan ini adalah untuk pembangun indie, juru kod vibe, peserta hackathon, dan sesiapa sahaja yang bosan dengan tab localhost:5173 yang separuh siap. Kami merangkumi sebab timbunan ini berfungsi, anatomi deploy 48 jam, lima kemahiran permainan 3D yang dibina untuk aliran kerja, dan langkah demi langkah Jumaat hingga Ahad.

Vibe Skills

Semak imbas ratusan kemahiran sedia ada untuk Claude, Cursor dan banyak lagi.

Teroka Kemahiran

Mulakan Percuma Sekarang

Mengapa Vercel + Three.js + Kemahiran AI Adalah Timbunan Pembangun Solo

Vercel ialah sasaran deploy paling malas yang mungkin untuk permainan Three.js. Tekan ke GitHub, Vercel perasan, membina projek, dan memberikan anda URL dalam masa 60 saat. Tiada pelayan untuk diperuntukkan, tiada fail Docker, tiada konfigurasi NGINX, tiada persediaan SSL. Timbunan Three.js hanyalah aset HTML, JS, dan WebGL statik, yang merupakan persis apa yang dibina oleh rangkaian tepi Vercel untuk dihantar.

Peringkat percuma merangkumi pelancaran hujung minggu dengan selesa:

• 100 GB lebar jalur sebulan. Timbunan Three.js 5 MB pada 10,000 mainan ialah 50 GB. Anda akan kehabisan hujung minggu sebelum anda kehabisan lebar jalur.
• Deploy statik tanpa had dengan HTTPS dan subdomain *.vercel.app.
• Sokongan domain tersuai pada peringkat percuma - bawa nama-permainan.com anda sendiri jika anda memilikinya, jika tidak, URL vercel.app percuma boleh dikongsi di setiap platform sosial.
• Deploy pratonton untuk setiap komit - setiap tolakan mendapat URLnya sendiri, jadi anda boleh berkongsi binaan dengan rakan dan teruskan lelaran tanpa merosakkannya.

Tambahkan kemahiran AI daripada Vibe Skills dan kod permulaan juga hilang. Persediaan adegan Three.js, pengawal pemain, saluran binaan, dan vercel.json yang sedia untuk Vercel dihasilkan dalam satu arahan. Kemudian Cursor mengubah sisa hujung minggu menjadi sembang di mana anda menerangkan permainan yang anda mahu dan membetulkan output. Itulah timbunan penuh: kemahiran pasaran untuk asas, editor AI untuk lelaran, dan Vercel untuk deploy. Solo, percuma, dan pantas.

Vibe Skills

Semak imbas ratusan kemahiran sedia ada untuk Claude, Cursor dan banyak lagi.

Teroka Kemahiran

Mulakan Percuma Sekarang

Anatomi 48 Jam: Konsep Jumaat kepada Deploy Ahad

Setiap penghantaran hujung minggu yang benar-benar berlaku mengikut rentak yang sama. Triknya ialah merancang deploy pada hari Jumaat, bukan petang Ahad, supaya enam jam terakhir pergi ke penambahbaikan bukannya melawan ralat binaan.

Sebab mengapa ini berfungsi ialah tolakan Jumaat ke Vercel. Sebaik sahaja URL wujud, setiap komit Sabtu dan Ahad di-deploy secara automatik. Tiada "panik deploy malam Ahad" kerana deploy sudah berlaku pada hari Jumaat dan telah berjalan secara automatik sepanjang hujung minggu.

Apa Itu "Vibe Coding" Permainan 3D di Vercel

Vibe coding bermaksud menerangkan apa yang anda mahu dalam bahasa Inggeris biasa dan membiarkan editor AI menulis kod, kemudian melakukan lelaran pada output. Untuk permainan Three.js di Vercel, gelung ini sangat bersih: setiap perubahan dalam Cursor berjarak pnpm dev dari maklum balas tempatan, kemudian git push dari URL pratonton langsung, kemudian auto-deploy ke pengeluaran pada main.

Hujung minggu Vercel yang di-vibe-code kelihatan seperti ini:

1. Buka folder permulaan kemahiran dalam Cursor.
2. Terangkan ciri dalam sembang: "lompat berganda jika ruang ditekan dua kali dalam masa 200ms".
3. Cursor mengedit fail pengawal. Simpan. pnpm dev dimuat semula. Anda merasakan lompatan dalam pelayar.
4. Jika ia terasa betul, git push. Vercel membina URL pratonton. Hantarkannya kepada rakan.
5. Gabungkan ke main apabila rasa terkunci. URL pengeluaran dikemas kini dalam masa 60 saat.

AI melakukan penaipan. Vercel melakukan deploy. Anda melakukan rasa dan reka bentuk.

5 Kemahiran Permainan 3D AI yang Memungkinkan Ini di Vibe Skills

Kemahiran ini dibina untuk aliran kerja hujung minggu Vercel + Three.js + Cursor. Setiap satu menghantar projek Three.js berasaskan Vite, vercel.json yang berfungsi, pnpm build yang menghasilkan timbunan statik yang boleh dihantar oleh Vercel dari tepi, dan laluan deploy yang diuji. Semuanya ada dalam kategori Permainan 3D di Vibe Skills.

1. Permulaan Permainan Three.js + Vercel

Pilihan lalai. Menghasilkan adegan Three.js dengan pengawal pemain, kamera orang ketiga, rig pencahayaan, skybox, dan satah tanah dengan perlanggaran. Menghantar dengan vercel.json yang menetapkan pengepala penampan yang betul untuk timbunan aset Three.js. pnpm dev berjalan secara tempatan; satu klik dalam papan pemuka Vercel menyambungkan repositori GitHub dan anda mempunyai URL langsung.

Terbaik untuk: mana-mana genre kecuali 2D tulen. Gunakan ini jika anda belum tahu apa yang anda bina.

2. Pejalan Vercel Orang Pertama

Pengawal orang pertama yang diperhalusi (WASD + kunci penuding tetikus + graviti + lari + lompat) dengan cangkuk langkah kaki, goncangan kepala, dan vercel.json yang mengendalikan pengepala CSP kunci penuding dengan betul. Yang ini mengelirukan ramai pembangun solo dalam pengeluaran. Kemahiran menyelesaikannya untuk anda.

Terbaik untuk: simulasi berjalan, prototaip seram, permainan naratif, pameran muzium.

3. Kit Penembak Arena Penyemak Imbas

Arena dari atas ke bawah (pengawal kayu kembar, penjana gelombang, AI musuh asas, sistem peluru, HUD skor) dengan binaan yang disesuaikan untuk Vercel yang meng-gzip aset, memisahkan kod AI, dan memuatkan muzik secara malas. Cangkuk berbilang pemain disertakan; hujung minggu menghantar pemain tunggal.

Terbaik untuk: penembak arked, neraka peluru, penyertaan jam yang perlu dimuatkan dengan pantas pada mudah alih.

4. Pemain Platform Vercel

Platformer orang ketiga (lompatan boleh ubah, masa koyote, pengesanan tepi), pusat pemeriksaan, tiga tahap pemintal yang boleh anda edit dalam Blender atau dalam kod, dan gelung respawn. vercel.json dikonfigurasikan untuk muat semula tahap yang ditampan tepi dengan serta-merta, jadi ujian permainan terasa pantas pada telefon.

Terbaik untuk: platformer teka-teki, prototaip parkour, eksperimen reka bentuk tahap.

5. Kotak Pasir Pemandu Vercel

Rasa pemanduan arked (lengkung pecutan, fizik drift, kelewatan kamera, rupa bumi asas) dengan kereta poli rendah, templat trek, dan deploy yang disesuaikan untuk mesh rupa bumi yang besar. Pengepala HTTP sedia ada menjadikan konteks WebGL bermula lebih pantas pada Safari, secara historis penyemak imbas paling perlahan untuk Three.js.

Terbaik untuk: perlumbaan arked, pemanduan luar jalan, demo rasa kereta untuk portfolio.

Semak imbas semua kemahiran permainan 3D di Vibe Skills →

Jumaat-ke-Ahad Langkah demi Langkah

Ini ialah jadual tepat. Laraskan masa mula, tetapi kekalkan urutannya. Tonggak utama ialah deploy Vercel pada malam Jumaat. Semua selepas itu ialah lelaran.

Jumaat 6 petang - 8 petang: Pilih Kemahiran, Tolak ke GitHub, Sambung Vercel

Langkah 1: Pilih kemahiran permainan 3D di Vibe Skills. Semak imbas kategori Permainan 3D, pilih yang sepadan dengan genre anda, dan pasang permulaan ke dalam folder baru. Buka dalam Cursor. Anda sepatutnya melihat adegan Three.js dengan pemain bergerak menjelang jam 7 malam.

Langkah 2: Cipta repositori GitHub dan tolak. git init, git remote add, git push. Gunakan slug permainan anda sebagai nama repositori (pelari-kristal, pancing-bulan, apa sahaja). Nama repositori selalunya menjadi URL anda.

Langkah 3: Sambungkan repositori ke Vercel. Log masuk ke Vercel dengan GitHub (percuma), klik "Tambah Projek Baharu", pilih repositori. Vercel auto-mengesan Vite dan mengkonfigurasi binaan. Klik Deploy. Dalam masa 60 saat anda mempunyai URL pelari-kristal.vercel.app. Buka pada telefon anda. Kongsi dengan seorang rakan. Bar deploy kini sifar untuk sisa hujung minggu.

Jumaat 8 malam - 10 malam: Tulis Dokumen Reka Bentuk

Langkah 4: Jawab lima soalan dalam bahasa Inggeris biasa. Buka halaman Notion atau fail markdown di dalam repositori dan jawab:

• Apa yang pemain lakukan setiap 5 saat? (gelung teras)
• Apakah syarat menang dan syarat kalah?
• Berapa lama satu larian atau satu tahap?
• Apakah cangkuk visual? (palet, pencahayaan, rujukan gaya)
• Apakah satu ciri yang menjadikan ini tidak dapat dilupakan dalam 30 saat?

Langkah 5: Komit dokumen reka bentuk. Tolaknya ke repositori. Vercel akan deploy semula. Disiplin menolak setiap perubahan yang bermakna memastikan URL langsung jujur.

Sabtu 9 pagi - 1 petang: Bina Mekanik Teras

Langkah 6: Gantikan mekanik penahan dengan ciri tunggal anda. Ini ialah satu-satunya ciri yang penting. Gunakan sembang Cursor untuk menerangkannya ("apabila pemain mengambil kristal, bekukan musuh berdekatan selama 2 saat dan mainkan loceng"). Lakukan lelaran secara tempatan dengan pnpm dev. Apabila ia terasa betul, tolak.

Langkah 7: Sambungkan keadaan menang/kalah. Binaan 60 saat dengan pengakhiran sebenar terasa seperti permainan. Binaan 60 minit tanpa pengakhiran terasa seperti demo teknologi. Selalu sambungkan skrin menang dahulu, kemudian yang lain.

Sabtu 1 petang - 8 malam: Tambah Satu Tahap

Langkah 8: Bina satu tahap yang diperhalusi. Bukan tiga yang separuh siap. Gunakan kiub penahan untuk geometri. Gunakan watak stok kemahiran. Tetapkan rasa - ketinggian lompatan, kelewatan kamera, keamatan zarah.

Langkah 9: Tambah tatarajah tutorial. Popup "WASD untuk bergerak, klik untuk menembak" dua ayat semasa pelancaran pertama menyelamatkan pelancaran anda daripada pemain keliru yang berputus asa dalam 8 saat. Cursor boleh menjana tatarajah React (atau DOM biasa) dalam 30 saat.

Langkah 10: Tolak setiap jam. Setiap tolakan mendapat URL pratonton Vercel. Hantar setiap satu kepada rakan. Gelung maklum balas ialah senjata rahsia timbunan ini.

Ahad 10 pagi - 4 petang: Penambahbaikan

Langkah 11: Tambah tiga bunyi. Gelung langkah kaki, pad ambien, rentetan kemenangan. Malah tiga bunyi meningkatkan prototaip hujung minggu secara dramatik. Sumber percuma: freesound.org, opengameart.org.

Langkah 12: Tambah gegaran (juice). Zarah semasa kena, gegaran skrin semasa hentaman, popup nombor semasa skor. Gegaran ialah apa yang menjadikan binaan 48 jam kelihatan seperti binaan 6 bulan dalam GIF. Minta Cursor untuk menambah "gegaran skrin dengan keamatan 0.3 selama 150ms apabila pemain menerima kerosakan" - ia akan menulis cangkuk gegaran kamera dalam lima saat.

Langkah 13: Jalankan laluan Lighthouse. Buka URL Vercel pada telefon dan jalankan Chrome DevTools Lighthouse. Timbunan Three.js biasanya sekitar 400 KB hingga 1.5 MB. Jika anda melebihi 3 MB, minta Cursor untuk mendayakan pemisahan kod pada modul berat. Gzip dan brotli Vercel akan menguruskan yang lain.

Langkah 14: Laluan pepijat. Mainkan URL langsung anda lima kali berturut-turut. Betulkan apa sahaja yang rosak dua kali. Abaikan apa sahaja yang rosak sekali.

Ahad 4 petang - 8 malam: Pelancaran

Langkah 15: (Pilihan) Tetapkan domain tersuai. Jika anda membeli nama-permainan.com lebih awal, tambahkan dalam tetapan projek Vercel. SSL adalah automatik. Jika tidak, URL *.vercel.app adalah baik - ia mempunyai HTTPS, ia boleh dikongsi, dan ia dimuatkan di mana-mana.

Langkah 16: Rakam GIF 15 saat daripada detik terbaik. Gunakan URL langsung, bukan localhost. GIF ialah apa yang diklik di Twitter, Bluesky, dan Reddit.

Langkah 17: Cipta halaman itch.io (pilihan tetapi berimpak tinggi). Tajuk, tagline satu baris, tiga tangkapan skrin, GIF, kawalan, kredit, dan tertanam iframe *.vercel.app anda (itch.io menyokong tertanam iframe untuk permainan HTML5). Kini anda mempunyai dua URL - satu untuk perkongsian kasual dan satu untuk audiens pemain.

Langkah 18: Siarkan pautan. Twitter, Bluesky, komuniti dev Discord anda, r/IndieDev, r/threejs, r/WebGames. Sentiasa mulakan dengan GIF. Sentiasa sertakan URL. Jika anda menggunakan kemahiran Vibe Skills, sebutkan dalam siaran log dev - pembangun lain yang membaca bersama akan mahukan permulaan yang sama.

Cara Mengelak Tiga Kegagalan Deploy Vercel Paling Lazim

Tiga perkara merosakkan hampir setiap hujung minggu Three.js + Vercel solo. Ketiga-tiganya ialah pembaikan 5 minit jika anda menemuinya pada malam Jumaat, dan lubang arnab 5 jam jika anda menemuinya pada Ahad jam 7 malam.

• Direktori output binaan salah. Vite lalai kepada dist/. Vercel auto-mengesan Vite dan menggunakan dist/. Jika anda menyesuaikan output, tetapkan outputDirectory dalam vercel.json atau tetapan projek atau deploy anda akan menjadi 404.
• Jalan aset yang berfungsi secara tempatan tetapi 404 dalam pengeluaran. Gunakan jalan relatif atau pembantu import.meta.env.BASE_URL Vite untuk mana-mana fail GLB, tekstur atau audio yang dimuatkan semasa masa jalan. Jalan /assets/... yang dikodkan keras biasanya berfungsi, tetapi jalan Windows mutlak yang disalin biasanya tidak.
• Pengepala CSP yang menyekat kunci penuding atau konteks audio. Permainan orang pertama memerlukan kunci penuding. Audio memerlukan pengaktifan gerak isyarat pengguna. Mana-mana kemahiran daripada kategori Permainan 3D menghantar dengan blok headers yang betul dalam vercel.json untuk menguruskan ini. Jika anda menulis sendiri dari awal, salin konfigurasi daripada repositori kemahiran.

Deploy berfungsi pada hari Jumaat, jadi apabila ini rosak pada hari Ahad, ia sentiasa disebabkan oleh perubahan baru-baru ini. git bisect ialah rakan anda. Lebih baik lagi: teruskan menolak setiap 30 minit supaya komit yang rosak adalah kecil.

Soalan Lazim

Adakah peringkat percuma Vercel akan bertahan jika permainan saya mendapat trafik?

Ya untuk pelancaran hujung minggu dan beberapa minggu pertama. Peringkat percuma memberi anda 100 GB lebar jalur sebulan, yang kira-kira 20,000 mainan binaan Three.js 5 MB. Jika anda mencapai siling itu, pelan Pro ialah $20/bulan dan meningkatkan anda kepada 1 TB. Untuk penghantaran hujung minggu, percuma sudah lebih daripada mencukupi. Kemahiran di Vibe Skills menghantar dengan konfigurasi binaan yang meminimumkan saiz timbunan, yang menjadikan peringkat percuma lebih tahan lama.

Bolehkah saya menggunakan domain tersuai pada peringkat percuma Vercel?

Ya. Peringkat percuma menyokong domain tersuai dengan HTTPS automatik. Beli domain (Namecheap, Pendaftar Cloudflare, Porkbun), arahkan ke Vercel, dan Vercel menguruskan sijil SSL. Persediaan mengambil masa kira-kira 10 minit. Jika anda tidak mempunyai domain, URL nama-permainan.vercel.app cukup pendek untuk dikongsi di mana-mana platform.

Adakah timbunan ini sesuai untuk penyertaan jam permainan?

Ya, dan ia adalah salah satu timbunan terbaik untuk penyertaan jam. Kebanyakan jam (Ludum Dare, GMTK, js13k, GitHub Game Off) menerima mana-mana URL yang boleh dimainkan web. Pautan *.vercel.app berfungsi sama seperti URL itch.io untuk hakim. Ramai pemenang jam menghantar ke kedua-duanya - itch.io untuk audiens pemain, Vercel sebagai URL kanonik yang pantas.

Adakah saya perlu tahu Three.js sebelum memulakan?

Anda memerlukan JavaScript yang mencukupi untuk membaca apa yang ditulis oleh Cursor dan melaraskan nilai. Anda tidak perlu menulis Three.js dari awal. Kemahiran di Vibe Skills menjana persediaan enjin, kamera, pengawal, dan konfigurasi binaan. Cursor menguruskan kod permainan daripada penerangan anda.

Apa yang berlaku jika binaan Vercel saya gagal pada Ahad jam 7 malam?

Penyebab paling biasa ialah ralat TypeScript atau pemboleh ubah persekitaran yang hilang. Vercel menunjukkan log binaan dengan baris yang gagal diserlahkan. Satu klik dalam papan pemuka akan mengembalikan deploy terakhir yang berfungsi dan mempromosikannya kepada pengeluaran. Kerana setiap tolakan ialah deploy pratonton, anda tidak pernah lebih daripada satu komit daripada binaan yang berfungsi. Inilah sebabnya mengapa menolak setiap 30 minit pada hari Sabtu dan Ahad adalah penting.

Bolehkah saya menjual atau mengubah suai kod daripada kemahiran permainan 3D Vibe Skills?

Ya. Kemahiran di Vibe Skills menghantar dengan lesen mesra komersial yang membolehkan anda mengeluarkan kod dalam permainan anda sendiri di Vercel, itch.io, Steam, atau di mana-mana sahaja. Pencipta menyimpan IP kemahiran, anda menyimpan IP permainan yang dibina di atasnya.

Bagaimana jika saya tidak mahu menggunakan Cursor?

Mana-mana editor AI yang boleh mengedit fail projek berfungsi. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - mana-mana daripadanya boleh melakukan lelaran pada rangka kerja Three.js daripada kemahiran Vibe Skills. Kemahiran itu sendiri tidak bergantung pada editor.

Hantarkannya Hujung Minggu Ini

Sebab mengapa kebanyakan pembangun solo tidak pernah menghantar permainan 3D bukanlah enjin, genre, atau tahap kemahiran. Ia ialah malam Jumaat di mana mereka "hanya meneliti sedikit lagi" dan tidak pernah bermula. Hujung minggu percuma seterusnya yang anda ada, ikuti rancangan empat fasa: pasang kemahiran permainan 3D Vibe Skills, tolak ke GitHub, sambung Vercel, deploy menjelang Jumaat jam 8 malam, kemudian luangkan hari Sabtu dan Ahad untuk melakukan lelaran pada URL langsung.

Portfolio anda yang terdiri daripada sepuluh permainan yang dihantar hujung minggu di Vercel lebih berharga daripada projek enjin impian enam bulan anda yang hipotetikal. Yang dihantar sentiasa menang. URL Vercel percuma adalah buktinya.

Semak imbas kemahiran permainan 3D di Vibe Skills →

Lepaskan maraton kod permulaan Three.js. Pasang kemahiran permainan 3D di Vibe Skills, tolak ke Vercel, dan miliki URL langsung menjelang malam Ahad.