Three.js 互動式 3D 產品展示
2025
360° 環景圖是一個以 Three.js 打造的互動式 3D 產品展示頁面，以 LED 高效能漁業集魚燈為展示案例，讓使用者透過拖曳旋轉、滾輪縮放從任意角度檢視產品細節。
頁面整合了 3D 即時渲染、多色燈光切換、水下場景模擬、X 光透視模式等互動功能，搭配產品規格、傳統燈具比較表與投資回報率分析，兼具視覺展示與銷售說服力。
採用純 HTML5 + CSS3 + JavaScript 開發，無需任何建置工具，透過 ES Module Import Map 載入 Three.js，部署於 Netlify 提供即時預覽。
支援滑鼠拖曳旋轉、滾輪縮放，讓使用者從任意角度檢視產品細節，搭配自動旋轉功能呈現完整外觀
提供綠、藍、白、黃、紅五種燈色即時切換，LED 面板、光暈環、粒子特效同步更新色彩
內建開關燈、水下場景、X 光透視等多種檢視模式，完整展現產品在不同環境下的表現
整合詳細產品規格表、傳統燈具對比圖表，以及投資回報率分析，兼具展示與銷售功能
以 Three.js 0.163 為核心渲染引擎，透過 ES Module Import Map 從 CDN 載入，無需打包工具。渲染器啟用 ACES Filmic Tone Mapping（曝光值 1.2）與 PCF Soft Shadow Map，呈現電影級的光影質感。
場景加入 FogExp2 指數霧效（密度 0.012），營造深海氛圍的景深感。相機使用 PerspectiveCamera（FOV 45°），搭配 OrbitControls 實現拖曳旋轉（阻尼係數 0.06）與滾輪縮放（距離 4–18）。
LED 集魚燈以純程式碼建模（Procedural Modeling），無需外部 3D 檔案。主體由 CylinderGeometry（32 面平滑柱體）構成，頂蓋與底蓋為獨立幾何體。掛鉤使用 TorusGeometry，電纜以 Catmull-Rom 曲線搭配 TubeGeometry 生成。
8 片 LED 面板以 BoxGeometry 環狀排列（角度 = i/8 × 2π），材質採用 MeshPhysicalMaterial，具備 emissive（自發光）、transmission: 0.3（玻璃折射）與 opacity: 0.95（半透明）屬性。7 圈光暈環以 TorusGeometry 疊加，opacity 0.3 營造柔和光暈。
動態光源由 4 顆環形 PointLight + 1 顆中央 PointLight 組成，強度隨亮度滑桿即時調整。環境光（0x1a2a4a）與方向光（0x4466aa）提供基礎照明。
LED 面板以 正弦波脈衝動畫（2 Hz）模擬呼吸燈效果：pulse = 0.85 + sin(t×2) × 0.15。水下場景使用雙頻率 sin/cos 波形產生擬真海浪，搭配粒子系統（連續上浮動畫）呈現水中氣泡效果。
提供六種互動控制：自動旋轉（1.5°/frame）、開關燈（emissive intensity 0–2.5）、水下場景（wavy plane + 粒子特效）、X 光透視（wireframe + opacity 0.15）、燈色選擇（綠/藍/白/黃/紅即時切換）、亮度滑桿（0–100% 連續調節）。
換色時所有視覺元素同步更新：LED 面板 color/emissive、PointLight color、光暈環 emissive、粒子系統顏色，確保畫面一致性。
Pixel Ratio 上限為 Math.min(devicePixelRatio, 2)，避免高 DPI 裝置過度渲染。3D Canvas 僅覆蓋 Hero 區段（非全頁），減少 GPU 負擔。相機阻尼（dampingFactor 0.06）提供流暢的慣性操作，FogExp2 自然裁切遠處物件減少繪製量。
幾何體採用共享策略——光暈環建立一次後多次定位，冷卻鰭片共用相同 BoxGeometry，材質則為各元件獨立實例避免狀態污染。動畫以 Clock-based Delta Time 驅動，確保不同幀率下動畫速度一致。
頁面以純 HTML5 + CSS3 + JavaScript ES Module 開發，無框架、無打包工具。Three.js 透過 Import Map 從 jsDelivr CDN 載入。CSS 採用 CSS Grid / Flexbox 佈局，配合 Glassmorphism（blur 12–16px）面板風格。
響應式設計以 768px 為斷點，行動端切換為單欄佈局、折疊導覽。部署於 Netlify，靜態檔案直接發布（無建置步驟），設定 X-Frame-Options: DENY 與 X-Content-Type-Options: nosniff 安全標頭。
