# 從一句需求，到能操作的 3D 網站

新版教學教材，配合 10 分鐘內的操作示範影片。前面由示範者完整操作，觀眾練習統一放在本文最後。

這些提示詞是本次重現時整理的教學範本，**不是原作者曾經輸入的私人提示詞**。影片畫面為教學示意，並非 ChatGPT 或 Claude 的操作錄影。各工具實際入口、可用套件與預覽能力可能因裝置、方案、帳號及設定不同；不能把影片中的示意按鈕當成一定存在的產品功能。

參考成果：[海風之間｜台灣海峽互動實驗室](https://taiwan-strait-lab.pages.dev)。這個重現版本採簡化地形、程式風機與教學海浪；未串接真實潮汐，亦不宣稱使用衛星地表、衛星雲圖或 FFT 海浪。

## 影片安排與學習方式

本版影片約 9 分 30 秒，控制在 10 分鐘內。生成等待時間已剪短，保留的是「輸入需求、查看成果、檢查、要求修改」的關鍵操作。

| 章節 | 內容 | 觀眾應能回答 |
|---|---|---|
| 開場與工具 | 開新對話、要求可執行頁面、找到預覽 | 我收到程式碼後，如何要求能看的成果？ |
| 海面 | 平面、網格、移動波浪、波高滑桿 | 我該下什麼指令，如何看出功能有效？ |
| 風機 | 簡模、旋轉、參考資料、內部與點選 | 哪些可直接生成，哪些必須補資料？ |
| 資料 | 找官方資料、選欄位、檢查後連動畫面 | 數字從哪來，如何避免接錯或假造？ |
| 日夜 | 示意時間、光影、真實日月位置 | 什麼時候需要日期與地點？ |
| 發布 | 完整專案、建置輸出、Cloudflare、未登入檢查 | 預覽與公開網站差在哪一步？ |
| 最後練習 | 小海面、下一個互動主題 | 我能否用相同方法開始另一個網站？ |

每段示範都使用同一個順序：**這次只做一件事 → 看可操作成果 → 對照完成條件 → 指出差異 → 修正後重查。**

## 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&current=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&current=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/)