供 AI agent 先閱讀教學方法，再自行製作網站。本頁只含文字教材與官方技術來源。
# 從一句需求，到能操作的 3D 網站 ## 教材用途 這是既有操作教學的獨立文字版，保留教學方法、示範提示詞、素材準備、資料查詢、檢查與修正方式。未附成品網站、成果畫面、展示影片、模型或實作程式碼，讓閱讀者學習方法後自行設計與製作。 閱讀順序：工具與最小場景 → 海面網格與波浪 → 風機與結構素材 → 官方風浪資料 → 日夜光影 → 建置與公開發布 → 集中練習。 核心方法：**這次只做一件事 → 取得可操作成果 → 對照完成條件 → 找出差異 → 修正後重查。** ## AI agent 使用方式 請先完整讀完教材，再依委託人的目標自行建立網站。教材內的提示詞是學習範例，請理解其要求與驗證方式，不必逐句向委託人重述。 若委託人要求自主完成，教材範例中的「等我確認」改為由 agent 根據官方來源、功能條件及實際測試自行核對；只有缺少必要權限或無法自行確認的關鍵資料時才詢問。建置、測試與修正過程留在專案紀錄，不必逐步向委託人報告。 這份教材沒有指定網站的色彩、版型、模型造型、場景構圖或鏡頭配置。這些由實作者自行決定。請勿為了尋找標準答案而搜尋同名或同類成品；可查閱下列官方技術與科學資料。 工具入口、套件版本、資料欄位與服務條件可能調整，實作時應重新核對官方文件。未執行或未驗證的項目不得寫成已完成。 ## 1. 從 ChatGPT／Claude 開始 使用者可先開新對話，輸入下面的總要求。ChatGPT 可在支援的 HTML／React 程式區塊尋找「預覽」；Claude 可查看 Artifacts／成品區。若沒有入口，繼續要求可下載的完整檔案與開啟方法，不把缺少預覽當成觀眾操作錯誤。[ChatGPT 官方說明](https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt)、[Claude 官方說明](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them) ### 開場總提示詞 ```text 我是沒有程式基礎的使用者。請陪我分階段製作一個可操作的 3D 海洋網站。 最終想呈現：可拖曳的海面、可調波高、一座會轉的風機、可點開的機艙、日夜切換，以及明確標示來源的風浪資料。 現在先不要一次完成全部。每次只增加一項功能，並依序交付： 1. 這一步會新增什麼。 2. 可執行的互動成果，而不是只給圖片或說明。 3. 我要操作哪裡，以及應該看到什麼變化。 4. 如果做不到，明確說明缺少的能力、檔案或資料。 若這個對話支援 HTML／React 預覽，請使用可預覽的形式。 若不支援，請交付完整可執行檔案、每個檔名及逐步開啟方法。 不可把尚未執行的程式說成已驗證成功。 先完成一片藍色平面與可拖曳視角，再等我確認。 ``` ### 只有程式碼時的接續提示詞 ```text 我目前只看到程式碼，沒有可操作的畫面。 請先說明目前交付的是：可直接開啟的 HTML，還是需要建置的專案。 若能在目前工具預覽，請提供可預覽的互動頁。 若不能，請打包完整檔案，給我可下載成果，並清楚寫出： - 如何取得及安裝必要執行環境。 - 解壓縮後要打開哪個資料夾。 - 每一步在哪個位置操作、輸入什麼。 - 成功時應看到哪個畫面或本機網址。 若需要執行建置，請讓具備檔案與執行環境的程式助理接手。 如果你目前不能執行，請明說，不要假裝已經執行。 ``` 「聊天工具會寫程式」和「當前對話能安裝套件、執行建置」是不同能力。完整專案可交給具備本機資料夾與執行工具的程式助理，例如已設定好的 Codex／Claude Code；一般聊天視窗不能一律視為可操作電腦。 ## 2. 海面：從平面到能控制的波浪 第一階段不需要海洋照片或下載模型。Three.js 可以用程式建立分格平面；平面上的位置可變形，才看得到波浪起伏。[PlaneGeometry 官方文件](https://threejs.org/docs/pages/PlaneGeometry.html) ### A. 先做最小場景 ```text 先只做一片藍色 3D 平面，提供拖曳旋轉視角和「重設視角」按鈕。 不要加入風機、衛星資料、氣象資料或海浪。 請採適合一般瀏覽器的方法。如果使用 React、Three.js 或 React Three Fiber， 請處理需要的依賴，並交付可預覽或可執行的完整成果。 完成條件：拖曳時看平面的角度改變，按重設後回到起始角度。 ``` ### B. 打開線框，顯示骨架 ```text 保留上一版可運作的視角控制。 把平面分成小格，加入「顯示網格」開關。 開啟時看得到組成表面的格線，關閉時恢復藍色表面；先保持平坦。 提供一般手機能使用的低品質設定，不要一開始就用最高密度。 完成條件：開關能重複切換，拖曳視角仍可使用。 ``` ### C. 讓波峰移動 ```text 現在讓海面格點依照位置與時間持續上下移動，形成向前推進的波浪。 先使用簡化波浪，保留網格開關，讓我從側面看見起伏。 不能只把一張有海浪的圖片放在平面上。 完成條件：同一視角停留幾秒，波峰會前進；從側面也能看見高度改變。 ``` ### D. 加入波高與重設 ```text 加入波高滑桿與目前數值，單位為公尺，先標示為「教學示意」。 用可見的波峰到波谷差距，說明這個控制值代表什麼。 拉高時起伏明顯增加，拉低時縮小；增加「還原預設」按鈕。 完成條件：用 0.5 和 2 兩組值比較，數字與海面形狀都會改變； 還原後回到同一個初始狀態。 ``` 先驗證操作結果，再理解名詞：**著色器**可讓顯示卡處理表面變形、顏色與反光；**網格**提供表面可變形的位置。先驗證小成果，再考慮 FFT 等進階方法，不把做出簡化波浪等同完成 FFT。[ShaderMaterial 官方文件](https://threejs.org/docs/pages/ShaderMaterial.html) ### 結果不對時，具體回饋 ```text 我把波高從 0.5 拉到 2。 預期：波峰到波谷的差距變大。 實際：數字改了，但從側面看，起伏幾乎相同。 附件是相同視角的兩張截圖。 請先檢查滑桿值是否真的影響正在顯示的海面，再修正； 不要先增加新效果。修正後保留網格與兩組數值，讓我重新比較。 ``` 通用回饋格式是：**我做了什麼 → 本來應該如何 → 實際發生什麼 → 截圖或錯誤訊息 → 要求修正後重現同一操作。** ## 3. 風機：哪些可直接生成，哪些要提供素材 ### 素材的用途不同 | 目標 | 先提供什麼 | 可先要求 AI 做什麼 | |---|---|---| | 看得出是一座風機、可轉動 | 零件名稱、三葉片外形、動作與簡模要求 | 用圓柱、盒子、葉片形狀組成教學簡模 | | 接近指定機型外觀 | 機型名稱、不同角度照片、官方尺寸或型錄 | 先核對比例與外觀差異，再調整模型 | | 正確說明內部 | 該類型或機型的剖面、官方說明、零件與傳動資料 | 列出有依據的結構清單，確認後才建內部 | | 使用現成 3D 模型 | 可使用的模型檔、格式、素材來源及使用條件 | 檢查能否載入、零件能否分開控制 | 照片幫助外觀，尺寸幫助比例，剖面與文件幫助結構。**不能從一張外觀照片，推定內部一定正確。**風機可能是直驅或透過齒輪箱傳動，先確定類型再建模。[美國能源部風機原理與結構說明](https://www.energy.gov/cmei/systems/how-do-wind-turbines-work) ### A. 生成教學外觀 ```text 在目前海面放一座三葉片教學風機。 請用簡單形狀建立塔柱、機艙、輪轂與三片葉片，零件分組並命名。 先不做機艙內部，也不要宣稱對應任何真實機型。 請讓整座風機適合從一般螢幕觀察；若比例為了教學而調整，要標示。 完成條件：能清楚辨認四類外部零件，海面與視角控制仍正常。 ``` ### B. 指定誰旋轉、誰固定 ```text 把三片葉片與輪轂組成同一個轉子，繞輪轂中心的水平軸旋轉。 塔柱和機艙保持不動，先用固定轉速，不連氣象。 加入「停止／播放」。 完成條件：三片葉片一起轉，沒有各自原地打轉；塔柱不轉。 按停止後轉子停下，按播放後繼續。 ``` ### C. 尋找與交付結構參考 先到上述官方原理頁，再用「機型名稱＋型錄／cutaway／drivetrain」尋找製造商資料，保存網址、文件日期與相關頁碼。若工具看不到網址，應貼出節錄或附上可讀取文件。 素材紀錄範本： ```text 主題／機型： 教學目的：例如說明葉片如何把動力傳到發電機 來源機構與網址： 文件名稱、日期、相關頁碼： 素材檔名與用途：外觀／尺寸／結構／可操作模型 圖文或模型的使用條件： 文件明確支持的內容： 尚未交代、需要確認的內容： 這次採用的簡化方式： ``` ```text 我附上這份風機資料。請先不要建模。 只根據附件整理： 1. 這是直驅還是齒輪箱型，有什麼依據？ 2. 動力依序經過哪些零件？每項附頁碼或來源位置。 3. 哪些內容文件沒有說明，還不能確定？ 請先給我結構清單，等我確認後，再做內部。 若你不能讀到附件或網址，請直接告知，不要自行推測。 ``` ### D. 確認後加入機艙互動 ```text 依我確認的結構清單，加入機艙教學互動。 使用者點到機艙時，外殼移開，顯示零件名稱與能量傳遞方向。 提供關閉按鈕，關閉後恢復原來外觀。 為了看清楚而放大或移開的零件，標示為「教學示意」。 完成條件：點選機艙有效、能看清楚說明、能關閉復原，手機上也可點選。 ``` ## 4. 風浪資料：去哪找、勾什麼、交給 AI 什麼 資料查詢範例使用 **24.1°N、120.1°E** 作為彰化外海附近的教學查詢座標，不代表某支真實風機位置。Weather 與 Marine 本次均使用 `Current` 資料，時區為 `Asia/Taipei`。服務回傳的模型網格位置也可能與輸入座標不同，頁面應顯示實際回傳位置。 ### A. 天氣資料：風速與風向 1. 打開 [Open-Meteo Weather 文件](https://open-meteo.com/en/docs)。 2. 在 Location 設定經緯度；時區選 `Asia/Taipei`。 3. 在 Current Weather 選 `Wind Speed (10 m)` 與 `Wind Direction (10 m)`；風速單位選 `m/s`。 4. 在 API Response 區複製產生的 API URL，交給 AI；先展示資料卡，不立即連動風機。 示範查詢網址，可先在瀏覽器查看回傳資料： [取得教學座標的 Current 風速風向資料](https://api.open-meteo.com/v1/forecast?latitude=24.1&longitude=120.1¤t=wind_speed_10m,wind_direction_10m&wind_speed_unit=ms&timezone=Asia%2FTaipei) ```text 請讀取我提供的 Open-Meteo Weather API 網址。 先做一張資料卡，顯示： - 請求座標，以及服務實際回傳座標。 - current.time、timezone、current_units。 - wind_speed_10m 和 wind_direction_10m。 - 資料來源、取得時間、讀取中／成功／失敗狀態。 現在不控制風機。請核對風速單位，不要把 km/h 當成 m/s。 這是模型提供的風況，請不要寫成現場測站實測。 十公尺風速也不能直接標示為輪轂高度風速。 ``` ### B. 海況資料：波高、週期與方向 1. 打開 [Open-Meteo Marine 文件](https://open-meteo.com/en/docs/marine-weather-api)。 2. 使用相同海域座標及時區。 3. 在 Current 選 `wave_height`、`wave_period`、`wave_direction`。 4. 複製 API URL，先查看回傳的 `current.time`、`current_units` 與數值。 [取得教學座標的 Current 波浪資料](https://marine-api.open-meteo.com/v1/marine?latitude=24.1&longitude=120.1¤t=wave_height,wave_direction,wave_period&timezone=Asia%2FTaipei) ```text 請讀取這個 Marine API 網址，先顯示資料表，不改動畫面。 本次使用 Current；欄位為 current.time、current.wave_height、 current.wave_period、current.wave_direction。 顯示回傳的 current_units 與 timezone，請不要寫死假數字。 與風資料同時展示時，請先核對兩份 Current 的有效時間。 若時間不同，要分別標出，不可把不同時間的值說成同時資料。 若無法取得或欄位為 null，顯示缺值與原因，不可自動補零冒充正常海況。 ``` ### 欄位與畫面對照 | 資料 | 欄位 | 單位與意思 | 可先做的教學效果 | |---|---|---|---| | 風速 | `wind_speed_10m` | 本例指定 m/s；地上 10 公尺高度 | 示意轉速，不能直接稱真實機組預測 | | 風向 | `wind_direction_10m` | °；風吹來的方向 | 風向標記，接模型前核對座標方向 | | 波高 | `wave_height` | m；有效波高為統計量 | 起伏大小的教學映射，需說明換算 | | 週期 | `wave_period` | s；波浪的週期 | 起伏節奏 | | 浪向 | `wave_direction` | °；浪從哪裡來 | 波浪前進方向，需轉換成場景座標 | | 洋流 | `ocean_current_velocity`、`ocean_current_direction` | 流速單位看回傳值；流向是往哪裡去 | 先畫箭頭，再增加移動粒子 | | 海面高度 | `sea_level_height_msl` | m；相對全球平均海平面的高度 | 若要表現升降，先核對地點與基準 | 風、浪採「來向」，上述洋流欄位採「去向」，不能照抄同一套箭頭方向。海面高度欄位包含潮汐及其他影響，不能直接改名為純潮汐。若要加入真實潮汐，應先確認資料來源與基準；未接入時不可宣稱已完成。[Marine 欄位定義](https://open-meteo.com/en/docs/marine-weather-api) ### C. 核對以後，才讓資料控制場景 ```text 現在把已核對的資料接到畫面，請先列出每個欄位的對應規則。 1. 風速影響教學用的轉子速度；不宣稱等於真實機組轉速或發電量。 2. 波高影響起伏大小，週期影響節奏，浪向影響前進方向。 3. 有效波高不是單一波的振幅，請說明這個簡化模型如何換算。 4. 保留「手動示範／預報資料」模式，明確標示目前使用哪一種。 5. 讀取失敗時說明原因，不用預設數值冒充即時資料。 先用一高一低兩組手動值比較，確認數字和畫面一起變， 再切換到實際資料。請展示資料時間，不只顯示下載時間。 ``` 資料服務的可用欄位、地區、使用限制與費用，正式專案開始時應再查官方文件與方案。頁面應保留資料來源署名與連結，並區分模型資料、預報及實測資料。[Open-Meteo 方案](https://open-meteo.com/en/pricing) ## 5. 光影：先示意，再談真實天文 ### A. 示意日夜不必先準備衛星照片 ```text 加入 0 到 24 小時的時間滑桿，顯示目前小時。 讓時間同時影響光源方向、亮度，以及天空與水面顏色。 先標示「示意日夜」，不要宣稱對應真實日期與日月位置。 晚上仍要看得清楚風機輪廓、按鈕及文字。 完成條件：從中午拉到傍晚與夜間，場景有連續變化，互動仍可操作。 ``` ### B. 真實日月需要地點、日期及計算依據 ```text 下一階段才加入真實日月位置。 使用者可設定經緯度、完整日期時間與台北時區。 請提出有官方文件或專案文件的天文計算工具，例如 SunCalc， 並列出其角度單位、方位定義，以及轉成 3D 場景座標的方法。 先用一個已知地點和時刻核對太陽方位，再連動光源。 月亮方位、雲量與天氣要分開處理，不可用同一個日夜滑桿宣稱全部真實。 ``` SunCalc 提供日月位置與時間計算。[專案文件](https://github.com/mourner/suncalc) 若下一階段要加入衛星地表或雲圖，要另外交代資料產品、取得時間、地理範圍、解析度及使用方式；衛星資料不是開始做日夜的前提；未取得和接入資料時，不可宣稱已實作。 ## 6. 從預覽到公開：交付完整專案，再建置與發布 ### A. 要求完整交付 ```text 請交付完整可下載專案，不只是一段零散程式。 內容包含所有原始碼、package.json、需要的素材、來源紀錄、README。 README 請用初學者能照做的方式說明： - 需要什麼執行環境與如何確認已安裝。 - 解壓縮後，要在哪個資料夾操作。 - 如何安裝依賴、開啟本機預覽、正式建置。 - 每一步成功時會看到什麼，失敗時應回傳哪段錯誤。 若採 Vite，請核對 npm run build 的輸出目錄，通常是 dist。 請確認輸出內有 index.html 及所需資產，再安排發布。 目前不能執行的檢查請列為未驗證，不可當成成功。 ``` 以 Vite 專案為例，電腦安裝相容的 Node.js 後，在 `package.json` 所在資料夾開啟終端機，依序進行： ```text npm install npm run dev ``` 打開工具顯示的本機網址，檢查互動。準備發布時執行： ```text npm run build ``` 這是示例；實際指令、版本與輸出資料夾以交付專案的 README 為準。本機預覽通常只在自己的電腦可用；建置成功也不代表已經上網。[Vite 靜態部署文件](https://vite.dev/guide/static-deploy.html) ### B. 把建置輸出放到 Cloudflare Pages 1. **發布者**登入 Cloudflare 後台，進入 Workers & Pages，選 Pages 的 Direct Upload／拖放檔案流程。 2. 輸入專案名稱，上傳建置輸出資料夾。本例是 `dist`，不是只上傳原始碼 `src`；入口 `index.html` 應位於上傳成果的根目錄。 3. 發布後取得 HTTPS 的 `pages.dev` 網址；用未登入視窗及手機開啟確認。 後台名稱與版位可能調整，依 [Cloudflare Pages Direct Upload 官方文件](https://developers.cloudflare.com/pages/get-started/direct-upload/) 尋找當下入口。這個流程適用於本例的純前端靜態成果；若加入後端服務，需另做對應的部署設計。 ```text 這是純前端靜態專案，請帶我部署到 Cloudflare Pages。 先指出建置指令、輸出目錄、入口檔案，確認再上傳。 若使用後台，請寫出當下頁面位置及要上傳的內容； 若由具備執行能力的程式助理發布，請回報真正取得的部署網址與狀態。 取得網址後，用未登入視窗檢查： 首頁能載入、3D 場景出現、波高滑桿有效、機艙可開關、手機可操作。 若仍跳登入，請查明是聊天分享頁、存取限制或部署設定， 不要把聊天預覽連結說成公開網站。 ``` 發布者需要帳號與部署權限，**公開訪客免登入**是另外要驗證的結果。Claude 成品或 ChatGPT 分享頁的存取規則也不等同 Cloudflare 公開網址。 ### 發布檢查表 | 檢查 | 看到什麼才算通過 | |---|---| | 入口 | 未登入視窗能直接開啟 HTTPS 網址，沒有要求訪客登入 | | 資產 | 海面、風機、文字正常出現，沒有空白或缺檔 | | 互動 | 拖曳、重設、波高、播放、機艙開關都有實際反應 | | 資料 | 來源、地點、有效時間、單位、手動／資料模式清楚可辨 | | 失敗 | 斷線或缺值時可理解，不用假資料冒充成功 | | 手機 | 能點選、滑動，主要按鈕與說明不互相遮擋 | | 驗證範圍 | 實體手機、手機模擬、桌面瀏覽器分別記錄，不互相替代 | ## 7. 集中練習：示範結束後再做 ### 練習一：三次指令，完成小海面 從本文第 2 節依序複製 A、B／C、D 三階段要求。每次等成果可操作、檢查通過後再繼續，不必一次貼完所有指令。 完成後保留三張截圖或短錄影： - 平面：能拖曳，能重設。 - 網格與波浪：側面看見起伏，波峰持續移動。 - 波高：0.5 與 2 的數字、形狀都不同，能還原。 卡住時用回饋範本：「操作 → 預期 → 實際 → 證據」。如果目前工具無法執行，先取得完整檔案及開啟步驟，再交給能執行專案的程式助理。 ### 練習二：換成下一個互動網站 ```text 我要做【主題】互動網站。 觀眾要理解【一個目的】。 第一版讓觀眾操作【一個動作】。 已有素材： - 【檔案、網址、用途、使用條件】 尚缺資料： - 【內容、可能來源、待確認事項】 請先問最必要的問題，再提出最小可預覽版本。 每次只增加一項功能，附上「怎麼操作、應該看到什麼、錯了怎麼回報」。 若資料不足，先標示示意或待確認，不可自行補成真實資訊。 等最小版本能用，再安排完整專案、建置、公開部署及未登入檢查。 ``` 完成條件：能用自己的話說出「觀眾看什麼、操作什麼、資料從哪裡來、如何判斷已完成」，並取得第一個可檢查的互動成果。 ## 官方參考來源 查核日期：2026-10-19。正式製作時請重新確認工具入口、版本與資料方案。 - [ChatGPT 程式碼區塊與預覽](https://help.openai.com/en/articles/20001246-working-with-writing-blocks-and-code-blocks-in-chatgpt) - [Claude Artifacts 說明](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them) - [Three.js 平面分格](https://threejs.org/docs/pages/PlaneGeometry.html) - [Three.js 著色器材質](https://threejs.org/docs/pages/ShaderMaterial.html) - [Three.js 方向光](https://threejs.org/docs/pages/DirectionalLight.html) - [React Three Fiber 入門](https://r3f.docs.pmnd.rs/getting-started/introduction) - [美國能源部風機原理](https://www.energy.gov/cmei/systems/how-do-wind-turbines-work) - [Open-Meteo Weather API](https://open-meteo.com/en/docs) - [Open-Meteo Marine API](https://open-meteo.com/en/docs/marine-weather-api) - [Open-Meteo 方案](https://open-meteo.com/en/pricing) - [SunCalc 日月計算](https://github.com/mourner/suncalc) - [Vite 靜態部署](https://vite.dev/guide/static-deploy.html) - [Cloudflare Pages 直接上傳](https://developers.cloudflare.com/pages/get-started/direct-upload/)