Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
Vercel मा ३D खेल आइतबार रातिसम्ममा पठाउनुहोस्: ४८-घण्टाको डिप्लोय प्लेबुक
शुक्रबार साँझ खाली हातबाट आइतबारको खानासम्ममा your-game.vercel.app लिङ्क बनाउन सक्नुहुन्छ। यसका लागि Three.js, Cursor, Vibe Skills बाट एउटा AI कौशल, र Vercel को नि:शुल्क टियर प्रयोग गर्नुपर्छ। सप्ताहन्तको कुल लागत: $0। कुल पूर्वाधार जसको हेरचाह तपाईंले गर्नुपर्छ: यो पनि शून्य।
यो "तपाईंको ल्यापटपमा प्रोटोटाइप बनाउनुहोस् र यसलाई सकियो भन्नुहोस्" होइन। यो एक सार्वजनिक URL हो जुन विश्वमा कोही पनि ब्राउजरमा खोल्न सक्छ, HTTPS, एज क्यासिङ, र कस्टम डोमेन सहित यदि तपाईंलाई एउटा चाहिन्छ भने। AI कौशलले Three.js स्क्याफोल्डिङ र काम गर्ने vercel.json पठाउँछ। Cursor ले पुनरावृत्तिको लुप ह्यान्डल गर्छ। Vercel ले डिप्लोय ह्यान्डल गर्छ। तपाईंले डिजाइन ह्यान्डल गर्नुहुन्छ।
यो गाइड इन्डी डेभ्स, भाइबर कोडर्स, ह्याकाथन सहभागीहरू, र आधा-सकिएका localhost:5173 ट्याबहरूसँग थकित भएका जो कोहीको लागि हो। हामी यो स्ट्याक किन काम गर्छ, ४८-घण्टाको डिप्लोयको शरीररचना, वर्कफ्लोका लागि बनाइएका पाँच ३D खेल कौशल, र शुक्रबारदेखि आइतबारसम्मको चरण-दर-चरण प्रक्रियामा चर्चा गर्छौं।
Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
Vercel + Three.js + AI कौशलहरू सोलो डेभ स्ट्याक किन हो
Vercel Three.js खेलको लागि सबैभन्दा अल्छी सम्भावित डिप्लोय टार्गेट हो। GitHub मा पुश गर्नुहोस्, Vercel ले थाहा पाउँछ, परियोजना निर्माण गर्छ, र ६० सेकेन्ड भित्रमा तपाईंलाई URL फिर्ता दिन्छ। कुनै सर्भर प्रावधान गर्नुपर्दैन, कुनै Docker फाइल छैन, कुनै NGINX कन्फिग छैन, कुनै SSL सेटअप छैन। Three.js बन्डल केवल स्थिर HTML, JS, र WebGL सम्पत्तिहरू हुन्, जुन Vercel को एज नेटवर्कले सेवा दिनको लागि निर्माण गरेको हो।
नि:शुल्क टियरले सप्ताहन्तको सुरुवात आरामसँग कभर गर्छ:
- प्रति महिना १०० GB ब्यान्डविथ। १०,००० प्लेको लागि ५ MB Three.js बिल्ड ५० GB हो। तपाईंले ब्यान्डविथ भन्दा पहिले सप्ताहन्त सिध्याउनुहुनेछ।
- HTTPS र
*.vercel.appसबडोमेनसहित असीमित स्थिर डिप्लोयहरू। - नि:शुल्क टियरमा कस्टम डोमेन समर्थन - यदि तपाईंको
name-game.comछ भने यसलाई ल्याउनुहोस्, अन्यथा नि:शुल्कvercel.appURL हरेक सामाजिक प्लेटफर्ममा साझा गर्न सकिन्छ। - हरेक कमिटको लागि पूर्वावलोकन डिप्लोयहरू - हरेक पुशले आफ्नै URL पाउँछ, त्यसैले तपाईं साथीसँग एउटा बिल्ड साझा गर्न सक्नुहुन्छ र यसलाई नबिगार्दै पुनरावृति जारी राख्न सक्नुहुन्छ।
Vibe Skills बाट एउटा AI कौशल थप्नुहोस् र सामान्य कोड पनि हराउँछ। Three.js दृश्य सेटअप, प्लेयर नियन्त्रक, बिल्ड पाइपलाइन, र Vercel- तयार vercel.json एक आदेशमा उत्पन्न हुन्छ। त्यसपछि Cursor ले बाँकी सप्ताहन्तलाई एउटा च्याटमा परिणत गर्छ जहाँ तपाईं आफूले चाहेको गेमप्ले वर्णन गर्नुहुन्छ र आउटपुट ट्यून गर्नुहुन्छ। त्यो पूरा स्ट्याक हो: आधारको लागि बजार कौशल, पुनरावृत्तिको लागि AI सम्पादक, र डिप्लोयको लागि Vercel। सोलो, नि:शुल्क, र छिटो।
Claude, Cursor, ਅਤੇ ਹੋਰਾਂ ਲਈ ਸੈਂਕੜੇ ਤਿਆਰ-ਕੀਤੇ ਹੁਨਰ ਬ੍ਰਾਊਜ਼ ਕਰੋ।
४८-घण्टाको शरीररचना: शुक्रबारको अवधारणादेखि आइतबारको डिप्लोयसम्म
हरेक सप्ताहन्तको शिप जुन वास्तवमा लाइभ जान्छ, सोही क्रममा जान्छ। चाल यो हो कि आइतबार दिउँसो होइन, शुक्रबार डिप्लोयको योजना बनाउनुहोस्, ताकि अन्तिम छ घण्टा निर्माण त्रुटिसँग लड्नुको सट्टामा पॉलिशमा जान्छ।
| चरण | समय | तपाईं के गर्नुहुन्छ | चरणको अन्त्यसम्ममा के पठाइन्छ |
|---|---|---|---|
| चरण १: अवधारणा | शुक्रबार ६ बजे - १० बजे | विधा छान्नुहोस्, १-पृष्ठ डिजाइन कागजात लेख्नुहोस्, Vibe Skills ३D खेल कौशल स्थापना गर्नुहोस्, सुरुवाती कोड GitHub मा पुश गर्नुहोस्, Vercel मा जडान गर्नुहोस् | आधारभूत दृश्य सहित लाइभ name-game.vercel.app URL |
| चरण २: निर्माण | शनिबार ९ बजे - ८ बजे | प्लेसहोल्डरलाई तपाईंको मुख्य मेकानिकले बदल्नुहोस्, १ स्तर थप्नुहोस्, जित्ने/हार्ने स्थिति काम गराउनुहोस् | सोही Vercel URL मा खेल्न योग्य बिल्ड, हरेक पुशमा स्वचालित रूपमा डिप्लोय हुन्छ |
| चरण ३: पालिस | आइतबार १० बजे - ४ बजे | ध्वनि, जुस, ट्युटोरियल पपअप, बग पास, मोबाइलमा प्रदर्शन जाँच | पहिलो ६० सेकेन्डमा कुनै पनि उपकरणमा नभत्किने बिल्ड |
| चरण ४: लन्च | आइतबार ४ बजे - ८ बजे | कस्टम डोमेन सेट गर्नुहोस् (वैकल्पिक), GIF रेकर्ड गर्नुहोस्, itch.io पृष्ठ लेख्नुहोस्, लिङ्क पोस्ट गर्नुहोस् | सार्वजनिक URL + itch.io पृष्ठ + सोसलमा लन्च पोस्ट |
यसको काम गर्ने कारण शुक्रबार Vercel मा पुश गर्नु हो। URL एक पटक अवस्थित भएपछि, हरेक शनिबार र आइतबारको कमिट स्वचालित रूपमा डिप्लोय हुन्छ। "आइतबार रातिको डिप्लोय प्यानिक" छैन किनभने डिप्लोय शुक्रबार नै भइसकेको छ र सप्ताहन्तभरि स्वचालित रूपमा चलिरहेको छ।
Vercel मा ३D खेल "भाइब कोडिङ" गर्दा कस्तो देखिन्छ
भाइब कोडिङको मतलब तपाईंले के चाहनुहुन्छ भनेर सामान्य अंग्रेजीमा वर्णन गर्नु हो र AI सम्पादकले कोड लेख्न दिनु हो, त्यसपछि आउटपुटमा पुनरावृति गर्नु हो। Vercel मा Three.js खेलको लागि, लुप असामान्य रूपमा सफा छ: Cursor मा हरेक परिवर्तन स्थानीय प्रतिक्रियाको लागि pnpm dev टाढा छ, त्यसपछि प्रत्यक्ष पूर्वावलोकन URL को लागि git push टाढा छ, त्यसपछि main मा उत्पादनमा स्वचालित रूपमा डिप्लोय हुन्छ।
एउटा भाइब-कोड गरिएको Vercel खेल सप्ताहन्त यस्तो देखिन्छ:
- Cursor मा कौशलको सुरुवाती फोल्डर खोल्नुहोस्।
- च्याटमा एउटा सुविधा वर्णन गर्नुहोस्: "यदि २०० मिलिसेकेन्ड भित्र दुई पटक स्पेस थिचियो भने डबल जम्प गर्नुहोस्"।
- Cursor ले नियन्त्रक फाइल सम्पादन गर्छ। बचत गर्नुहोस्।
pnpm devपुनः लोड हुन्छ। तपाईंले ब्राउजरमा जम्प महसुस गर्नुहुन्छ। - यदि यो सही लाग्छ भने,
git push। Vercel ले एउटा पूर्वावलोकन URL बनाउँछ। साथीलाई पठाउनुहोस्। - जब यो लक हुन्छ
mainमा मर्ज गर्नुहोस्। उत्पादन URL ६० सेकेन्ड भित्र अपडेट हुन्छ।
AI ले टाइप गर्छ। Vercel ले डिप्लोय गर्छ। तपाईंले अनुभव र डिजाइन गर्नुहुन्छ।
Vibe Skills मा यो सम्भव बनाउने ५ AI ३D खेल कौशलहरू
यी कौशलहरू Vercel + Three.js + Cursor सप्ताहन्त वर्कफ्लोका लागि बनाइएका छन्। प्रत्येकले Vite-आधारित Three.js परियोजना, एक काम गर्ने vercel.json, Vercel ले एजबाट सेवा दिन सक्ने स्थिर बन्डल उत्पादन गर्ने pnpm build, र परीक्षण गरिएको डिप्लोय मार्गको साथ आउँछ। सबै Vibe Skills मा 3D Games श्रेणी मा छन्।
१. Three.js + Vercel खेल स्टार्टर
पूर्वनिर्धारित छनोट। यसले प्लेयर नियन्त्रक, तेस्रो-व्यक्ति क्यामेरा, प्रकाश रिग, स्काईबक्स, र टक्करहरू सहितको ग्राउन्ड प्लेनसहित Three.js दृश्य उत्पन्न गर्छ। यो vercel.json सँग आउँछ जसले Three.js सम्पत्ति बन्डलहरूको लागि सही क्यासिङ हेडरहरू सेट गर्दछ। pnpm dev स्थानीय रूपमा चल्छ; Vercel ड्यासबोर्डमा एक क्लिकले GitHub रिपोलाई जडान गर्छ र तपाईंलाई एउटा प्रत्यक्ष URL प्राप्त हुन्छ।
यसका लागि उत्तम: शुद्ध २D बाहेक कुनै पनि विधा। यदि तपाईंलाई अझै थाहा छैन कि तपाईं के बनाउँदै हुनुहुन्छ भने यसको प्रयोग गर्नुहोस्।
२. फर्स्ट-पर्सन Vercel वाकर
एक पालिस गरिएको फर्स्ट-पर्सन नियन्त्रक (WASD + माउस पोइन्टर लक + गुरुत्वाकर्षण + स्प्रिन्ट + जम्प) खुट्टाको आवाज, टाउकोको हलचल, र vercel.json सँग जसले पोइन्टर-लक CSP हेडरहरू सही रूपमा ह्यान्डल गर्छ। यो एकले धेरै सोलो डेभहरूलाई उत्पादनमा त्रस्त बनाउँछ। यो कौशलले तपाईंको लागि यसलाई समाधान गर्छ।
यसका लागि उत्तम: वाकिंग सिम, हरर प्रोटोटाइप, कथा खेल, संग्रहालय प्रदर्शनी।
३. ब्राउजर एरिना शूटर किट
एउटा टप-डाउन एरिना (ट्विन-स्टिक कन्ट्रोलर, वेभ स्पोनर, आधारभूत शत्रु AI, प्रोजेक्टाइल प्रणाली, स्कोर HUD) Vercel-ट्यून गरिएको बिल्डको साथ जसले सम्पत्तिहरू gzips गर्छ, AI लाई कोड-स्प्लिट गर्छ, र संगीतलाई ढिलो-लोड गर्छ। मल्टिप्लेयर हुकहरू समावेश छन्; सप्ताहन्तले एकल-खेलाडी पठाउँछ।
यसका लागि उत्तम: आर्केड शूटर, बुलेट हेल, मोबाइलमा छिटो लोड हुन आवश्यक जाम प्रविष्टिहरू।
४. Vercel पज्जल प्लेटफर्मर
एउटा तेस्रो-व्यक्ति प्लेटफर्मर (परिवर्तनीय जम्प, कोयोटी समय, कगार पत्ता लगाउने), चेकपोइन्टहरू, तीनवटा स्टब स्तरहरू जुन तपाईंले Blender वा कोडमा सम्पादन गर्न सक्नुहुन्छ, र एउटा पुन: स्पोन लुप। vercel.json तत्काल एज-क्यास गरिएको स्तर पुन: लोडहरूको लागि कन्फिगर गरिएको छ, त्यसैले खेलिरहेको अनुभव फोनमा छिटो लाग्छ।
यसका लागि उत्तम: पज्जल प्लेटफर्मर, पार्कौर प्रोटोटाइप, स्तर-डिजाइन प्रयोगहरू।
५. Vercel ड्राइभिङ स्यान्डबक्स
आर्केड ड्राइभिङ अनुभव (प्रवेग वक्र, ड्रिफ्ट फिजिक्स, क्यामेरा ढिलाइ, आधारभूत भूभाग) कम-पॉली कार, ट्र्याक टेम्प्लेट, र ठूलो भूभाग मेशहरूको लागि ट्यून गरिएको डिप्लोयको साथ। पूर्व-सेट HTTP हेडरहरूले WebGL सन्दर्भलाई सफारीमा छिटो सुरु गर्न मद्दत गर्दछ, ऐतिहासिक रूपमा Three.js को लागि सबैभन्दा ढिलो ब्राउजर।
यसका लागि उत्तम: आर्केड रेसिङ, अफ-रोड ड्राइभिङ, पोर्टफोलियोका लागि कार-फिल डेमो।
Vibe Skills मा सबै ३D खेल कौशलहरू ब्राउज गर्नुहोस् →
शुक्रबारदेखि आइतबारसम्म चरण-दर-चरण
यो सटीक तालिका हो। सुरुको समय समायोजन गर्नुहोस्, तर क्रम राख्नुहोस्। मुख्य माइलस्टोन शुक्रबार रातिको Vercel डिप्लोय हो। त्यसपछिको सबै कुरा पुनरावृति हो।
शुक्रबार ६ बजे - ८ बजे: कौशल छान्नुहोस्, GitHub मा पुश गर्नुहोस्, Vercel जडान गर्नुहोस्
चरण १: Vibe Skills मा ३D खेल कौशल छान्नुहोस्। 3D Games श्रेणी ब्राउज गर्नुहोस्, तपाईंको विधासँग मिल्ने एउटा छान्नुहोस्, र नयाँ फोल्डरमा स्टार्टर स्थापना गर्नुहोस्। Cursor मा यसलाई खोल्नुहोस्। ७ बजेसम्ममा तपाईंले चल्ने खेलाडीसहितको Three.js दृश्य देख्नुपर्छ।
चरण २: GitHub रिपो सिर्जना गर्नुहोस् र पुश गर्नुहोस्। git init, git remote add, git push। तपाईंको खेलको स्लगलाई रिपो नामको रूपमा प्रयोग गर्नुहोस् (crystal-runner, lunar-fishing, जे पनि)। रिपो नाम प्रायः तपाईंको URL बन्छ।
चरण ३: Vercel सँग रिपो जडान गर्नुहोस्। GitHub (नि:शुल्क) सँग Vercel मा साइन इन गर्नुहोस्, "Add New Project" मा क्लिक गर्नुहोस्, रिपो छान्नुहोस्। Vercel ले Vite स्वतः पहिचान गर्छ र निर्माणलाई कन्फिगर गर्छ। Deploy मा क्लिक गर्नुहोस्। ६० सेकेन्ड भित्रमा तपाईंले crystal-runner.vercel.app URL प्राप्त गर्नुहुनेछ। यसलाई आफ्नो फोनमा खोल्नुहोस्। एक जना साथीलाई साझा गर्नुहोस्। बाँकी सप्ताहन्तको लागि डिप्लोय बार अब शून्य छ।
शुक्रबार ८ बजे - १० बजे: डिजाइन कागजात लेख्नुहोस्
चरण ४: सामान्य अंग्रेजीमा पाँच प्रश्नहरूको जवाफ दिनुहोस्। रिपो भित्र एउटा Notion पृष्ठ वा markdown फाइल खोल्नुहोस् र जवाफ दिनुहोस्:
- खेलाडीले हरेक ५ सेकेन्डमा के गरिरहेको छ? (मुख्य लुप)
- जित्ने अवस्था र हार्ने अवस्था के हो?
- एउटा दौड वा एउटा स्तर कति लामो छ?
- भिजुअल हुक के हो? (प्यालेट, प्रकाश, शैली सन्दर्भ)
- ३० सेकेन्डमा यसलाई अविस्मरणीय बनाउने एक सुविधा के हो?
चरण ५: डिजाइन कागजात कमिट गर्नुहोस्। यसलाई रिपोमा पुश गर्नुहोस्। Vercel ले पुन: डिप्लोय गर्नेछ। हरेक अर्थपूर्ण परिवर्तनलाई पुश गर्ने अनुशासनले प्रत्यक्ष URL लाई इमानदार राख्छ।
शनिबार ९ बजे - १ बजे: मुख्य मेकानिक निर्माण गर्नुहोस्
चरण ६: प्लेसहोल्डर मेकानिकलाई तपाईंको एक सुविधाले बदल्नुहोस्। यो एक मात्र सुविधा हो जुन महत्त्वपूर्ण छ। यसको लागि Cursor च्याट प्रयोग गर्नुहोस् ("जब खेलाडीले क्रिस्टल उठाउँछ, २ सेकेन्डका लागि नजिकका शत्रुहरूलाई स्थिर गर्नुहोस् र एउटा चाइम बजाउनुहोस्")। pnpm dev सँग स्थानीय रूपमा पुनरावृति गर्नुहोस्। जब यो सही लाग्छ, पुश गर्नुहोस्।
चरण ७: जित्ने/हार्ने स्थिति जोड्नुहोस्। वास्तविक अन्त्य सहितको ६०-सेकेन्डको निर्माणले खेल जस्तो लाग्छ। अन्त्य नभएको ६०-मिनेटको निर्माणले टेक डेमो जस्तो लाग्छ। सधैं पहिले जित्ने स्क्रिन जोड्नुहोस्, त्यसपछि अरू सबै कुरा।
शनिबार १ बजे - ८ बजे: एउटा स्तर थप्नुहोस्
चरण ८: एउटा पालिस गरिएको स्तर बनाउनुहोस्। तीनवटा आधा-बेक्ड होइन। ज्यामितिको लागि प्लेसहोल्डर क्यूबहरू प्रयोग गर्नुहोस्। कौशलको स्टक क्यारेक्टर प्रयोग गर्नुहोस्। अनुभव ट्यून गर्नुहोस् - जम्प उचाइ, क्यामेरा ढिलाइ, कण तीव्रता।
चरण ९: एउटा ट्युटोरियल ओभरले थप्नुहोस्। पहिलो पटक सुरु गर्दा दुई-वाक्यको "चल्नको लागि WASD, फायर गर्न क्लिक गर्नुहोस्" पपअपले कन्फ्युज भएका खेलाडीहरू जसले ८ सेकेन्डमा हार मान्छन्, तिनीहरूबाट तपाईंको लन्च बचाउँछ। Cursor ले ३० सेकेन्डमा React (वा भ्यानिلا DOM) ओभरले उत्पन्न गर्न सक्छ।
चरण १०: हरेक घण्टा पुश गर्नुहोस्। प्रत्येक पुशले Vercel पूर्वावलोकन URL पाउँछ। प्रत्येकलाई साथीलाई पठाउनुहोस्। प्रतिक्रिया लुप यस स्ट्याकको गोप्य हतियार हो।
आइतबार १० बजे - ४ बजे: पालिस
चरण ११: तीनवटा ध्वनिहरू थप्नुहोस्। खुट्टाको आवाज लुप, परिवेश प्याड, जित्ने ध्वनि। तीनवटा ध्वनिले पनि सप्ताहन्तको प्रोटोटाइपलाई धेरै उकास्छ। नि:शुल्क स्रोतहरू: freesound.org, opengameart.org।
चरण १२: जुस थप्नुहोस्। प्रहारमा कणहरू, प्रभावमा स्क्रिन शेक, स्कोरमा नम्बर पपअप। जुसले ४८-घण्टाको निर्माणलाई GIF मा ६-महिनाको जस्तो देखाउँछ। Cursor लाई "खेलाडीले क्षति लिँदा ०.३ को तीव्रताको स्क्रिन शेक १५० मिलिसेकेन्डको लागि" थप्न भन्नुहोस् - यसले पाँच सेकेन्डमा क्यामेरा-शेकिंग हुक लेख्छ।
चरण १३: लाइटहाउस पास चलाउनुहोस्। फोनमा Vercel URL खोल्नुहोस् र Chrome DevTools Lighthouse चलाउनुहोस्। Three.js बन्डलहरू सामान्यतया ४०० KB देखि १.५ MB सम्म हुन्छन्। यदि तपाईं ३ MB भन्दा बढी हुनुहुन्छ भने, भारी मोड्युलहरूमा कोड विभाजन सक्षम गर्न Cursor लाई सोध्नुहोस्। Vercel को gzip र brotli ले बाँकी काम गर्नेछ।
चरण १४: बग पास। आफ्नो प्रत्यक्ष URL लगातार पाँच पटक खेल्नुहोस्। दुई पटक भत्किने जुनसुकै कुरा पनि ठीक गर्नुहोस्। एक पटक भत्किने जुनसुकै कुरालाई बेवास्ता गर्नुहोस्।
आइतबार ४ बजे - ८ बजे: लन्च
चरण १५: (वैकल्पिक) कस्टम डोमेन सेट गर्नुहोस्। यदि तपाईंले पहिले नै name-game.com किन्नुभएको छ भने, यसलाई Vercel को परियोजना सेटिङहरूमा थप्नुहोस्। SSL स्वचालित छ। अन्यथा *.vercel.app URL ठीक छ - यसमा HTTPS छ, यो साझा गर्न सकिन्छ, र यो सबैतिर लोड हुन्छ।
चरण १६: सबैभन्दा राम्रो क्षणको १५-सेकेन्डको GIF रेकर्ड गर्नुहोस्। प्रत्यक्ष URL प्रयोग गर्नुहोस्, localhost होइन। GIF नै Twitter, Bluesky, र Reddit मा क्लिक हुने कुरा हो।
चरण १७: एउटा itch.io पृष्ठ सिर्जना गर्नुहोस् (वैकल्पिक तर उच्च-लाभकारी)। शीर्षक, एक-लाइन ट्यागलाइन, तीनवटा स्क्रिनसट, GIF, नियन्त्रणहरू, क्रेडिटहरू, र तपाईंको *.vercel.app iframe को एउटा एम्बेड (itch.io ले HTML5 खेलहरूको लागि iframe एम्बेडलाई समर्थन गर्दछ)। अब तपाईं दुई URL पाउनुहुन्छ - एक सामान्य साझेदारीको लागि र एक गेमर दर्शकहरूको लागि।
चरण १८: लिङ्क पोस्ट गर्नुहोस्। Twitter, Bluesky, तपाईंको डेभ समुदाय Discord, r/IndieDev, r/threejs, r/WebGames। सधैं GIF बाट सुरु गर्नुहोस्। सधैं URL समावेश गर्नुहोस्। यदि तपाईंले Vibe Skills कौशल प्रयोग गर्नुभयो भने, यसलाई डेभलлог पोस्टमा उल्लेख गर्नुहोस् - सँगै पढ्ने अन्य डेभहरूलाई पनि सोही स्टार्टर चाहन्छन्।
Vercel डिप्लोयको तीन सबैभन्दा सामान्य विफलताहरूबाट बच्ने तरिका
लगभग हरेक सोलो Three.js + Vercel सप्ताहन्तमा तीन कुराहरू बिग्रिन्छन्। यदि तपाईंले तिनीहरूलाई शुक्रबार राति समात्नुभयो भने ती सबै ५-मिनेटका समाधानहरू हुन्, र यदि तपाईंले तिनीहरूलाई आइतबार ७ बजे पत्ता लगाउनुभयो भने ५-घण्टाका गहिरो खाडल हुन्।
- गलत बिल्ड आउटपुट डाइरेक्टरी। Vite ले पूर्वनिर्धारित रूपमा
dist/प्रयोग गर्छ। Vercel ले Vite स्वतः पहिचान गर्छ रdist/प्रयोग गर्छ। यदि तपाईंले आउटपुट अनुकूलित गर्नुभएको छ भने,vercel.jsonवा परियोजना सेटिङहरूमाoutputDirectoryसेट गर्नुहोस् वा तपाईंको डिप्लोय ४०४ हुनेछ। - सम्पत्ति मार्गहरू जुन स्थानीय रूपमा काम गर्छ तर उत्पादनमा ४०४ हुन्छ। कुनै पनि रनटाइम-लोड गरिएको GLB, टेक्सचर, वा अडियो फाइलको लागि सापेक्ष मार्गहरू वा Vite
import.meta.env.BASE_URLसहायक प्रयोग गर्नुहोस्। हार्डकोड गरिएको/assets/...मार्गहरू सामान्यतया काम गर्छन्, तर प्रतिलिपि-पेस्ट गरिएको पूर्ण Windows मार्गहरू निश्चित रूपमा काम गर्दैनन्। - CSP हेडरहरू जसले पोइन्टर लक वा अडियो सन्दर्भलाई अवरुद्ध गर्छ। फर्स्ट-पर्सन खेलहरूलाई पोइन्टर लक चाहिन्छ। अडियोलाई प्रयोगकर्ता-अभिप्राय सक्रियता चाहिन्छ। 3D Games श्रेणी का कुनै पनि कौशलले यसलाई ह्यान्डल गर्न
vercel.jsonमा सहीheadersब्लकको साथ आउँछ। यदि तपाईंले आफ्नो स्क्र्याचबाट लेख्नुभयो भने, कौशलको रिपोबाट कन्फिग प्रतिलिपि गर्नुहोस्।
डिप्लोय शुक्रबार काम गर्छ, त्यसैले जब यो आइतबार बिग्रिन्छ यो सधैं हालैको परिवर्तनको कारणले हुन्छ। git bisect तपाईंको साथी हो। अझ राम्रो: हरेक ३० मिनेटमा पुश गरिरहनुहोस् ताकि बिग्रिएको कमिट सानो होस्।
सामान्य प्रश्नहरू
मेरो खेलमा ट्राफिक आएमा Vercel नि:शुल्क टियरले साँच्चै साथ दिन्छ?
हो, सप्ताहन्तको लन्च र पहिलो केही हप्ताको लागि। नि:शुल्क टियरले तपाईंलाई प्रति महिना १०० GB ब्यान्डविथ दिन्छ, जुन ५ MB Three.js बिल्डको लगभग २०,००० प्ले हो। यदि तपाईंले त्यो सीमा छोयो भने, प्रो योजना $२०/महिना हो र तपाईंलाई १ TB सम्म बढाउँछ। सप्ताहन्तको शिपको लागि, नि:शुल्क पर्याप्त भन्दा बढी छ। Vibe Skills मा रहेका कौशलहरूले बन्डल साइजलाई कम गर्ने निर्माण कन्फिगहरूको साथ पठाउँछन्, जसले नि:शुल्क टियरलाई थप फैलाउँछ।
के म Vercel नि:शुल्क टियरमा कस्टम डोमेन प्रयोग गर्न सक्छु?
हो। नि:शुल्क टियरले स्वचालित HTTPS सँग कस्टम डोमेनहरूलाई समर्थन गर्दछ। एउटा डोमेन किन्नुहोस् (Namecheap, Cloudflare Registrar, Porkbun), यसलाई Vercel मा पोइन्ट गर्नुहोस्, र Vercel ले SSL प्रमाणपत्रलाई ह्यान्डल गर्छ। सेटअपमा लगभग १० मिनेट लाग्छ। यदि तपाईंको डोमेन छैन भने, name-game.vercel.app URL कुनै पनि प्लेटफर्ममा साझा गर्न पर्याप्त छोटो छ।
के यो स्ट्याक खेल जाम सबमिशनको लागि ठीक छ?
हो, र यो जाम सबमिशनहरूको लागि उत्कृष्ट स्ट्याकहरू मध्ये एक हो। धेरै जामहरू (Ludum Dare, GMTK, js13k, GitHub Game Off) कुनै पनि वेब-खेल्न योग्य URL स्वीकार गर्छन्। *.vercel.app लिङ्कले न्यायाधीशहरूको लागि itch.io URL जस्तै काम गर्दछ। धेरै जाम विजेताहरू दुवैमा पठाउँछन् - गेमर दर्शकहरूको लागि itch.io, र छिटो मानक URL को रूपमा Vercel।
सुरु गर्नु अघि मलाई Three.js जान्नुपर्छ?
तपाईंलाई Cursor ले के लेख्यो भनेर पढ्न र मानहरू ट्यून गर्न पर्याप्त JavaScript चाहिन्छ। तपाईंले Three.js स्क्र्याचबाट लेख्नुपर्दैन। Vibe Skills मा रहेका कौशलहरूले इन्जिन सेटअप, क्यामेरा, नियन्त्रक, र बिल्ड कन्फिग उत्पन्न गर्छन्। Cursor ले तपाईंको विवरणहरूबाट गेमप्ले कोड ह्यान्डल गर्छ।
यदि मेरो Vercel बिल्ड आइतबार ७ बजे बिग्रियो भने के हुन्छ?
सबैभन्दा सामान्य कारण TypeScript त्रुटि वा हराइरहेको env var हो। Vercel ले बिल्ड लग देखाउँछ जसमा बिग्रिएको लाइन हाइलाइट गरिएको हुन्छ। ड्यासबोर्डमा एक क्लिकले अन्तिम काम गर्ने डिप्लोयमा फिर्ता गर्छ र यसलाई उत्पादनमा पदोन्नति गर्छ। किनभने हरेक पुश एउटा पूर्वावलोकन डिप्लोय हो, तपाईं काम गर्ने बिल्डबाट कहिल्यै एक कमिटभन्दा बढी टाढा हुनुहुन्न। यही कारणले शनिबार र आइतबार हरेक ३० मिनेटमा पुश गर्नु महत्त्वपूर्ण छ।
के म Vibe Skills ३D खेल कौशलबाट कोड बेच्न वा परिमार्जन गर्न सक्छु?
हो। Vibe Skills मा रहेका कौशलहरूले व्यावसायिक-मैत्री लाइसेन्सको साथ पठाउँछ जसले तपाईंलाई Vercel, itch.io, Steam, वा अरू कतै पनि आफ्नो खेलमा कोड जारी गर्न दिन्छ। सिर्जनाकर्ताहरूले कौशलको IP राख्छन्, तपाईंले यसमा निर्मित खेलको IP राख्नुहुन्छ।
यदि म Cursor प्रयोग गर्न चाहँदिन भने के गर्ने?
प्रोजेक्ट फाइलहरू सम्पादन गर्न सक्ने कुनै पनि AI सम्पादक काम गर्छ। Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - यी कुनै पनि Vibe Skills कौशलबाट Three.js स्क्याफोल्डिङमा पुनरावृति गर्न सक्छन्। कौशल आफैं सम्पादक-अज्ञेयवादी छ।
यो सप्ताहन्तमा पठाउनुहोस्
अधिकांश सोलो डेभहरूले कहिल्यै ३D खेल नपठाउनुको कारण इन्जिन, विधा, वा कौशल सीमा होइन। यो शुक्रबार राति हो जहाँ उनीहरू "अझै केही अनुसन्धान गर्छु" र कहिल्यै सुरु गर्दैनन्। तपाईंको अर्को खाली सप्ताहन्तमा, चार-चरण योजना पालना गर्नुहोस्: Vibe Skills ३D खेल कौशल स्थापना गर्नुहोस्, GitHub मा पुश गर्नुहोस्, Vercel जडान गर्नुहोस्, शुक्रबार ८ बजेसम्ममा डिप्लोय गर्नुहोस्, त्यसपछि शनिबार र आइतबार प्रत्यक्ष URL मा पुनरावृति गर्नुहोस्।
Vercel मा दस सप्ताहन्त-शिप्ड खेलहरूको तपाईंको पोर्टफोलियो तपाईंको काल्पनिक छ-महिनाको सपना इन्जिन परियोजना भन्दा बढी मूल्यवान छ। शिप गरिएकोले सधैं जित्छ। नि:शुल्क Vercel URL प्रमाण हो।
Vibe Skills मा ३D खेल कौशलहरू ब्राउज गर्नुहोस् →
Three.js को बॉयलरप्लेट म्याराथन छोड्नुहोस्। Vibe Skills मा ३D खेल कौशल स्थापना गर्नुहोस्, Vercel मा पुश गर्नुहोस्, र आइतबार रातिसम्ममा एउटा प्रत्यक्ष URL प्राप्त गर्नुहोस्।