可滾動的 3D 登陸頁面（適用於任何物體）
此技能用於建立一個單頁式登陸頁面，其中一個 3D 物件是主角。該物件固定在內容背後，並隨著使用者滾動，改變其姿勢、渲染風格和背景。適用於任何可以展示為物體的東西：一個酒瓶、一副耳機、一張椅子、一把吉他、一只手表、一輛汽車、一個建築模型、一個雕塑、一台舊相機、一個香水瓶、一個工具或一個玩具。
參考案例是 toppervenom.com，來自 Evil Rabbit（原文），這個技能的靈感正是來自该项目。它展示了一雙 90 年代的 Topper 籃球鞋；其 3D 模型並非掃描所得，而是使用 AI 基於檔案材料和生成的所有視角圖像重建而成。該頁面從技術藍圖開始（白色線框覆蓋在藍色網格上），然後「填充」真實材質，顯示其尺寸和零件，更換顏色，最後旋轉展示。鞋子只是例子；真正複製的是建構頁面的方式及其品質水準。 每個項目都應選擇自己的視覺概念、自己的場景序列以及最適合其物體的解鎖效果（請參閱下方的「根據物體調整」）。
為什麼這些網站看起來如此出色（開始前請閱讀）
品質並非來自技術堆疊。toppervenom.com 大約只有 90 KB 的 HTML/CSS/JS 加上 Three.js（根據作者說法，該頁面由 AI 一口氣生成）：沒有框架、沒有 GSAP、沒有打包工具。品質來自五個方面，專案的每個決策都必須服務於其中之一：
- 一個真實且準備充分的 3D 資產。 帶有照片級紋理的掃描模型、精心處理的 AI 重建（如 toppervenom）、或一個細節真實、乾淨、輕量且具有真實比例的模型。如果模型不好，其他一切都無法挽救。→
references/3d-capture.md，references/3d-alternatives.md - 基於攝影美學的渲染。 三點照明、環境貼圖（environment map）、中性色調映射（tone mapping）、接觸陰影（contact shadow）以及修正後的材質（掃描模型通常帶有虛假的金屬感，使皮革看起來像塑膠）。→
references/rendering.md - 執行到每個細節的藝術指導概念。 toppervenom 中的「技術藍圖」：網格、尺寸、等寬字體，載入器顯示「PLOTTING DRAWING Nº 01」，導航欄顯示「REV. 0 — BLUEPRINT」。一切都在講述同一個故事。→
references/art-direction.md - 基於物理的運動，而非關鍵幀。 每個區塊宣告姿勢；JS 使用 smoothstep 進行插值，並使用指數衰減對每個值進行緩衝。這賦予了重量感和慣性。→
references/choreography.md - 能夠證明 3D 價值的著色器效果。 用一個平面掃過物體來實現線框到實體的解鎖、帶有菲涅爾效應的半透明表面、基於亮度的重新著色。這些是影片無法做到的事情。→
references/shaders.md
如果使用者要求「類似這樣的東西」，實際的工作是：獲取一個好的模型 + 選擇一個概念 + 耐心調整。範本解決了工程問題。
根據物體調整（不要複製鞋子）
範本帶有一個範例序列（藍圖 → 尺寸 → 零件 → 解鎖 → 數字 → 起源 → 結尾），但物體的形狀及其故事決定了構圖、效果和場景。在編寫姿勢之前，請將物體歸類到此表格中：
| 物體形狀 | 範例 | 構圖 | 最佳解鎖效果 | 典型場景 |
|---|---|---|---|---|
| 水平方向較長 | 鞋子、汽車、吉他、刀、筆、火車 | 物體在一側，文字在另一側；純粹的側面輪廓適合標註尺寸 | 沿長度方向掃掠（從頭到尾） | 技術輪廓、零件細節、速度或使用方式 |
| 垂直/旋轉體 | 瓶子、香水、燈、花瓶、獎盃、建築物 | 物體居中或偏三分之一，文字分兩欄在兩側；高潮部分採用仰視角度 | 從下往上掃掠（「填充」）或橫向切割 | 輪廓、材質或內容、起源、使用儀式 |
| 緊湊/方塊狀 | 耳機、相機、音箱、手表、遊戲機、珠寶 | 大型特寫（scale 1.4–2），像微距攝影般掃過物體 | 爆炸視圖或對角掃掠 | 設計、內部/組件、材質、規格 |
| 扁平/適合正面閱讀 | 書、唱片、畫作、電路板、卡片、平板 | 短距離旋轉（±0.4弧度）以顯示厚度；不要長時間側立 | 聚集的點，或「浮現」的繪畫 | 正面、背面、紋理細節、背景 |
| 有機/雕塑感 | 雕塑、食物、植物、化石、玩具 | 緩慢而大幅度的旋轉，大量輪廓光 | 點雲 → 表面，或帶有菲涅爾效應的半透明效果 | 形狀、紋理、歷史、人類尺度 |
| 組裝零件 | 家具、機器、模型、模組化產品 | 3/4 高角度，顯示整個組合 | 按滾動進行爆炸拆解：每個零件沿其軸線分離並返回 | 組合 → 爆炸 → 逐個零件 → 組裝 |
| 大尺度 | 房屋、建築物、土地、船 | 相機較遠，像桌上的「模型」一樣旋轉 | 按樓層垂直掃掠、剖面切割 | 位置、樓層平面圖、剖面圖、材質 |
同時應根據物體選擇視覺概念，而非默認使用。 「技術藍圖」適合所有設計或製造的物品；一個酒瓶可能需要「酒莊檔案」；一個雕塑可能需要「博物館目錄」；一個小工具可能需要「實驗室」；一個復古物品可能需要「時代目錄」。 完整選單在 references/art-direction.md，備用效果（爆炸、點雲、切割、填充）在 references/shaders.md。
工作流程
請按順序執行以下階段。 在編寫程式碼之前，請與使用者確認階段 1 和 2 的決定，因為它們會改變後續的一切。
階段 1 — 簡報與概念（與使用者 5 分鐘）
提問或推斷：
- 什麼物體以及它的材質（皮革、玻璃、金屬、霧面塑膠、布料）。 材質決定了如何捕獲它以及如何為它打光。
- 5–8 個場景的故事。 每個場景是一個區塊和物體的一個姿勢。 典型範例：介紹 → 藍圖/尺寸 → 解剖學（零件） → 解鎖 → 數字 → 起源/歷史 → 結尾。
- 視覺概念，即統一一切的隱喻。 不要默認複製「藍圖 (blueprint)」：選擇對那個產品有意義的隱喻。 在
references/art-direction.md中有一個概念選單（技術藍圖、博物館檔案、實驗室、90 年代目錄、時尚編輯、工業爆炸圖）及其調色板、字體以及如何將其轉化為 3D。 - 真實內容。 數據、尺寸、材質、歷史和致謝。 參考網站之所以真實，是因為它們使用了原始目錄和掃描的真實數據。 如果沒有數據，請索取；不要為真實產品捏造規格。
- 語言（es/en）以及是否有顏色變體。
階段 2 — 獲取 3D 模型
這是對最終品質影響最大的階段。 使用此決策樹並閱讀相應的參考資料：
使用者是否擁有實體物體？
├─ 有 → 掃描它 (references/3d-capture.md)
│ ├─ 霧面/有紋理的物體（鞋子、食物、石頭、木材、布料）→ 使用手機或相機進行攝影測量
│ ├─ 光亮、黑色或透明的物體 → 臨時啞光噴霧 + 攝影測量，或建模
│ └─ 非常小/細的物體（珠寶、電線）→ 微距攝影測量或建模
└─ 沒有 → 替代方案 (references/3d-alternatives.md)
├─ 有製造商的 CAD/STEP 檔案 → 轉換並添加紋理
├─ 有多個角度的好照片 → AI 圖像轉 3D（Meshy, Tripo, Rodin, Hunyuan3D, TRELLIS）+ 清理
├─ 幾何形狀（瓶子、罐子、燈、家具）→ 在 Blender 中建模（旋轉/擠出），1–4 小時
├─ 通用產品 → 購買或下載具有授權的（Fab, Sketchfab, CGTrader, Poly Haven）
└─ 無法獲得模型 → 程式化/風格化物體（lathe、SVG 擠出、點、線條藝術）
無論來源為何，模型都需要經過優化管線（references/asset-pipeline.md）：清理、減面至 100–300k 三角形、紋理解析度 2048–4096 並轉為 WebP、Meshopt 壓縮、真實比例、正確的原點和方向，以及一個為線框準備的、經過高度減面的獨立網格。 這個細節非常重要：密集網格的線框看起來像是灰色雜訊，而不是圖紙。
此步驟有一個準備好的腳本：scripts/prepare-model.sh <輸入.glb|.obj|.fbx> <名稱>。 它會生成優化後的 models/<名稱>.glb 和用於線條的 models/<名稱>-wire.glb。 使用範例中的 Stratocaster，它從 22.2 MB 縮減到了 1.8 MB。
掃描或手工模型。 減面的線框網格適用於掃描，因為邊緣是雜訊。 在手工模型（CAD, Sketchfab, Blender）中，減面的網格會變成橫跨表面的長三角形，看起來像網格而不是圖紙。 此時應在主網格上使用 wireMode: 'edges'，並設定 wireModel: null，不生成線框檔案。 它看起來像技術圖紙，而且可以省一個檔案。
來自 Sketchfab 的下載：需要登入（免費帳戶）。 如果你使用內置瀏覽器，請要求使用者登入，並在下載前確認名稱、大小和格式（GLB）。 將原始檔案保存在 source/ 目錄中，並在頁尾標註作者（CC BY）。
階段 3 — 從範本建立專案
將 assets/template/ 複製到專案目錄。 以下是它所包含的內容：
| 檔案 | 功能 |
|---|---|
index.html | 結構：固定背景（網格 + 紙張）、固定 <canvas>、固定 <svg> 疊加層、載入器、導航、進度條、顏色選擇器以及帶有姿勢屬性的區塊（data-ry, data-x, data-reveal…）。 |
styles.css | 視覺系統：標記、基於 clamp() 的流暢排版、CSS 網格、紙張背景、帶模糊的顯示效果、緩動曲線、行動端。 |
main.js | 引擎：渲染器、燈光、帶進度的載入、解鎖和顏色變體的著色器、線框和半透明效果、陰影、滾動編排、帶彈簧效果的拖拽、SVG 疊加層（尺寸和標註）、計數器、顏色變體。 所有內容均可從檔案開頭的 CONFIG 進行配置。 |
無需建置。 可使用任何靜態伺服器提供服務（npx serve, python -m http.server）。 由於 ES 模組的緣故，無法在 file:// 協議下執行。 Three.js 來自 jsDelirvr，並在 importmap 中固定了版本；用於生產環境時，建議將其複製到 vendor/ 目錄並添加 modulepreload（請參閱 references/performance.md）。
可在無模型的情況下測試：index.html?model=<glb 的網址>，或不帶參數以查看替換用的程式化物件。 一個好的測試 glb 是來自 KhronosGroup/glTF-Sample-Assets 的 MaterialsVariantsShoe.glb。
階段 4 — 將模型調整到場景中
在 main.js → CONFIG 中：
orient：旋轉直到物體的 Y 軸朝上，長度沿 X 軸（例如，對於一把原本豎直站立的吉他，使用[0, 0, -Math.PI/2]將其橫放）。 旋轉會在測量模型之前應用，因此包圍盒、尺寸、sweepDir、標註和爆炸圖始終以已旋轉的空間來表示。 使用?debug來查看軸向。realSizeCm：最長邊的實際尺寸，單位 cm。 所有顯示的尺寸都由此得出。sweepDir：解鎖掃掠的方向。 它應遵循物體的「自然閱讀」方向：長條狀物體沿長度方向（[1,0,0]或[0,0,1]），瓶子或建築物從下到上（[0,1,0]），緊湊物體則對角線方向（[0.3,0.3,1]）。callouts：零件的位置，表示為包圍盒的百分比（f, 0..1）或模型的精確座標（p, 使用其單位）。 程式碼會將它們吸附到最近的頂點。 從上到下排列，以免線條交叉。 使用?debug，點擊模型，控制台會列印出該點的精確百分比。colorways：為每種變體定義深色/淺色（如果物體沒有變體，則刪除選擇器）。 著色器會根據亮度重新著色，並保留飽和度細節；如果物體本身是飽和顏色，則設定keepSaturated: 0。- 區塊：可以自由添加、刪除或重新排序
<section>。 引擎會讀取任意數量的區塊的姿勢，順序不限。 - 針對特殊情況的引擎選項：
procedural: () => Object3D透過程式碼生成物件，而不是載入 glb。wireMode: 'edges'僅繪製邊緣線條。 這對於硬邊物體、CAD 或程式化物體來說是最好的。extraKeys: ['screen']+onFrame(cur, dt, t)用於由區塊控制的自訂效果（data-screen）。 例如，一個亮起的螢幕、一個燈光或一個打開的蓋子。- 使用
data-explode進行爆炸視圖：每個零件根據其userData.explode = [x,y,z]移動（如果沒有則遠離中心）。 - 按零件設定：
userData.noRecolor（忽略顏色變體），userData.noWire（不在藍圖中顯示），userData.keepPbr（引擎不修改其材質）。 recolorOnly: ['BodyMaterial']：僅這些材質（根據 glb 中的名稱）會應用顏色變體。 在吉他範例中，會為琴體上色，而護板、琴頸和五金件保持不變。keepPbr: true：尊重手工模型的 PBR（真實金屬、帶 Clearcoat 的清漆）。 預設情況下，引擎會修正掃描和 AI 模型的虛假金屬感，這會破壞一個好的手工模型。wireColors: [顏色搭配 paper 0, 顏色搭配 paper 1]和edgeColor使藍圖適應任何概念，例如使用專利紙上的墨水色，而不是白色搭配藍色。 背景的兩個狀態（backdrop__grid和backdrop__paper）只是名稱：可以將它們樣式化為板材 → 舞台、櫥窗 → 夜色等。data-rz（翻滾）用於讓長條物體豎立，例如吉他放在支架上。 當物體豎立時，地面陰影會自動關閉。
- ``
…
[原文已截斷]