---
title: "用 AI 做 3D 遊戲要從哪開始？我用 ChatGPT 和 Codex 做了一款台北機車競速遊戲"
slug: chatgpt-codex-3d-racing-game-tutorial
url: https://rar.design/posts/chatgpt-codex-3d-racing-game-tutorial
published_at: 2026-09-22
modified_at: 2026-09-22
author: "設計師 Riven"
category: "AI 設計"
tags: ["設計師 AI", "AI 工具", "遊戲設計", "AI 做遊戲", "Three.js", "ChatGPT", "Codex"]
access: public_access
---

# 用 AI 做 3D 遊戲要從哪開始？我用 ChatGPT 和 Codex 做了一款台北機車競速遊戲

> 《歐兜賣尬車》製作全紀錄：從 Q 版角色、早餐店選車到甩尾集氣，附七段可直接複製的提示詞

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-09-22

AI × GAME DEV · 2026▲ 這篇的主視覺：左邊是角色草稿到機車線框的製作流程，右邊是我的 Q 版角色騎著檔車衝出來，背景是台北 101。整款遊戲是用 ChatGPT 和 Codex 一輪一輪做出來的QUICK ANSWER用 AI 做 3D 遊戲，先把工作分清楚：ChatGPT 把參考圖整理成美術規格；ChatGPT 桌面版切到 Codex、連上本機資料夾，請它用 Three.js 做出能跑完一圈的原型；角色在 Blender 建模、匯出 GLB 再接進遊戲。之後每輪只修一個問題，用四句話回報：哪裡有問題、什麼情況發生、保留什麼、怎樣算修好。CHAPTER 01 · THE PROJECT一款在台北街頭比賽的 Q 版機車遊戲《歐兜賣尬車》的起點很單純：讓我的角色騎著台灣機車，在一座有生活感的台北裡比賽。做到後來，車庫裡停了檔車「野狗傳奇125」、電動車「狗狗肉」和腳踏車「Vbike」，賽道經過早餐店、夜市和捷運出口，還有兩個對手嘉豪和宛晴會跟你搶名次。程式交給 Codex 寫。真正花時間的，是把「看起來怪怪的」一條條修成具體的東西：頭髮要有體積、手腕要接得上、加速要有回饋、街道要留得出跑線。下面分九個階段拆解，每段都附實機畫面和能直接複製的提示詞。▲ 實機畫面：三台車停在「剩蛋餅早餐店」門前的停車格，選車按鈕跟著車位排列。畫面上的《尬車輸贏》是開發版名稱先分清楚每個工具負責什麼這款遊戲用 Three.js 在瀏覽器即時渲染，玩家一按鍵，位置、碰撞和鏡頭都要當下算出來。所以開工前先想清楚，每個工具要交出什麼：TOOLKIT · 每個工具交出什麼CHATGPT規格、參考圖、宣傳圖整理需求、分析參考圖、討論風格CODEX能執行、能檢查的檔案改程式、接素材、開預覽、除錯驗證BLENDER能載入遊戲的 GLB 模型角色的立體造型、部件與材質THREE.JS玩家實際看到的畫面在瀏覽器呈現模型、燈光、鏡頭與特效ASSETS整理好的圖像與聲音介面圖像、配樂與操作回饋分工不代表一直切換程式，ChatGPT 桌面版已經把對話、專案和 Codex 收在同一個 App 裡，重點是清楚這一刻要的是圖片、模型，還是能玩的功能。一張漂亮的三視圖，離能操控的 3D 角色還很遠：我的 Live2D 和 Q 版貼圖只當外型參考，角色模型在 Blender 用製作腳本建出來，匯出 GLB 後由遊戲載入、控制騎姿。▲ OpenAI 官方部落格的示範遊戲 Void Explorer 也是這套分工：左邊是生圖做的飛船概念，右邊是照著概念在 Blender 建好的模型，之後才放進 Three.js。圖片來源：OpenAICHAPTER 02 · PREP先準備素材包，再把感覺寫成規格開一個專門資料夾，只放這次會用到的檔案。AI 的工作範圍越清楚，越不會動到不該動的東西：FOLDER · 建議結構my-racing-game/ references/ 角色與街景參考 assets/models/ 遊戲用 3D 模型 assets/audio/ 音樂與音效 src/ 程式 docs/ 規格與測試紀錄已經有專案就不用硬搬，請 Codex 先讀懂原本的安排。角色素材至少要有正面、側面、背面和幾張表情，每張配一句用途，例如「這張看比例」「這張看後腦髮型」；圖跟圖衝突時寫清楚誰說了算，不然 AI 只能用猜的。▲ 我的 Q 版角色設定圖（不是遊戲畫面），用來固定黑白髮束、狼耳的青色內側、藍眼睛和白外套這些辨識特徵在 ChatGPT 把「感覺」寫成美術規格附上參考圖、說明每張的用途，請 ChatGPT 先列出不能改的特徵和還沒決定的地方。OpenAI 的官方說明也建議，拿參考圖生圖時要講清楚哪裡改、哪裡保留。PROMPT · 整理美術規格我要做一款台北風格的 Q 版機車競速遊戲。圖1是角色正面、側面與背面，圖2是表情參考。請先整理一份美術規格：1. 角色不能失去的外型特徵。2. 頭身比例、髮型體積、服裝層次與主色。3. 從後方追車鏡頭看，仍要辨識得出的特徵。4. 圖片互相矛盾或缺少資訊的地方。風格是圓潤、鮮明、有玩具感的街機競速遊戲。保留我的角色，不套用其他遊戲的角色或 Logo。先交出規格與檢查清單，再進行製作。這一步最有用的習慣，是把「更精緻」翻成看得到的條件：髮型精緻是髮束前後重疊、髮根接合自然；城市豐富是前景有騎樓、中景有商店、遠景有地標輪廓。規格存成 docs/art-direction.md，之後每輪都以它為準。生圖的手繪構圖和圈選修改，我在〈ChatGPT Images 2.5 怎麼用？〉拆過。CHAPTER 03 · FIRST LAP在 Codex 做出能跑完一圈的原型準備 ChatGPT 帳號、ChatGPT 桌面版和支援 3D 硬體加速的瀏覽器。打開桌面版，從下拉選單切到 Codex，在 Projects 新增本機專案、指到遊戲資料夾。網頁版的 ChatGPT 專案碰不到電腦裡的資料夾，要用桌面版的本機專案，Codex 才能直接讀寫檔案。第一次用可以先看〈Codex 是什麼？〉。STEPS · 第一輪這樣跑1選資料夾在專案入口選取遊戲資料夾，確認專案名稱正確。2附上規格把規格和參考圖附進任務，或指出它們在專案裡的位置。3貼上任務貼下面的原型任務，要安裝套件時先看清楚用途和範圍。4打開預覽等檔案建好、伺服器啟動，再打開回傳的預覽連結。5試玩回報先點一下畫面讓它接收鍵盤，問題截成只含遊戲的圖回報。PROMPT · 第一輪原型請在這個專案建立可玩的桌面瀏覽器 3D 競速原型。使用 Three.js，先做一條封閉道路與簡單代用車輛。這輪完成：- ↑ / W 加速，↓ / S 煞車，左右方向鍵或 A、D 轉向。- 跟隨車輛的第三人稱鏡頭。- 道路邊界碰撞、檢查點、三圈完賽與重新開始。- 一個可以直接開啟的本機預覽網址。先不加入完整城市與精細角色。請先檢查現有檔案和環境，再決定啟動方式。完成後實際開啟預覽，說明哪些功能已驗證。收到「完成了」不代表真的完成。打開預覽自己起跑、過彎、擦牆、跑完一圈，方向和鏡頭都正常再加精細模型。要載入 GLB 或 JavaScript 模組時，請 Codex 開本機伺服器並回傳網址，直接雙擊 HTML 常常只看到空白。網址裡的 localhost 只代表你這台電腦，不能直接丟給朋友玩。▲ OpenAI 官方影片〈Codex for Creatives〉：看 OpenAI 的創意專家怎麼用 Codex 發想、做設計，把作品往前推CHAPTER 04 · GAME FEEL甩尾、集氣、氮氣：讓操作有節奏競速遊戲好不好玩，最高速度只佔一小部分。我要的是一玩就懂的循環：入彎甩尾、累積能量、找直線加速，再進下一個彎。LOOP · 每一次甩尾，都在為下一次加速準備STEP 01 · 入彎Shift＋轉向速度夠才進得了甩尾STEP 02 · 甩尾成功胎痕・滑胎聲・集氣持續有效甩尾才累積STEP 03 · 能量滿格存下一次氮氣留到直線再用↓用法 A · 小噴甩尾結束後放開再按 ↑／W約 0.65 秒內觸發，衝刺約 0.6 秒用法 B · 氮氣按一下 Space加速約 2.5 秒，期間甩尾回充倍率 ×1.25數值取自這個專案的遊戲設定驗收時看三件事：只按 Shift 不轉向不能刷能量、按住 Space 不能無限觸發氮氣、一直按住油門不能自動觸發小噴。關鍵是程式要分開「正在按住」和「這一刻剛按下」，小噴和氮氣都用後者。功能也別一輪塞完，先做甩尾和胎痕，再做能量條，最後才加小噴和音效。擦牆則是扣掉撞向牆面的速度、保留沿牆前進的部分，再把車頭輕輕帶回道路，比一碰就歸零好操控得多。三台車，三種加速個性最好玩的一次改動，是把檔車的氮氣改成「髒氣暴衝」：拿掉藍色火焰，換成沿路散開的黃褐與灰黑尾流。後來再依車款分開：野狗傳奇125 噴髒氣，狗狗肉是科幻能量，Vbike 是風壓、加快踩踏和汗滴。三台共用同一個加速狀態，只換呈現方式。▲ 實機驗證模式的加速定格，不是影片合成。右上角的效能數字只代表截圖當下的觀察尾流要從排氣口冒出、留在世界裡慢慢散掉，不能整團黏在車尾；停止加速也要有一小段退場。速度模糊再誇張，中間的道路和轉彎方向都要看得清楚，效果最滿的時候也要還能開車。PROMPT · 三台車三種加速請讓三台車共用加速邏輯，但各自有不同視覺表現。檔車：排氣口噴出誇張髒氣尾流。電動車：青藍色科幻能量與短促流線。腳踏車：風壓、加快踩踏、左右用力與汗滴。加速時加入平滑的速度模糊，保留中央道路辨識。特效結束、暫停、重新開始後，都要正確清理。CHAPTER 05 · CHARACTER角色精修：站著好看，騎上車不一定好看放進遊戲之後才發現，玩家大部分時間看到的是後腦、背、手肘和車尾。背面的品質比正面海報更影響體驗，跟做介面一樣，要照顧的是使用者實際看到的角度。▲ 角色檢視工具的實機畫面。左邊檢查臉和服裝辨識度，右邊是追車視角最常看到的背影，檢查髮型體積和握把接合MODELING · 建模順序01先抓輪廓頭身比、耳朵高度、臉寬、頭髮側面厚度，比縫線更早影響辨識。02再做髮束瀏海、側髮、後髮分開做，每束都有厚度，髮根交疊接合。03保留代表性服裝白外套、青色滾邊、束帶和頸鏈，在常用鏡頭距離下要看得出來。04建立可動部件頭、上臂、前臂、手掌和腿要能被姿勢控制。05匯出 GLB 進遊戲檢查確認朝向、比例、材質和部件命名，再調坐高和握把位置。我用的是有命名部件的 GLB，載入後再處理騎姿、頸鏈和長袖；不能假設任何 GLB 都套得上同一套手臂控制。不熟 Blender 可以先看〈不會 Blender 也能建 3D？〉。手看起來像斷掉時，我這樣下指令：PROMPT · 修騎乘時的手臂請只修角色騎乘時的手臂與長袖，保留臉型、髮型與配色。從追車視角看，肩膀、上臂、手肘、前臂與手掌要連續。左右手應貼合各車款握把，轉向時不能拉開手腕或穿過袖口。請用正面、側面、背面、左右轉向四種情況檢查。先提供模型檢視結果，再確認三款車的騎姿都成立。長袖能讓輪廓好看一點，但真正要修的是關節接合，布料蓋不住錯位。所以我另外做了角色檢視頁，同一個問題固定在同一個角度比較，才看得出有沒有變好。CHAPTER 06 · THE CITY早餐店、騎樓和 101：台北感是一層一層疊出來的選車不一定要是卡片選單。我把三台車停進早餐店門前的停車格，選中的那台讓角色坐上去、車身放大一點。背景寫得越具體越好：紅黃招牌、外推遮雨棚、鐵窗、磁磚牆、不鏽鋼工作檯、醬料瓶，比一句「台灣風格」有用太多。PROMPT · 早餐店選車選車畫面改成台灣路邊早餐店前的機車停車格。招牌文字精確使用「剩蛋餅早餐店」。三台車彼此靠近且完整可見，選中後顯示角色騎乘並稍微放大。車款名稱貼近各自停車格，主標題是「今天，想騎哪一台？」。把設定收成一顆按鈕，出發後隱藏選車用介面。請檢查小視窗下，名稱與出發按鈕不會蓋住車子。驗收要輪流選三台車，確認名稱、模型、對手車款和試聽音效都有跟著換。台北感來自三個距離NEAR近景路面、紅線、騎樓、招牌、餐車、店面貼在玩家身邊，負責速度感和生活感MID中景街廓、夜市入口、捷運出口讓人認得出自己騎到哪一區FAR遠景101、大巨蛋、陶朱隱園、山的輪廓撐起天際線，也當方向指標▲ 實機場景畫面。起跑段靠連續街屋和赤峰街路牌帶出方向感，西門町用捷運 6 號出口和西門紅樓讓人一眼認出來製作順序是：先定道路、彎道和長直線；每一區先做一個辨識物，像西門站 6 號出口或夜市牌樓；再用窗戶、冷氣、陽台、店面和樹補密度；最後回到車尾鏡頭騎一遍，確認建築沒擋到彎道和地標。這是重新編排過的台北印象，大巨蛋被放在騎車容易看見的街邊，辨識度優先於真實地理。光影：讓車子和城市活在同一個世界光影最關鍵的一步，是讓天空的太陽方向、街道的主光、模型反射的環境三者一致，不然畫面再亮，車漆都像貼在背景前面。▲ 實機場景畫面：雲層、遠山和天際線撐起遠景，地標用風格化的幾何呈現LIGHTING · 五項渲染調整調整解決什麼怎麼檢查室外天空產生環境反射車漆亮部跟戶外場景對不上比較車漆、玻璃、鍍鉻的反應統一太陽方向與柔和陰影物件像在飄看輪胎接地、騎樓和車底ACES 色調映射與曝光白外套變成一片白白衣皺褶和車身形狀要保留適量接觸陰影與發光缺乏接合感、發光糊成一團放大看接縫，再縮回遊戲尺寸雲層、距離霧、路面細節遠近層次不足、地面太平同時看近景清晰與遠景辨識這些是這個專案的設定方向，換了模型和材質要重新校正。調光時固定同一個鏡頭逐項開關：先主光和曝光，再反射和陰影，最後才加發光和模糊。CHAPTER 07 · RACE DAY音效、對手和頒獎台：讓一場比賽有頭有尾選車時就讓玩家聽見差異：檔車催油、電動車的馬達、腳踏車的鈴聲。音效和配樂要分開控制，滑胎聲用開始、持續、結束三個狀態，別每一格畫面重播。音樂在按下出發後才播放，驗收時要真的按一次出發再聽。音檔來源也要記清楚，生成配樂可以參考〈Suno AI 完整介紹〉，別直接拿其他商業遊戲的配樂。RACE FLOW · 一場比賽的六個段落選車 → 地圖預覽 → 3、2、1 → 三圈競速 → 完賽特寫 → 頒獎與成績地圖預覽約 6 秒、可以略過，只切大巨蛋、陶朱隱園和 101 幾個地標。兩位對手騎玩家沒選的另外兩台車：嘉豪戴安全帽、穿藍白拖，宛晴戴西瓜皮安全帽。對手的強度不能只靠加速度，要看過彎預判、選線、用加速的時機和失誤後能不能回到賽道；名次依圈數和賽道進度判定，重開一局時上一場的彩紙和成績都要清乾淨。▲ 「頒獎台樣品」測試模式，標題是「台北最速飆仔頒獎典禮」，名次和時間是預設值，用來檢查構圖CHAPTER 08 · FEEDBACK對 AI 說「再精緻一點」之前，先拆成四句話整個專案最值得帶走的技巧在這裡。「再精緻一點」有方向，但 AI 拿到只能猜。拆成四句，它就知道改哪裡、改到哪：FEEDBACK · 回饋四句話要說的事範例哪裡有問題從背後看，右手袖口和手掌之間有縫在什麼情況發生選 Vbike、向左轉時特別明顯哪些要保留保留臉型、長袖配色和目前的鏡頭怎樣才算修好三台車、左右轉向、正背面都沒有斷裂或穿模“說得出問題在哪個鏡頭、哪個動作、哪個部件，AI 才會變成能一起把作品做完的夥伴。每次只改一組相關的問題，頭髮、車子、地圖同時大改，變差了就找不出原因。PROMPT · 最小範圍修正請先讀取這次相關程式，找出問題原因，再做最小範圍修正。保留已經正常的操控、車款選擇與計時。完成後請列出：修改內容、實際驗證方式、仍未驗證的部分。若只做了程式檢查，請不要宣稱已完成整場實玩。專案有用 Git 的話，在輸入框打 /review，Codex 會檢查還沒提交的變更並列出問題，不會動到檔案。測試也分兩種：邏輯測試確認氮氣不會重複觸發，視覺檢查確認尾流沒擋住彎道，誰也取代不了誰。CHAPTER 09 · KEY ART最後才做宣傳圖，讓封面說出遊戲個性封面要一眼看懂主角、題材和標題，實機畫面要讓人看清道路，兩者任務不同。我把方向收斂成鮮明、圓潤、帶玩具感的 Q 版競速視覺，一次比較五種構圖：▲ 五款 AI 生成的宣傳封面，上排是日光甩尾、角色主視覺、台北玩具城市，下排是夜市加速、早餐店起跑。宣傳設計不代表實機畫質PROMPT · 五款直式封面請為這款遊戲設計5張直式 Reels 封面，目標比例9:16。標題精確使用「歐兜賣尬車」，主角使用附件中的我的角色。保留黑白髮束、青色耳內、藍眼睛、白色長袖與頸鏈。風格是圓潤、鮮明、玩具感的 Q 版街機競速，不走照片寫實。五款分別探索日光甩尾、角色特寫、台北城市、夜市、早餐店。保留標題閱讀空間，避免重要文字與臉貼近畫面邊緣。每款構圖要明顯不同，不只換背景顏色。選稿時縮到手機縮圖大小再看一次，讀不到標題、認不出角色就再調；生成的文字要逐字檢查。CHAPTER 10 · TAKEAWAYS交付前跑完這張表，再決定要不要公開CHECKLIST · 交付檢查表項目完成條件啟動重新開啟預覽能正常載入，模型和音檔沒遺漏選車三台車的名稱、騎姿、音效和對手配置一致操作加速、煞車、甩尾、氮氣、小噴、暫停與重置能連續使用比賽照順序過檢查點才計圈，逆向和重複過線不能刷圈完賽三圈後顯示正確排名，頒獎台和重開正常視覺角色不斷肢、不穿模，特效不妨礙看路效能在目標裝置跑完一場，記錄卡頓和密集場景版本保留修改前的版本，記下改了什麼、還有什麼沒驗證分享確認是公開版本，沒有夾帶私人素材、帳號或開發設定要給朋友玩，還得另外準備部署版本，確認資產、授權和公開網址，再用別台電腦測一次。TAKEAWAYS→先分工：ChatGPT 管規格和圖像，Codex 管能跑的程式，Blender 管模型，每一段交出的東西都要能檢查。→每一輪只做一個能驗收的目標，自己打開預覽玩過才算數。→回饋拆成四句：哪裡有問題、什麼情況發生、保留什麼、怎樣算修好。這款遊戲最值得重複的，是同一個循環：提出具體目標、做出能檢查的版本、自己玩、再給下一輪精確的回饋。設計師每天本來就在做這件事，看稿、挑出哪裡不對、講清楚要改成什麼樣子。寫程式的門檻被 AI 拿掉之後，這個能力就直接變成做遊戲的能力。RELATED READS · 延伸閱讀Codex 為什麼突然紅了？500 萬週活、併入 ChatGPT 桌面版與 7 月最新更新全解析Codex 怎麼變成 ChatGPT 桌面版的一部分，脈絡都在這篇→設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析不做遊戲也用得上：讓 Codex 照你的設計系統寫出畫面→那些脆上爆紅的圖怎麼做的？完整 ChatGPT Prompt 筆記，自製 IG 風格社群素材角色宣傳圖想更有梗，描述詞結構可以直接拿來改→Seed3D 2.0 是什麼？ByteDance 新一代 3D 生成模型完全解析從單張圖生成含材質的 3D 資產，做遊戲模型的另一條路→Spline Omma 是什麼？一個指令生成 3D 模型、場景與互動網頁的 AI 畫布想做互動 3D 網頁又不想碰程式，可以先從這裡試→Rive 是什麼？Flash 收掉十五年，設計師終於等到能寫程式的動效工具遊戲介面和互動動效的另一套做法→EXTRA · LINKS · 延伸資源✦ ChatGPT 快速開始（下載桌面版、切換到 Codex）✦ 專案與對話說明（本機專案怎麼連接資料夾）✦ 圖像生成說明（參考圖與修圖的寫法）✦ 程式碼審查說明（/review 的用法）✦ OpenAI〈Building games with Astra〉（官方用 Codex 做 3D 遊戲的紀錄）✦ Three.js 官方文件：PMREMGenerator（環境反射）、GTAOPass（接觸遮蔽）SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →FAQ常見問題Q：不會寫程式也能用 ChatGPT 和 Codex 做遊戲嗎？A：能做出原型。程式、套件、預覽和修錯交給 Codex，你負責定規格、試玩和回報問題，再一輪一輪修到好玩。Q：Codex 要在哪裡用？A：在 ChatGPT 桌面版的下拉選單切到 Codex，開一個連接本機資料夾的專案。習慣終端機或程式編輯器，也可以用 Codex CLI 或 IDE 擴充功能。Q：一定要會 Blender 嗎？A：要做能操控的 3D 角色，模型這關躲不掉。這個專案的角色在 Blender 建模後匯出 GLB；不熟 Blender 可以請 AI 寫腳本輔助，但輪廓和接合要自己檢查。Q：預覽打開是空白畫面怎麼辦？A：多半是直接雙擊了 HTML 或資產路徑出錯。請 Codex 開本機伺服器，再檢查入口檔、資產路徑和瀏覽器錯誤，先別重寫整個遊戲。Q：localhost 的網址可以直接給朋友玩嗎？A：不行，它只代表你自己的電腦。要給別人玩得另外部署，確認資產、授權和公開網址，再用別台電腦測試。Q：怎麼讓 AI 改得更準？A：回饋拆成四句：哪裡有問題、什麼情況發生、哪些要保留、怎樣算修好。每次只改一組相關問題，並請它列出改了什麼、怎麼驗證。Q：遊戲的宣傳封面可以用 AI 生成嗎？A：可以，這篇的五款封面就是 AI 生成的。提示詞寫死標題和角色特徵，縮到手機大小檢查可讀性，並標示它是宣傳圖、不是實機畫面。