
เลือกดู AI Skill สำเร็จรูปหลายร้อยรายการสำหรับ Claude, Cursor และอื่นๆ
เปิดตัวเกม 3 มิติบน Vercel ภายในคืนวันอาทิตย์: คู่มือการ Deploy 48 ชั่วโมง
คุณสามารถเริ่มต้นจากค่ำวันศุกร์ที่ว่างเปล่า ไปจนถึงลิงก์ your-game.vercel.app ได้ภายในมื้อเย็นวันอาทิตย์ เทคโนโลยีที่ใช้คือ Three.js, Cursor, ทักษะ AI จาก Vibe Skills และระดับฟรีของ Vercel ค่าใช้จ่ายทั้งหมดสำหรับสุดสัปดาห์: $0 โครงสร้างพื้นฐานทั้งหมดที่คุณต้องดูแล: ก็เป็นศูนย์เช่นกัน
นี่ไม่ใช่ "สร้างต้นแบบบนแล็ปท็อปของคุณแล้วเรียกจบ" นี่คือ URL สาธารณะที่ทุกคนในโลกสามารถเปิดได้ในเบราว์เซอร์ พร้อม HTTPS, การแคชที่ขอบ, และโดเมนที่กำหนดเองหากคุณต้องการ ทักษะ AI จัดการโครงสร้างพื้นฐาน Three.js และ vercel.json ที่ใช้งานได้ Cursor จัดการวงจรการวนซ้ำ Vercel จัดการการ Deploy คุณจัดการการออกแบบ
คู่มือนี้สำหรับนักพัฒนาอิสระ, นักพัฒนาที่ใช้สไตล์ "vibe coding", ผู้เข้าร่วม Hackathon, และใครก็ตามที่เบื่อกับแท็บ localhost:5173 ที่ยังทำไม่เสร็จ เราจะกล่าวถึงว่าทำไมเทคโนโลยีเหล่านี้จึงทำงานได้, โครงสร้างของการ Deploy 48 ชั่วโมง, ทักษะเกม 3 มิติห้ารายการที่สร้างขึ้นสำหรับเวิร์กโฟลว์นี้, และขั้นตอนทีละขั้นตอนตั้งแต่เย็นวันศุกร์ถึงเย็นวันอาทิตย์

เลือกดู AI Skill สำเร็จรูปหลายร้อยรายการสำหรับ Claude, Cursor และอื่นๆ
ทำไม Vercel + Three.js + ทักษะ AI จึงเป็น Stack สำหรับนักพัฒนาเดี่ยว
Vercel คือเป้าหมายการ Deploy ที่ง่ายที่สุดเท่าที่จะเป็นไปได้สำหรับเกม Three.js Push ไปที่ GitHub, Vercel จะรับรู้, สร้างโปรเจกต์, และส่ง URL กลับมาภายใน 60 วินาที ไม่ต้องจัดสรรเซิร์ฟเวอร์, ไม่มีไฟล์ Docker, ไม่มีคอนฟิก NGINX, ไม่มีการตั้งค่า SSL ชุด Three.js เป็นเพียง HTML, JS, และ WebGL assets แบบสแตติก ซึ่งเป็นสิ่งที่เครือข่ายขอบของ Vercel ถูกสร้างขึ้นมาเพื่อให้บริการ
ระดับฟรีครอบคลุมการเปิดตัวสุดสัปดาห์ได้อย่างสบาย:
- แบนด์วิดท์ 100 GB ต่อเดือน ชุด Three.js ขนาด 5 MB ที่เล่น 10,000 ครั้งคือ 50 GB คุณจะใช้เวลาสุดสัปดาห์หมดก่อนที่คุณจะใช้แบนด์วิดท์หมด
- การ Deploy แบบสแตติกไม่จำกัด พร้อม HTTPS และโดเมนย่อย
*.vercel.app - การรองรับโดเมนที่กำหนดเอง ในระดับฟรี - นำ
name-game.comของคุณเองมาใช้หากมี, มิฉะนั้น URLvercel.appฟรีก็สามารถแชร์ได้บนทุกแพลตฟอร์มโซเชียล - การแสดงตัวอย่างการ Deploy สำหรับทุก commit - ทุกการ push จะได้ URL ของตัวเอง, ดังนั้นคุณสามารถแชร์ build กับเพื่อนและทำซ้ำต่อไปได้โดยไม่ทำให้มันเสียหาย
เพิ่มทักษะ AI จาก Vibe Skills และโค้ดพื้นฐานก็จะหายไปเช่นกัน การตั้งค่าฉาก Three.js, ตัวควบคุมผู้เล่น, กระบวนการสร้าง, และ vercel.json ที่พร้อมใช้งานกับ Vercel ถูกสร้างขึ้นในคำสั่งเดียว จากนั้น Cursor จะเปลี่ยนช่วงเวลาที่เหลือของสุดสัปดาห์ให้เป็นการสนทนาที่คุณอธิบายรูปแบบการเล่นที่คุณต้องการและปรับแต่งผลลัพธ์ นั่นคือสแต็กทั้งหมด: ทักษะจากตลาดสำหรับพื้นฐาน, ตัวแก้ไข AI สำหรับการวนซ้ำ, และ Vercel สำหรับการ Deploy เดี่ยว, ฟรี, และรวดเร็ว

เลือกดู AI Skill สำเร็จรูปหลายร้อยรายการสำหรับ Claude, Cursor และอื่นๆ
โครงสร้าง 48 ชั่วโมง: แนวคิดวันศุกร์สู่การ Deploy วันอาทิตย์
ทุกสุดสัปดาห์ที่ Deploy แล้วออกสู่สาธารณะจะดำเนินไปตามขั้นตอนเดียวกัน สิ่งสำคัญคือการวางแผนการ Deploy ในวันศุกร์, ไม่ใช่บ่ายวันอาทิตย์, เพื่อให้หกชั่วโมงสุดท้ายไปกับการปรับปรุงให้สมบูรณ์แทนที่จะต่อสู้กับข้อผิดพลาดในการสร้าง
| ระยะ | บล็อกเวลา | สิ่งที่คุณทำ | สิ่งที่ถูกส่งมอบเมื่อสิ้นสุดระยะ |
|---|---|---|---|
| ระยะที่ 1: แนวคิด | เย็นวันศุกร์ 18:00 - 22:00 น. | เลือกประเภทเกม, เขียนเอกสารออกแบบ 1 หน้า, ติดตั้งทักษะเกม 3 มิติ Vibe Skills, Push โค้ดเริ่มต้นไปที่ GitHub, เชื่อมต่อกับ Vercel | URL name-game.vercel.app ที่ใช้งานได้พร้อมฉากพื้นฐาน |
| ระยะที่ 2: สร้าง | วันเสาร์ 9:00 - 20:00 น. | แทนที่ส่วนที่คั่นด้วยกลไกหลักของคุณ, เพิ่ม 1 ด่าน, ทำให้สถานะชนะ/แพ้ใช้งานได้ | Build ที่สามารถเล่นได้ที่ URL Vercel เดิม, Deploy อัตโนมัติเมื่อทุกครั้งที่ Push |
| ระยะที่ 3: ปรับปรุง | วันอาทิตย์ 10:00 - 16:00 น. | เสียง, การเสริมแต่ง, ป๊อปอัปสอน, ตรวจสอบข้อผิดพลาด, ตรวจสอบประสิทธิภาพบนมือถือ | Build ที่ไม่พังภายใน 60 วินาทีแรกบนอุปกรณ์ใดๆ |
| ระยะที่ 4: เปิดตัว | วันอาทิตย์ 16:00 - 20:00 น. | ตั้งค่าโดเมนที่กำหนดเอง (ไม่บังคับ), บันทึก GIF, เขียนหน้า itch.io, โพสต์ลิงก์ | URL สาธารณะ + หน้า itch.io + โพสต์เปิดตัวบนโซเชียล |
เหตุผลที่สิ่งนี้ได้ผลคือการ Push ไปยัง Vercel ในวันศุกร์ เมื่อ URL มีอยู่แล้ว การ commit ทุกครั้งในวันเสาร์และอาทิตย์จะถูก Deploy โดยอัตโนมัติ จะไม่มี "ความตื่นตระหนกในการ Deploy คืนวันอาทิตย์" เพราะการ Deploy ได้เกิดขึ้นแล้วในวันศุกร์และทำงานโดยอัตโนมัติตลอดสุดสัปดาห์
"Vibe Coding" เกม 3 มิติบน Vercel มีลักษณะอย่างไร
Vibe coding หมายถึงการอธิบายสิ่งที่คุณต้องการเป็นภาษาอังกฤษธรรมดาและปล่อยให้ตัวแก้ไข AI เขียนโค้ด จากนั้นค่อยๆ ปรับปรุงผลลัพธ์ สำหรับเกม Three.js บน Vercel วงจรการทำงานนั้นสะอาดผิดปกติ: ทุกการเปลี่ยนแปลงใน Cursor จะอยู่ห่างจากการตอบสนองในเครื่องเพียง pnpm dev แล้วห่างจากการแสดงตัวอย่างสดเพียง git push จากนั้น Deploy อัตโนมัติไปยัง Production เมื่อ main
สุดสัปดาห์ของ Vercel game ที่เขียนด้วย vibe coding จะมีลักษณะดังนี้:
- เปิดโฟลเดอร์เริ่มต้นของทักษะใน Cursor
- อธิบายฟีเจอร์ในแชท: "กระโดดสองครั้งหากกด spacebar สองครั้งภายใน 200ms"
- Cursor แก้ไขไฟล์ controller บันทึก
pnpm devโหลดใหม่ คุณจะรู้สึกถึงการกระโดดในเบราว์เซอร์ - หากรู้สึกดี ให้
git pushVercel จะสร้าง URL แสดงตัวอย่าง ส่งให้เพื่อน - Merge ไปยัง
mainเมื่อรู้สึกได้ที่แล้ว Production URL จะอัปเดตภายใน 60 วินาที
AI ทำการพิมพ์ Vercel ทำการ Deploy คุณทำความรู้สึกและการออกแบบ
5 ทักษะเกม 3 มิติ AI ที่ทำให้สิ่งนี้เป็นไปได้บน Vibe Skills
ทักษะเหล่านี้สร้างขึ้นสำหรับเวิร์กโฟลว์สุดสัปดาห์ Vercel + Three.js + Cursor แต่ละอันมีโปรเจกต์ Three.js ที่ใช้ Vite, vercel.json ที่ใช้งานได้, pnpm build ที่สร้างชุดสแตติกที่ Vercel สามารถให้บริการจากขอบ, และเส้นทางการ Deploy ที่ผ่านการทดสอบ ทั้งหมดอยู่ใน หมวดหมู่ 3D Games บน Vibe Skills
1. Three.js + Vercel Game Starter
ตัวเลือกเริ่มต้น สร้างฉาก Three.js พร้อมตัวควบคุมผู้เล่น, กล้องบุคคลที่สาม, ชุดไฟ, skybox, และระนาบพื้นพร้อมการชน มาพร้อมกับ vercel.json ที่ตั้งค่า header การแคชที่ถูกต้องสำหรับชุด asset Three.js pnpm dev ทำงานในเครื่อง; คลิกเดียวในแดชบอร์ด Vercel จะเชื่อมต่อ repo GitHub และคุณจะได้ URL สด
เหมาะสำหรับ: ทุกประเภทเกมยกเว้น 2D ล้วนๆ ใช้สิ่งนี้หากคุณยังไม่รู้ว่าคุณกำลังจะสร้างอะไร
2. First-Person Vercel Walker
ตัวควบคุมบุคคลที่หนึ่งที่สมบูรณ์แบบ (WASD + การล็อคเมาส์ + แรงโน้มถ่วง + วิ่ง + กระโดด) พร้อม hook สำหรับเสียงฝีเท้า, การสั่นของศีรษะ, และ vercel.json ที่จัดการ header CSP สำหรับการล็อคเมาส์ได้อย่างถูกต้อง สิ่งนี้มักทำให้โปรแกรมเมอร์เดี่ยวติดขัดในการผลิต ทักษะนี้จะแก้ไขให้คุณ
เหมาะสำหรับ: เกมเดินชม, ต้นแบบเกมสยองขวัญ, เกมเล่าเรื่อง, นิทรรศการพิพิธภัณฑ์
3. Browser Arena Shooter Kit
ฉากต่อสู้แบบมุมมองจากด้านบน (ตัวควบคุมแบบ twin-stick, ตัวสร้างคลื่น, AI ศัตรูพื้นฐาน, ระบบกระสุน, HUD คะแนน) พร้อม build ที่ปรับแต่งสำหรับ Vercel ที่ทำการ gzip asset, แบ่งโค้ด AI, และโหลดเพลงแบบ lazy-loading มี hook สำหรับผู้เล่นหลายคน; สุดสัปดาห์นี้เน้นผู้เล่นคนเดียว
เหมาะสำหรับ: เกมยิงแบบอาร์เคด, bullet hell, การส่งเกมที่ต้องโหลดเร็วบนมือถือ
4. Vercel Puzzle Platformer
เกมแพลตฟอร์มบุคคลที่สาม (กระโดดปรับได้, coyote time, การตรวจจับขอบ) จุดตรวจสอบ, 3 ด่านตัวอย่างที่คุณสามารถแก้ไขใน Blender หรือในโค้ด, และวงจรการเกิดใหม่ vercel.json ถูกตั้งค่าสำหรับการโหลดด่านใหม่ที่แคชที่ขอบอย่างรวดเร็ว, ดังนั้นการทดสอบจะรู้สึกเร็วบนโทรศัพท์
เหมาะสำหรับ: เกมแพลตฟอร์มปริศนา, ต้นแบบ parkour, การทดลองออกแบบด่าน
5. Vercel Driving Sandbox
ความรู้สึกขับรถแบบอาร์เคด (โค้งความเร่ง, ฟิสิกส์ดริฟท์, กล้องหน่วง, ภูมิประเทศพื้นฐาน) พร้อมรถ low-poly, แม่แบบสนามแข่ง, และการ Deploy ที่ปรับแต่งสำหรับตาข่ายภูมิประเทศขนาดใหญ่ Preset HTTP headers ทำให้ WebGL context เริ่มทำงานเร็วขึ้นบน Safari, ซึ่งเป็นเบราว์เซอร์ที่ช้าที่สุดสำหรับ Three.js ในอดีต
เหมาะสำหรับ: การแข่งรถแบบอาร์เคด, การขับรถออฟโรด, การสาธิตความรู้สึกของรถสำหรับแฟ้มผลงาน
เรียกดูทักษะเกม 3 มิติทั้งหมดบน Vibe Skills →
ขั้นตอนตั้งแต่เย็นวันศุกร์ถึงวันอาทิตย์
นี่คือตารางเวลาที่แน่นอน ปรับเวลาเริ่มต้น แต่ให้รักษาลำดับ ก้าวสำคัญคือการ Deploy บน Vercel ในคืนวันศุกร์ ทุกอย่างหลังจากนั้นคือการวนซ้ำ
เย็นวันศุกร์ 18:00 - 20:00 น.: เลือกทักษะ, Push ไปที่ GitHub, เชื่อมต่อ Vercel
ขั้นตอนที่ 1: เลือกทักษะเกม 3 มิติบน Vibe Skills เรียกดู หมวดหมู่ 3D Games, เลือกอันที่ตรงกับประเภทเกมของคุณ, และติดตั้งโค้ดเริ่มต้นลงในโฟลเดอร์ใหม่ เปิดใน Cursor คุณควรเห็นฉาก Three.js พร้อมผู้เล่นที่เคลื่อนไหวได้ภายใน 19:00 น.
ขั้นตอนที่ 2: สร้าง repo GitHub และ Push git init, git remote add, git push ใช้ชื่อย่อของเกมของคุณเป็นชื่อ repo (crystal-runner, lunar-fishing, อะไรก็ได้) ชื่อ repo มักจะกลายเป็น URL ของคุณ
ขั้นตอนที่ 3: เชื่อมต่อ repo กับ Vercel ลงชื่อเข้าใช้ Vercel ด้วย GitHub (ฟรี), คลิก "Add New Project", เลือก repo Vercel จะตรวจจับ Vite โดยอัตโนมัติและตั้งค่าการสร้าง คลิก Deploy ภายใน 60 วินาที คุณจะมี URL crystal-runner.vercel.app เปิดบนโทรศัพท์ของคุณ แชร์กับเพื่อนหนึ่งคน แถบ Deploy ตอนนี้เป็นศูนย์สำหรับช่วงเวลาที่เหลือของสุดสัปดาห์
เย็นวันศุกร์ 20:00 - 22:00 น.: เขียนเอกสารออกแบบ
ขั้นตอนที่ 4: ตอบคำถามห้าข้อเป็นภาษาอังกฤษธรรมดา เปิดหน้า Notion หรือไฟล์ markdown ใน repo และตอบ:
- ผู้เล่นกำลังทำอะไรทุกๆ 5 วินาที? (วงจรหลัก)
- เงื่อนไขการชนะและเงื่อนไขการแพ้คืออะไร?
- หนึ่งรอบหรือหนึ่งด่านยาวนานแค่ไหน?
- จุดเด่นทางภาพคืออะไร? (จานสี, แสง, รูปแบบอ้างอิง)
- ฟีเจอร์หนึ่งที่ทำให้สิ่งนี้น่าจดจำภายใน 30 วินาทีคืออะไร?
ขั้นตอนที่ 5: Commit เอกสารออกแบบ Push ไปยัง repo Vercel จะ Deploy ซ้ำ วินัยในการ Push ทุกการเปลี่ยนแปลงที่มีความหมายจะทำให้ URL สดมีความถูกต้อง
เช้าวันเสาร์ 9:00 - 13:00 น.: สร้างกลไกหลัก
ขั้นตอนที่ 6: แทนที่กลไกตัวอย่างด้วยฟีเจอร์เดียวของคุณ นี่คือฟีเจอร์เดียวที่สำคัญ ใช้แชท Cursor เพื่ออธิบาย ("เมื่อผู้เล่นเก็บคริสตัล ให้แช่แข็งศัตรูที่อยู่ใกล้เคียงเป็นเวลา 2 วินาทีและเล่นเสียงกระดิ่ง") วนซ้ำในเครื่องด้วย pnpm dev เมื่อรู้สึกได้ที่แล้ว ให้ Push
ขั้นตอนที่ 7: เชื่อมโยงสถานะชนะ/แพ้ Build 60 วินาทีพร้อมตอนจบจริงให้ความรู้สึกเหมือนเกม Build 60 นาทีที่ไม่มีตอนจบให้ความรู้สึกเหมือนการสาธิตเทคโนโลยี ควรเชื่อมโยงหน้าจอชนะก่อนเสมอ จากนั้นอย่างอื่น
บ่ายวันเสาร์ 13:00 - 20:00 น.: เพิ่มหนึ่งด่าน
ขั้นตอนที่ 8: สร้างหนึ่งด่านที่สมบูรณ์ ไม่ใช่สามด่านที่ทำครึ่งๆ ใช้ลูกบาศก์ตัวอย่างสำหรับรูปทรง ใช้ตัวละครสต็อกของทักษะ ปรับความรู้สึก - ความสูงในการกระโดด, กล้องหน่วง, ความเข้มของอนุภาค
ขั้นตอนที่ 9: เพิ่มหน้าจอสอน ป๊อปอัป "WASD เพื่อเคลื่อนที่, คลิกเพื่อยิง" สองบรรทัดเมื่อเปิดครั้งแรกจะช่วยให้ launch ของคุณไม่ถูกผู้เล่นที่สับสนซึ่งยอมแพ้ใน 8 วินาที Cursor สามารถสร้างหน้าจอซ้อนทับ React (หรือ DOM ธรรมดา) ได้ใน 30 วินาที
ขั้นตอนที่ 10: Push ทุกชั่วโมง ทุกการ Push จะได้ URL แสดงตัวอย่าง Vercel ส่งแต่ละอันให้เพื่อน วงจรตอบรับคืออาวุธลับของสแต็กนี้
เช้าวันอาทิตย์ 10:00 - 16:00 น.: ปรับปรุง
ขั้นตอนที่ 11: เพิ่มสามเสียง เสียงเดิน, เสียง ambient pad, เสียงชนะ แม้แต่สามเสียงก็ช่วยยกระดับต้นแบบสุดสัปดาห์ได้อย่างมาก แหล่งฟรี: freesound.org, opengameart.org
ขั้นตอนที่ 12: เพิ่มการเสริมแต่ง อนุภาคเมื่อโดน, การสั่นของหน้าจอเมื่อกระทบ, ตัวเลขแสดงคะแนน การเสริมแต่งคือสิ่งที่ทำให้ build 48 ชั่วโมงดูเหมือน build 6 เดือนใน GIF ขอให้ Cursor เพิ่ม "การสั่นของหน้าจอที่มีความเข้ม 0.3 เป็นเวลา 150ms เมื่อผู้เล่นได้รับความเสียหาย" - มันจะเขียน hook การสั่นของกล้องในห้าวินาที
ขั้นตอนที่ 13: ทำการทดสอบ Lighthouse เปิด URL Vercel บนโทรศัพท์และเรียกใช้ Chrome DevTools Lighthouse ชุด Three.js มักจะอยู่ที่ประมาณ 400 KB ถึง 1.5 MB หากคุณเกิน 3 MB ให้ขอให้ Cursor เปิดใช้งานการแบ่งโค้ดสำหรับโมดูลหนัก Vercel's gzip และ brotli จะจัดการส่วนที่เหลือ
ขั้นตอนที่ 14: ตรวจสอบข้อผิดพลาด เล่น URL สดของคุณห้าครั้งติดต่อกัน แก้ไขทุกอย่างที่ผิดพลาดสองครั้ง เพิกเฉยทุกอย่างที่ผิดพลาดครั้งเดียว
บ่ายวันอาทิตย์ 16:00 - 20:00 น.: เปิดตัว
ขั้นตอนที่ 15: (ไม่บังคับ) ตั้งค่าโดเมนที่กำหนดเอง หากคุณซื้อ name-game.com ไว้ล่วงหน้า ให้เพิ่มในการตั้งค่าโปรเจกต์ของ Vercel SSL จะเป็นอัตโนมัติ มิฉะนั้น URL *.vercel.app ก็ใช้ได้ - มันมี HTTPS, สามารถแชร์ได้, และโหลดได้ทุกที่
ขั้นตอนที่ 16: บันทึก GIF 15 วินาทีของช่วงเวลาที่ดีที่สุด ใช้ URL สด, ไม่ใช่ localhost GIF คือสิ่งที่คนคลิกบน Twitter, Bluesky, และ Reddit
ขั้นตอนที่ 17: สร้างหน้า itch.io (ไม่บังคับแต่มีประโยชน์มาก) ชื่อ, คำอธิบายสั้นๆ, ภาพหน้าจอสามภาพ, GIF, การควบคุม, เครดิต, และการฝัง iframe *.vercel.app ของคุณ (itch.io รองรับการฝัง iframe สำหรับเกม HTML5) ตอนนี้คุณมีสอง URL - หนึ่งสำหรับการแชร์ทั่วไปและหนึ่งสำหรับกลุ่มนักเล่นเกม
ขั้นตอนที่ 18: โพสต์ลิงก์ Twitter, Bluesky, Discord ชุมชนนักพัฒนาของคุณ, r/IndieDev, r/threejs, r/WebGames นำหน้าด้วย GIF เสมอ รวม URL เสมอ หากคุณใช้ทักษะ Vibe Skills ให้กล่าวถึงในโพสต์ devlog - นักพัฒนาคนอื่นๆ ที่ติดตามจะต้องการโค้ดเริ่มต้นเดียวกัน
วิธีหลีกเลี่ยงความล้มเหลวในการ Deploy Vercel ที่พบบ่อยที่สุดสามประการ
สามสิ่งนี้ทำให้โปรเจกต์ Three.js + Vercel สุดสัปดาห์ของนักพัฒนาเดี่ยวเกือบล้มเหลวทั้งหมด ทั้งหมดนี้แก้ไขได้ใน 5 นาทีหากคุณจับมันได้ในคืนวันศุกร์ และกลายเป็นเรื่องที่ต้องใช้เวลา 5 ชั่วโมงหากคุณค้นพบมันในเย็นวันอาทิตย์เวลา 19:00 น.
- ไดเรกทอรีผลลัพธ์การสร้างไม่ถูกต้อง Vite มีค่าเริ่มต้นเป็น
dist/Vercel ตรวจจับ Vite โดยอัตโนมัติและใช้dist/หากคุณปรับแต่งผลลัพธ์เอง ให้ตั้งค่าoutputDirectoryในvercel.jsonหรือการตั้งค่าโปรเจกต์ หรือการ Deploy ของคุณจะเป็น 404 - เส้นทาง asset ที่ทำงานในเครื่องแต่ 404 ใน Production ใช้เส้นทางสัมพัทธ์หรือตัวช่วย
import.meta.env.BASE_URLของ Vite สำหรับไฟล์ GLB, texture, หรือ audio ที่โหลดขณะรันไทม์ เส้นทาง/assets/...ที่เขียนแบบตายตัวมักจะทำงานได้ แต่เส้นทาง Windows แบบสัมบูรณ์ที่คัดลอกมาจะไม่ทำงานแน่นอน - CSP headers ที่บล็อกการล็อคเมาส์หรือ audio context เกมบุคคลที่หนึ่งต้องการการล็อคเมาส์ เสียงต้องการการเปิดใช้งานโดยการกระทำของผู้ใช้ ทักษะใดๆ จาก หมวดหมู่ 3D Games จะมาพร้อมกับบล็อก
headersที่ถูกต้องในvercel.jsonเพื่อจัดการสิ่งนี้ หากคุณเขียนเองตั้งแต่ต้น ให้คัดลอกคอนฟิกจาก repo ของทักษะ
การ Deploy ทำงานในวันศุกร์ ดังนั้นเมื่อสิ่งเหล่านี้พังในวันอาทิตย์ ก็มักจะเป็นเพราะการเปลี่ยนแปลงล่าสุด git bisect คือเพื่อนของคุณ ยิ่งไปกว่านั้น: Push ทุก 30 นาทีเพื่อให้ commit ที่เสียมีขนาดเล็ก
คำถามที่พบบ่อย
ระดับฟรีของ Vercel จะรองรับได้จริงหรือหากเกมของฉันมีผู้เข้าชมจำนวนมาก?
ใช่ สำหรับการเปิดตัวสุดสัปดาห์และสองสามสัปดาห์แรก ระดับฟรีให้แบนด์วิดท์ 100 GB ต่อเดือน ซึ่งเทียบเท่ากับประมาณ 20,000 ครั้งของการเล่นชุด Three.js ขนาด 5 MB หากคุณถึงเพดานนั้น แผน Pro ราคา $20/เดือน และจะเพิ่มให้คุณเป็น 1 TB สำหรับการเปิดตัวสุดสัปดาห์ ระดับฟรีนั้นเพียงพอแล้ว ทักษะบน Vibe Skills มาพร้อมกับการตั้งค่า build ที่ลดขนาดชุดให้น้อยที่สุด ซึ่งช่วยยืดอายุระดับฟรีได้นานขึ้น
ฉันสามารถใช้โดเมนที่กำหนดเองในระดับ Vercel ฟรีได้หรือไม่?
ใช่ ระดับฟรีรองรับโดเมนที่กำหนดเองพร้อม HTTPS อัตโนมัติ ซื้อโดเมน (Namecheap, Cloudflare Registrar, Porkbun), ชี้ไปที่ Vercel, และ Vercel จะจัดการใบรับรอง SSL การตั้งค่าใช้เวลาประมาณ 10 นาที หากคุณไม่มีโดเมน URL name-game.vercel.app ก็สั้นพอที่จะแชร์บนแพลตฟอร์มใดก็ได้
สแต็กนี้เหมาะสำหรับการส่งเกม Jam หรือไม่?
ใช่ และเป็นหนึ่งในสแต็กที่ดีที่สุดสำหรับการส่งเกม Jam Jam ส่วนใหญ่ (Ludum Dare, GMTK, js13k, GitHub Game Off) ยอมรับ URL ที่เล่นบนเว็บได้ ลิงก์ *.vercel.app ทำงานเหมือนกับ URL itch.io สำหรับกรรมการ ผู้ชนะ Jam หลายคน Deploy ไปยังทั้งสองที่ - itch.io สำหรับกลุ่มนักเล่นเกม, Vercel เป็น URL มาตรฐานที่รวดเร็ว
ฉันต้องรู้ Three.js ก่อนเริ่มหรือไม่?
คุณต้องมีความรู้ JavaScript เพียงพอที่จะอ่านสิ่งที่ Cursor เขียนและปรับค่าต่างๆ คุณไม่จำเป็นต้องเขียน Three.js ตั้งแต่ต้น ทักษะบน Vibe Skills จะสร้างการตั้งค่า engine, กล้อง, ตัวควบคุม, และคอนฟิก build Cursor จัดการโค้ดรูปแบบการเล่นตามคำอธิบายของคุณ
จะเกิดอะไรขึ้นหากการสร้าง Vercel ของฉันล้มเหลวในเย็นวันอาทิตย์เวลา 19:00 น.?
สาเหตุที่พบบ่อยที่สุดคือข้อผิดพลาด TypeScript หรือตัวแปรสภาพแวดล้อมที่ขาดหายไป Vercel จะแสดงบันทึกการสร้างพร้อมไฮไลท์บรรทัดที่ผิดพลาด คลิกครั้งเดียวในแดชบอร์ดจะย้อนกลับไปยังการ Deploy ครั้งล่าสุดที่ทำงานและโปรโมตไปยัง Production เนื่องจากทุกการ Push คือการแสดงตัวอย่างการ Deploy คุณจะไม่มีวันห่างจากการสร้างที่ทำงานได้เกินหนึ่ง commit นี่คือเหตุผลที่การ Push ทุก 30 นาทีในวันเสาร์และอาทิตย์มีความสำคัญ
ฉันสามารถขายหรือแก้ไขโค้ดจากทักษะเกม 3 มิติ Vibe Skills ได้หรือไม่?
ใช่ ทักษะบน Vibe Skills มาพร้อมกับใบอนุญาตที่เป็นมิตรต่อการค้าที่อนุญาตให้คุณเผยแพร่โค้ดในเกมของคุณเองบน Vercel, itch.io, Steam, หรือที่อื่นใด ผู้สร้างยังคงทรัพย์สินทางปัญญาของทักษะ, คุณยังคงทรัพย์สินทางปัญญาของเกมที่สร้างขึ้น
จะเป็นอย่างไรถ้าฉันไม่ต้องการใช้ Cursor?
ตัวแก้ไข AI ใดๆ ที่สามารถแก้ไขไฟล์โปรเจกต์ได้จะใช้ได้ Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - ตัวใดตัวหนึ่งสามารถวนซ้ำบนโครงสร้างพื้นฐาน Three.js จากทักษะ Vibe Skills ทักษะเองไม่ขึ้นอยู่กับ editor
ส่งมันสุดสัปดาห์นี้
เหตุผลที่นักพัฒนาเดี่ยวส่วนใหญ่ไม่เคยเปิดตัวเกม 3 มิติ ไม่ใช่ engine, ประเภทเกม, หรือระดับความสามารถ แต่เป็นคืนวันศุกร์ที่พวกเขา "แค่ค้นคว้าเพิ่มเติม" และไม่เคยเริ่มเลย สุดสัปดาห์ฟรีครั้งถัดไปของคุณ ให้ทำตามแผนสี่ระยะ: ติดตั้งทักษะเกม 3 มิติ Vibe Skills, Push ไปที่ GitHub, เชื่อมต่อ Vercel, Deploy ภายใน 20:00 น. วันศุกร์, จากนั้นใช้เวลาวันเสาร์และวันอาทิตย์ในการวนซ้ำบน URL สด
แฟ้มผลงานเกมสุดสัปดาห์สิบเกมของคุณบน Vercel มีค่ามากกว่าโปรเจกต์ dream engine หกเดือนในจินตนาการของคุณ สิ่งที่ถูกส่งออกไปแล้วมักจะชนะเสมอ URL Vercel ฟรีคือเครื่องพิสูจน์
เรียกดูทักษะเกม 3 มิติบน Vibe Skills →
ข้ามมาราธอนโค้ดพื้นฐาน Three.js ไปได้เลย ติดตั้งทักษะเกม 3 มิติบน Vibe Skills, Push ไปที่ Vercel, และมี URL สดภายในคืนวันอาทิตย์