場景方向
當被要求製作「沉浸式 3D 網站」時，模型往往會產出所有 3D 示範的平均值：紫色夜空中的呼吸球體、帶有弧線的點狀地球、灰色地板上的灰色產品，或每個區段都相同整齊的分割版面。而獲獎的網站則做了不一樣的事：一個來自主題的點子、一個圍繞其物體的世界、隨著故事節拍改變鏡位的攝影機、帶有光源與分級後製的光線、有聲音的字體、一個可以互動的東西，以及真實網站的 chrome。 並且它們能在手機上順暢運作。
此技能為您提供一個經處理的方向、一個資產庫、一個包含完整後製管線的入門套件，以及一個會像訪客與評審那樣渲染您頁面的檢查工具。它掌握 3D 方向。如果已安裝頁面設計技能（taste-skill、impeccable、hallmark）、three.js API 技能（cloudai-x/threejs-skills）或官方 GSAP 技能，請將那些部分交由它們處理。
<skill> 代表此技能的文件夾。請從專案資料夾執行腳本。
執行流程
- 盤點。 列出真實存在的東西：主題的名稱、它製造或銷售的產品、它的地點、它的數字、它的工藝品，以及任何提供的模型或圖像。提供的模型就是主角（references/object.md）。
- 發派方向。 獨自進行時你會選擇類別預設值，所以讓腳本發派：
node <skill>/scripts/draw.mjs --kind <人物|製造者|產品|地點|品牌|活動|...> --brief "<一行描述>" node <skill>/scripts/draw.mjs --direction <選擇的 id> --brief "<一行描述>" --scenes <n>.scene-direction/sheet.md：氛圍、世界、光線、後製、要尋找的資產、地面、字體，以及每個場景的鏡位與文案配置。採用它。只在有明確理由時重新發派，並在報告中說明。 - 點子與互動元素（references/idea-and-devices.md）。在這個網站上，[一個屬於主題的東西] 變成 [方向的世界或裝置]。 它必須無法通過競爭者測試。加入一個互動元素。閱讀 references/tells.md。
- 取得資產（references/assets.md）。執行 sheets 中的
assets.mjs指令：HDRI，以及根據 sheet 的精細度，取得主題世界周圍的道具與表面。在選擇之前先查看預覽圖，然後用get將它們放入assets/。 - 從
<skill>/assets/starter.html開始建置。 它是基礎設施，而非版面：全出血畫布，其背景為 CSS 地面、後製鏈（HDRI、AO、泛光、暗角、色調映射、SMAA）、供攝影機使用的SHOTS、每個場景的文案配置與遮罩、一個時鐘（gsap.ticker + Lenis）、線條揭示、簡短的開場、頁首、索引與頁尾、指標漂移、減少動態與品質步驟。從 sheets 中填入FINISH以及每個區段的data-ground、data-shot、data-copy與data-chapter。取代預留位置的文字、標題與描述。在 Vite 或 Next.js 中，移植其零件。 - 製作世界與物件（references/object.md、colour-world.md、finish.md）。將主題自己的物件建模至 object.md 中的標準，然後將其放置於某處：你取得的道具與表面、一個房間、一個山谷、一個收藏中。使用 sheets 中的燈光配置與框架內的光源進行照明。
- 故事、鏡位與動態（references/scenes-and-motion.md、motion-and-type.md）。每個場景都有一個節拍、sheet 中的鏡位，以及用展示字體呈現的陳述。對於地點，攝影機沿著路線穿越世界（
path場景），絕不繞著立體模型。規劃攝影機的路徑、手機版本與減少動態。以主題的語言裝飾 chrome（references/chrome.md）。 - 檢查。
node <skill>/scripts/check.mjs <資料夾或網址> --out scene-check # 加入 --click "Enter" 以處理開場閘門npm i -D playwright && npx playwright install chromium，如果專案不應引入該依賴，則在暫存資料夾中執行）。它會在桌面與手機上錄製每個場景在靜止點的畫面（scene-check/film-desktop.png、film-phone.png），再次載入頁面（啟用減少動態），並回報幀時間、頁面權重與開場耗時。閱讀它寫入的每個影像。 - 檢視與修復：前三項，最多三輪（references/critique.md）。根據影像對照評分標準打分數，修復最弱的三個項目，檢查並再次檢視。使用能保持設計的最小變更來修復問題。如果某個問題是刻意的（分層字體、刻意裁切、物體從折線下方升起），則保留它並指名。
- 報告。 提供方向、點子句子、互動元素、你使用的資產、檢查結果、你的分數，以及你刻意保留的項目。
企圖心，而非保守
在盲測中，評審每次在兩者之間選擇時，都偏好帶有小缺陷的豐富、有氣氛的頁面，而非整齊、安全的頁面。消除缺陷是工作的一半。另一半是內涵：
- 全出血。 3D 佔據整個畫面。文案透過遮罩放在其上，或放在物件旁邊，同時渲染畫面遠離它。
- 每個場景不同的鏡位。 不要使用相同的攝影機只交換文案。檢查工具會標記整個滾動中只顯示一或兩個鏡位的頁面。
- 大型主視覺。 在第一個畫面中，物件或世界填滿大部分畫面，旁邊是巨大的名稱。
- 一個世界，而非虛空中的物件。 房間、桌子、土地、收藏、屬於主題的道具，以真實比例呈現。
- 氣氛與後製。 帶有時間與方向的光線、場景內發光的光源、接觸陰影、分級畫面。豐富，而非乳白：每個畫面都有真正的黑暗與飽和色彩；霧氣僅用於世界中的遠距離，絕不覆蓋主題。
- 有聲音的字體。 sheets 中以展示尺寸呈現的展示字體，搭配來自盤點的真實文字與數字，逐行出現。
- 一個網站，而非示範。 頁首、索引、帶有真實聯絡資訊的頁尾、約 2 秒的開場。
底線：絕不能出貨這些
- 檢查工具報告的 ERROR：當機、空白畫布、載入失敗（啟用減少動態時亦然）。
- 主題意外被裁切，或在手機第一個畫面中變得很小。
- 在其場景靜止點無法閱讀的陳述，或滾動過程中出現沒有文字的段落。
- 比手機還寬的版面。
- 隱藏的原生游標、缺少標題、描述或
h1，或預留位置的複製文字。 - 讓訪客等待超過幾秒的開場，或在檢查工具 GPU 上幀率低於 40 fps 的畫面。
- 過時或不匹配的 three.js 版本。使用專案的版本，或下方列出的版本。
依標籤修復
- [errors]：先修復第一個錯誤。常見原因包括：建構子參數順序錯誤、
let/const在宣告前使用、不同版本的 addon URL、缺少 import-map 條目、404 錯誤，以及被 CORS 封鎖的紋理。 - [framing]：根據當前長寬比，為每個鏡位設定畫面（references/framing.md）。
- [ambition]：為每個場景賦予 sheets 中獨有的鏡位（references/scenes-and-motion.md）。
- [story]：沒有陳述的畫面。在每個場景的畫面中保持其文字顯示，僅在轉場時淡出（入門套件的迴圈會處理這個）。
- [labels]：重疊或裁切的文字與標籤；手機上的工具列（references/labels.md）。
- [legibility]：在移動任何東西之前，先冷靜文字背後的場景或強化遮罩（references/legibility.md）。發光且泛光的表面過亮：降低燈光強度，而非閾值。
- [usability]：評審的基本要求：原生游標、標題、描述、語言、一個
h1、替代文字、減少動態（references/chrome.md）。 - [performance]：像素比、陰影貼圖大小、AO 品質、減少道具、較小的紋理（references/finish.md §7）。
鎖定版本
於 2026-11-03 在 npm 與 jsDelivr 上檢查（入門套件的 import map）：
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao 會匯入 three/examples/jsm/…，所以保留該條目。postprocessing 6.39 支援 up to r187。r187 備註：PCFSoftShadowMap 已移除（改用 PCFShadowMap 搭配 shadow.radius）；HDRLoader 取代 RGBELoader；outputEncoding/sRGBEncoding 已移除。GSAP 3.13+ 包含 SplitText（gsap/SplitText.js）。
參考文件
| 檔案 | 閱讀時機 |
|---|---|
| references/idea-and-devices.md | 步驟 3：點子句子、裝置、互動元素 |
| references/tells.md | 步驟 3，以及報告前再次閱讀 |
| references/assets.md | 步驟 4：精細度、尋找與放置道具、表面、預算 |
| references/object.md | 步驟 6：提供的模型（包括配色變體）、程式碼建構物件的標準、細節、材質 |
| references/colour-world.md | 步驟 6：背景色票、燈光與材質；色調映射；霧；顆粒 |
| references/finish.md | 步驟 6：燈光配置、HDRI、接觸陰影與 AO、後製鏈、效能 |
| references/scenes-and-motion.md | 步驟 7：節拍、鏡位詞彙、攝影機路線、路徑、手機 |
| references/motion-and-type.md | 步驟 7：一個時鐘、ease 與持續時間、揭示、開場、字體尺度、減少動態 |
| references/chrome.md | 步驟 7：頁首、索引、頁尾、游標、標記、聲音 |
| references/critique.md | 步驟 9：評分標準與檢視修復循環 |
| references/framing.md、labels.md、legibility.md | 根據該標籤修復問題 |
| references/example-furkanboran.md | 查看標準：一個被拆解的實際網站 |
| library/directions.json | 腳本發派的十二個方向 |
致謝
被處理的方向、點子句子、競爭者測試、「一個互動元素」、檢視修復循環，以及「僅保守會顯得薄弱」的警告，改編自 taste-skill（MIT）。簽名與方向輪替來自 hallmark（MIT），體驗模式來自 impeccable（Apache-2.0），原型詞彙來自 awwwards-3d（MIT）。模型、紋理與 HDRI 來自 Poly Haven（CC0）。實作範例及其改編模式來自 Furkan Boran 的 furkanboran.info。請參閱 README.md。