專業 LED 集魚燈製造商官網 + 互動式 3D 產品展示
2026
亙順科技是專業 LED 集魚燈製造商，專注於高效能 LED 集魚燈的研發與製造，擁有全球唯一 LED 捕魷魚成功案例。產品結合創新科技與環保理念，協助漁民提升作業效率、降低能源消耗，同時守護海洋生態的永續發展。
集魚燈是規格繁複的工業產品 — 光色（純白／紅白／綠白／紅綠）、功率（700W／1200W）、外殼結構都是漁民採購的關鍵。官網的核心任務，是讓遠端買家不必到現場就能看清產品，因此我們把原廠 CAD 模型搬上網頁：以 Three.js 打造互動式 3D 產品檢視器，可自由旋轉、縮放、切換線框，直接在瀏覽器檢視每一個結構細節。
前端以 Astro 5 SSR 搭配 Vue 3 互動元件建構，並設計一條完整的 CAD → glTF 資產管線（OpenCascade 轉檔 + Draco 壓縮），兼顧模型精度與網頁載入速度。產品、新聞、實績由 Laravel + GraphQL + Filament 後台管理，中英雙語 SSR 則鎖定外銷市場的 SEO 與海外買家。
Three.js 於瀏覽器即時渲染集魚燈模型，支援滑鼠旋轉、滾輪縮放、右鍵平移，並可切換自動旋轉與線框模式，直接在網頁上看清每一個結構細節
以 OpenCascade（occt-import-js）讀取原廠 CAD／STEP，經 @gltf-transform 最佳化並套用 Draco 幾何壓縮，大幅縮小模型體積以利網頁載入
純白・紅白・綠白・紅綠 等光色搭配 700W／1200W 功率分類瀏覽，每款皆可下載規格書、檢視實績案例
全球唯一 LED 捕魷魚成功案例、高轉換率、指向性省電、IP66 抗鹽霧、無重金屬環保訴求，以動態區塊凸顯品牌核心優勢
後台可管理的最新消息，隨時對外發布新品、展會與漁業合作資訊
Astro 伺服器端渲染搭配 i18n，中英內容皆完整輸出 HTML，鎖定外銷市場的 SEO 與海外買家
產品、新聞、實績由 Laravel + Filament 後台維護，前端透過 GraphQL 即時拉取，業主自行更新不需工程介入
「免費評估、專業安裝、完整保固」的 CTA 串接聯絡表單，引導漁船升級需求直接進入詢價
產品展示以 Three.js 建構互動式檢視器：載入每款集魚燈的 3D 模型後，透過 OrbitControls 提供滑鼠旋轉、滾輪縮放、右鍵平移，並支援自動旋轉與線框模式切換。模型載入具備「載入中／載入失敗／暫無模型」等狀態處理，讓遠端買家在瀏覽器就能檢視結構，不必仰賴平面照片。
原廠設計檔多為 CAD／STEP，無法直接於網頁渲染。我們以 occt-import-js（OpenCascade 的 WASM 移植）讀取 CAD 幾何，轉為 glTF 後，再用 @gltf-transform 進行最佳化並套用 draco3dgltf 幾何壓縮，大幅縮小模型體積、加速首次載入，兼顧精度與效能。
前端以 Astro 5 伺服器端渲染，首屏內容由後端 GraphQL API 即時拉取並預先組裝，確保 SEO 爬蟲與社群分享預覽取得完整內容。3D 檢視器等重互動元件以 Vue 3 Islands 架構搭配 client:visible 懶載入，把 Three.js 的載入成本延到使用者真正需要時才發生。
產品目錄、新聞快訊、實績案例皆透過 GraphQL 從 Laravel 後端拉取，以 ofetch 統一封裝請求。業主可在 Filament 後台自行維護產品規格、3D 模型與最新消息，前端內容即時同步，不需工程介入。
以 Tailwind CSS 4 @theme 定義深海設計 token：深海 navy 作為舞台、LED 青綠光暈為點綴，呼應集魚燈於海面下的發光意象。3D 檢視器、產品卡片與技術區塊在深色背景上維持一致的科技感與可讀性。
全站採中英雙語 i18n，兩種語言皆為 SSR 完整輸出，並自動產生 sitemap 與 hreflang，鎖定外銷漁業市場的海外買家。每頁具備結構化資料（JSON-LD）與 OG 標籤，提升搜尋與社群分享的曝光。
集魚燈屬於高單價的漁船設備，買家在下單前需要清楚了解結構細節與散熱設計，靜態照片很難呈現這些立體資訊。我們把原廠 CAD／STEP 模型透過 OpenCascade 讀取，經 @gltf-transform 最佳化並套用 Draco 幾何壓縮轉為 glTF，讓買家能直接在瀏覽器裡旋轉、縮放、切換線框模式檢視每個結構細節，同時控制模型體積不拖慢網頁載入速度。
本專案於 2026 年完成，涵蓋 CAD → glTF 轉檔管線、互動式 3D 檢視器、分色分功率產品目錄、獨家技術展示區與中英雙語 SSR。這類需要客製 3D 資產處理流程的官網，開發時程一般落在 8–12 週，其中 3D 模型轉檔與最佳化通常是耗時最長的環節，實際天數依原廠 CAD 檔案數量與模型複雜度而定。
外銷型製造商的官網核心受眾是海外採購商，因此我們採用 Astro 伺服器端渲染搭配 i18n，確保中英文內容都完整輸出成 HTML 而非前端動態切換，讓 Google 等搜尋引擎能正確索引雙語頁面，提升在海外市場的搜尋能見度。搭配 GraphQL 串接 Filament 後台，業主新增新品或實績案例時，中英文內容都能同步維護，不需要工程師介入。
