Awwwards 風格 3D 網站
你正在打造滾動驅動、充滿電影感的 3D 網頁體驗，傳承自 Active Theory、Lusion、14islands、Bonhomme、Resn、Studio Freight、Locomotive 與 Igloo Inc. 的設計血統。美學目標是高級、緩慢、帶阻尼、光澤、大氣——絕不輕快、絕不雜亂、絕不預設。
核心哲學
在動手寫程式碼之前，請先閱讀以下內容。這是區分「Three.js 展示」與「Awwwards 每日網站」的關鍵。
- 美學優於幾何。 一個使用優質 HDRI、ACESFilmic 色調映射與泛光效果的 6 面立方體，看起來比一個由單一 DirectionalLight 照明的 20 萬面模型更好。應將預算優先投入在光線與後製上，幾何形狀則是最後考量。
- 萬物皆可 lerp。 任何數值都不應瞬間改變。相機位置、旋轉、滾動進度、滑鼠位置，甚至 raycaster 目標——都應透過阻尼因子（0.06–0.1 為最佳區間）進行平滑插值。世界之所以感覺有生命力，是因為一切變化都不突兀。
- 盡可能產出單一 HTML 檔案。 預設交付物為一個
.html檔案，使用來自unpkg（以及用於 GSAP 的esm.sh）的 ESM 匯入。除非使用者明確要求，否則不需要建置步驟。這使作品便於攜帶、審查和分享。 - 行動優先，效能至上。 將
pixelRatio上限設為Math.min(devicePixelRatio, 2)。進行視錐剔除。在行動裝置上減半後製效果。在 Chrome DevTools 中針對中階 Android 裝置測試後，才能宣布完成。 - ACESFilmic 色調映射不容妥協。
renderer.toneMapping = THREE.ACESFilmicToneMapping與renderer.outputColorSpace = THREE.SRGBColorSpace。沒有這個，所有東西看起來都會很平、很「WebGL 味」。 metalness > 0需要環境貼圖。 沒有環境貼圖的金屬材質就是個黑色團塊。在引入金屬/玻璃材質之前，務必先載入 HDRI（或使用RoomEnvironment作為備案）。- 桌機目標 60fps，行動裝置底線 30fps。 如果達不到，優先減少後製處理次數，而非減少幾何體——人眼更容易察覺畫面噪點，而非三角形數量。
鎖定的技術棧
這些版本已一同測試。未經詢問請勿升級。
three 0.170.0
gsap 3.12.5 (含 ScrollTrigger)
lenis 1.1.0 (不是 @studio-freight/lenis——那個套件已退役)
後製處理使用 three 內建的 EffectComposer，路徑為 three/addons/postprocessing/。獨立的 postprocessing 函式庫 (v6.36.0) 經過評估後已從此技能中移除——其內部呼叫了 Material.onBeforeRender()，而 three r170 已移除該方法，導致每個材質每幀都會產生一條主控台警告。Three 內建的處理程序（UnrealBloomPass、OutputPass、ShaderPass、LUTPass 等）已涵蓋我們需要的所有效果，且無版本漂移問題。
玻璃材質使用 three 內建的 MeshPhysicalMaterial，搭配 transmission: 1.0 + dispersion: 1.2（r166+ 功能——無需外部函式庫即可實現色散折射）。drei-vanilla 的 MeshTransmissionMaterial 並非 three 核心/附加元件的一部分；僅在需要時間扭曲或每個物件的後緩衝區取樣時才考慮使用（然後將 drei-vanilla 和 [email protected] 加入你的 importmap）。請參閱 PATTERNS.md #5 以了解這兩種路徑。
CDN 匯入使用此 importmap 模式（請參閱 assets/templates/minimal.html 以取得規範範例）：
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
"gsap": "https://esm.sh/[email protected]",
"gsap/ScrollTrigger": "https://esm.sh/[email protected]/ScrollTrigger",
"lenis": "https://unpkg.com/[email protected]/dist/lenis.mjs"
}
}
</script>
合成器選擇——已定案： 此技能使用 three 內建的
EffectComposer，路徑為three/addons/postprocessing/。獨立的postprocessingnpm 套件已經過測試並被拒絕：[email protected]會標記 r170 中已移除的Material.onBeforeRender()，導致每個材質每幀都淹沒主控台。Three 內建的處理程序涵蓋了此技能所需的所有效果（泛光、透過 ShaderPass 實現的暗角、透過 ShaderPass 實現的顆粒、透過 LUTPass 實現的 LUT、透過 OutputPass 實現的輸出色調映射）。請參閱references/POST_PROCESSING.md以取得規範的處理程序鏈。
CDN 可靠性：
three和lenis預設使用unpkg.com——它完全鏡像 npm 目錄結構，因此three/addons/...可以乾淨地解析。cdn.jsdelivr.net經過測試，偶爾會無法從某些網路提供[email protected]/examples/jsm/postprocessing/*檔案（ERR_CONNECTION_CLOSED）。GSAP 使用esm.sh，因為這是 GSAP UMD 套件最乾淨的 ESM 網關。如果 unpkg 無法訪問，備援順序為：unpkg → esm.sh → cdn.skypack.dev。正式環境中，請將檔案供應至本地端（下載到/vendor/）——嚴格的 CDN 依賴僅適用於原型開發。
更新政策： 版本已鎖定，因為它們已一起測試。要升級：(1) 首先在
assets/templates/minimal.html中 bumped 版本，(2) 在瀏覽器中執行所有四個模板，(3) 修復任何中斷問題，(4) 更新 SKILL.md 和 PATTERNS.md。不要在單一模板中默默地 bumped 版本——模板間的版本漂移是「在我機器上可以跑」的第一大原因。
5 步驟工作流程
請依此順序進行。跳過任何步驟只會產出「技術展示」而非「高級網站」的成果。
步驟 1 — 識別體驗原型
每個 Awwwards 3D 網站都符合以下其中一種原型。選擇一個並承諾執行：
| 原型 | 模式 | 參考範例 |
|---|---|---|
| 物件展示 | 單一主角物件，相機隨滾動環繞/縮放 | Bonhomme 產品頁面、Apple AirPods Pro |
| 房間漫遊 | 相機沿路徑穿過 3D 室內空間 | Igloo Inc.、Bruno Simon 作品集 |
| 隧道 | 相機向前飛越無限幾何體 | Active Theory 實驗 |
| 垂直下降 | 滾動 = 穿過各層級下落/上升 | 14islands 案例研究 |
| 飛越 | 相機穿越一個景觀 | Lusion 案例研究 |
| 粒子場 | 數千個點對滾動/滑鼠產生反應 | Resn 實驗 |
如果使用者尚未指定，請詢問他們要使用哪種原型。不要發明新的——這些都是經過驗證的。
步驟 2 — 規劃素材
選擇能達到標準的最便宜來源：
- Three.js 基本幾何體 (
SphereGeometry,BoxGeometry,TorusKnotGeometry)——用於抽象/展示作品。大多數 Awwwards 網站都使用這些。不要忽視它們。 - 透過 MCP 使用 Blender——當你需要自訂形狀時。請參閱
references/BLENDER_PIPELINE.md以取得食譜（硬幣、玻璃球、團塊、低多邊形房間）和 GLB 匯出配置 (Draco + KTX2)。 - Polyhaven——HDRI 和紋理，免費，CC0 授權。HDRI 比模型更重要。
- Sketchfab——最後手段，用於現成模型。務必檢查多邊形數量。
步驟 3 — 選擇模板
從 assets/templates/ 開始：
minimal.html——空場景，已配置好 HDRI、色調映射、Lenis 和後製。可作為任何自訂項目的基礎。coin-scroll.html——硬幣隨滾動旋轉並掉落（物件展示）。room-walkthrough.html——相機沿樣條曲線穿過一個房間（房間漫遊）。glass-product.html——單一產品，使用MeshPhysicalMaterial的透射 + 色散（r166+）、HDRI、柔和泛光（物件展示，玻璃材質）。
模板是起點，不是最終成品。刪除不需要的部分，疊加你需要的部分。
步驟 4 — 依序疊加打磨效果（按此順序）
順序很重要。每個層級都假定前一層級已到位。
- HDRI 已載入並設為
scene.environment - 色調映射 —
ACESFilmicToneMapping，曝光度1.0–1.2 - 燈光 — 即使有 HDRI，也要新增一個
DirectionalLight來控制陰影方向 - 後製處理 — three 內建
EffectComposer，使用 HDR 目標 →RenderPass→UnrealBloomPass(強度 ~0.45，半徑 0.4，臨界值 0.82) → 暗角ShaderPass→OutputPass(套用renderer.toneMapping = ACESFilmic) → 最後疊加顆粒ShaderPass - Lenis 平滑滾動已連接到 GSAP
ScrollTrigger.update - 自訂游標 (可選，但這是 Bonhomme/Lusion 的標誌性元素)
- 滾動時間軸 — 由
ScrollTrigger驅動的 GSAP 時間軸，對相機/物體屬性進行 lerp - 影片顆粒 作為最終合成層 — 自訂
ShaderPass，搭配時間驅動的噪點片段，強度 ~0.05（請參閱references/POST_PROCESSING.md§ 「Pass 5 — Film grain」）
步驟 5 — 效能稽核
在宣布完成前：
- Lighthouse 效能分數在桌機上 ≥ 85，在行動裝置上 ≥ 70
- FCP < 1.8s, LCP < 2.5s
- 桌機 60fps，中階 Android 裝置至少 30fps
-
pixelRatio上限設為 2 - GLB 檔案已使用 Draco 壓縮，紋理盡可能使用 KTX2
-
requestAnimationFrame迴圈中沒有console.log（會在 DevTools 中毀滅效能） - 所有動畫由
delta時間驅動，而非幀數
硬性規則 — 絕不要做這些事
這些會產出有問題的作品。請參閱 references/ANTI_PATTERNS.md 以了解詳細說明。
- 不要有 snap 動畫。 每個屬性變化都應透過 lerp 或 GSAP
ease進行。 - 沒有環境貼圖時，
metalness不能大於 0。 結果：黑色團塊。 pixelRatio不能沒設上限。 一個devicePixelRatio = 2的 4K 顯示器會讓幀率掉到 15fps。- 不能使用未壓縮的 GLB。 Draco 壓縮是強制的（請參閱
BLENDER_PIPELINE.md）。 - 不要自動播放音訊。 瀏覽器會阻擋；使用者也會討厭。
- 動畫迴圈中不要有
console.log。 即使每幀一個也會毀滅 DevTools。 - 不要混合使用 CSS 驅動和 JS 驅動的滾動。 Lenis 擁有滾動的所有權。ScrollTrigger 從 Lenis 讀取。CSS
scroll-behavior: smooth必須移除。 - 正式環境中不要使用
OrbitControls。 它只用於原型開發。真正的網站使用滾動驅動的相機。 - 沒有宣告精度的
ShaderMaterial不要用。 行動 GPU 需要precision mediump float;。 - 不要每幀都對整個場景進行 raycating。 過濾到一小組可互動的網格。
- 不要使用基於幀數的動畫。 所有運動都必須由
clock.getDelta()的delta驅動，並與之相乘。一個 144Hz 顯示器和一個 30Hz 顯示器必須產生視覺上相同的運動。對於 lerp，使用一個與幀率無關的公式：factor = 1 - Math.pow(1 - ease, delta * 60)而非原始的ease。
參考檔案
按需載入這些檔案——不要在開始時全部讀取。
references/ARCHITECTURE.md— 場景結構、lerp/滾動迴圈、渲染順序references/PATTERNS.md— 33 個適用於常見需求的複製貼上程式碼片段references/PROCEDURAL_GEOMETRY.md— 純程式碼幾何體生成；基本幾何體、數學驅動的形狀、頂點位移、混合 Blender 模式。在考慮使用 AI 3D 生成器之前的預設路徑。references/BLENDER_PIPELINE.md— Blender MCP 食譜 + GLB 匯出配置references/SHADERS.md— GLSL 建構區塊（噪點、菲涅耳、色散、自訂材質）references/POST_PROCESSING.md— 泛光、景深、顆粒、色差食譜references/TRANSITIONS.md— Barba.js 頁面轉場、View Transitions APIreferences/ANTI_PATTERNS.md— 詳細列出哪些因素會破壞美學及其原因
靈感資料庫
當使用者對方向猶豫不決時，引導他們到這裡。在瀏覽器中開啟這些網站，不要截圖或爬取。
- Active Theory — https://activetheory.net — WebGL 技巧、GLSL 扭曲、手工打造的泛光和色散的大師
- Lusion — https://lusion.co — 超現實的產品展示、透射材質、完美的色彩分級
- 14islands — https://14islands.com — 俏皮的 3D、標誌性的頁面轉場、場景上品味獨特的排版
- Bonhomme — https://bonhomme.lol — 大膽的排版結合 3D、獨特的游標、以藝術指導為主導
- Resn — https://resn.co.nz — 大氣式粒子作品、夢幻般的調色盤、緩慢的相機移動
- Studio Freight — https://studiofreight.com — Lenis 的作者；極簡主義 + 完美調校的平滑度
- Locomotive — https://locomotive.ca — 原始 Locomotive Scroll 的作者；滾動編排的大師
- Igloo Inc. — https://igloo.inc — 景觀飛越、敘事節奏、皮克斯級燈光
- Awwwards Sites of the Day — https://www.awwwards.com/websites/sites_of_the_day/ — 每日策展的最新趨勢檔案
音訊（可選，但標誌性）
約 70% 的 Awwwards 3D 獲獎作品包含微妙的音訊：環境無人機音效、懸停滴答聲、滾動颼颼聲。做得好，音訊是「網站」與「體驗」之間的區別。做得不好，它是使用者在頭 2 秒內關閉分頁的原因。
規則：
- 使用 Howler.js (
https://esm.sh/[email protected]) 或 Web Audio API。環境音效不要使用<audio>標籤。 - 務必在使用者手勢（按鈕點擊、滾動到第一個視口之外）之後才開始播放。瀏覽器無論如何都會阻擋自動播放，但 UX 規則更嚴格：絕不要啟動使用者未要求的聲音。
- 在使用者介面角落提供一個持續可見的靜音切換按鈕。預設：行動裝置上關閉，首次訪問時關閉（使用
localStorage記住使用者返回時的選擇）。 - 環境音效以 -18 dB 到 -24 dB 循環。UI 音效...