ThreeUI 是什麼？160+ 個免費 Three.js 3D 元件、安裝教學與 Pro 方案分析

網站想放一個會跟著滑鼠移動的 3D Hero（首頁最上方的主視覺區塊）、粒子背景或立體按鈕，難的通常不是想像畫面，而是把效果做成能維護的程式碼。

ThreeUI 把這段工作縮短了。它是一套可直接瀏覽、預覽與修改的 Three.js 元件庫，Community 版本已在 GitHub 開源。使用者可以把元件原始碼或實作提示交給 Codex、Claude Code 等 Coding Agent，再請 Agent 修改顏色、燈光、動畫與版面。

先說我的結論：大多數人先用免費 Community 版就夠了。 ThreeUI 真正省下的是 3D 視覺的起始製作時間，但它還不是「完全不用懂前端，一句 Prompt 就能交付網站」的服務。等你確定需要 Pro 元件、MCP 或更方便的原始碼交付，再付費比較合理。

ThreeUI 是什麼？

ThreeUI 是 Meng To 推出的 3D 網頁元件庫，內容包含網站首頁、Hero 區塊、互動背景、按鈕、圖示、文字動畫與其他視覺效果。底層大量使用 Three.js，也混合一般 CSS、Canvas 與 Shader。Canvas 是網頁裡的繪圖區域，Shader 則是控制畫面顏色、材質與特效的小型圖形程式。

Three.js 是一套在瀏覽器裡製作 3D 圖形的 JavaScript 函式庫。它能處理場景、攝影機、光線、材質與動畫，但從空白專案開始做出完整效果，仍需要不少 3D 與前端經驗。ThreeUI 的角色，就是先把常見效果做成可以預覽、複製與修改的成品。

這跟下載一張 3D 圖片不同。圖片只能換尺寸或再修圖，ThreeUI 提供的是程式碼，因此按鈕仍可點擊、背景仍會動，視覺也能依品牌色、裝置大小與互動方式繼續調整。

「160+ 個免費元件」到底怎麼算？

Threads 貼文使用「160+ 個免費元件」來介紹 ThreeUI。官方 GitHub README 提供了更完整的口徑：Community 版有 50 個主元件、111 條元件路徑、141 個免費變體，加上 23 個沒有變體的單一元件，合計為 164 個瀏覽結果。

換句話說，164 是網站上可瀏覽的效果與變體總數，不是 164 個完全獨立的主元件。 這不影響它的可用性，但選工具時應該看實際能用的類型，不要只看行銷數字。

ThreeUI 的公開目錄會持續同步，數量也可能改變。比較務實的做法，是直接進入 ThreeUI Browse，用分類與搜尋確認有沒有符合專案的效果。

目前比較實用的內容可分成幾類：

我會把 ThreeUI 定位成「高完成度的 3D 起始素材」，而不是整套網站建置平台。它最適合解決「效果從零開始太慢」的問題，無法替你決定頁面資訊架構、文案與轉換流程。

ThreeUI 跟一般 UI 元件庫有什麼不同？

一般 UI 元件庫主要處理按鈕、表單、選單、表格與對話框，重點是穩定、可讀與一致。ThreeUI 更偏向品牌呈現與互動視覺，兩者通常不是替代關係。

例如產品後台仍可使用 Tailwind CSS、shadcn/ui 或既有的介面設計系統（Design System），只有首頁 Hero 加入 ThreeUI 的互動背景。這樣比較容易控制維護成本，也不會讓每個頁面都載入不必要的 3D 資源。

ThreeUI 另一個特色是對 Coding Agent 友善。你可以讓 Agent 讀取元件原始碼，再依明確規格修改。這比只丟一張參考圖更可靠，因為 Agent 能看到場景結構、參數與資產路徑，不必從畫面反推全部程式。

但 Agent 仍可能改壞動畫、遺漏資產，或在手機版造成效能問題。把 Prompt 寫得更長不能取代驗收，完成後仍要在真實瀏覽器測試。

ThreeUI 免費版有哪些內容？可以商用嗎？

Community 版不需要登入，可直接瀏覽公開目錄，也能從 GitHub 取得完整公開原始碼。官方另提供 React 套件 @designcodeio/threeui，方便加入現有專案。

授權方面，官方 ASSET-LICENSES.md 與 README 說明，ThreeUI 自製的 Community 程式碼、圖片、材質與場景資產採 MIT License，可修改與商業使用，但要保留授權聲明。內附開源字型採 SIL Open Font License，Three.js runtime 則維持 MIT License。

要特別分清楚：ThreeUI 官網遠端載入的縮圖與預覽影片沒有一起納入 GitHub 的 MIT 授權。你可以用它們挑元件，不代表可以直接下載當成自己網站的宣傳素材。

ThreeUI 安裝教學：先選對使用方式

ThreeUI 不只一種用法。若你只是要做最小可行版本（MVP），我建議依下面順序開始。

方法一：先在官網挑元件，再交給 Coding Agent 整合

先到 ThreeUI Browse 找到接近需求的效果，確認桌面與手機預覽，再把元件名稱、程式碼與修改條件交給 Coding Agent。

可以使用這段 Prompt：

請把 ThreeUI 的 ThreeUIIntro 元件加入現有 React 專案，放在首頁 Hero 背景。

需求：
1. 保留目前 H1、說明文字與 CTA，不要讓 3D 場景蓋住內容。
2. 主色改為 #6C5CE7，背景維持深色。
3. 手機寬度低於 768 px 時降低粒子數與動畫速度。
4. 尊重 prefers-reduced-motion；使用者關閉動畫時顯示靜態狀態。
5. 不要覆寫既有檔案，先列出預計修改的檔案與資產。
6. 完成後執行 build，回報 bundle 變化與仍需人工檢查的項目。

這種寫法比「幫我做得更有科技感」有效，因為它把內容層級、品牌色、手機效能、動態偏好與檔案安全都寫進驗收條件。prefers-reduced-motion 是瀏覽器用來讀取使用者「減少動態效果」設定的方式。

方法二：用 npm 安裝 React 套件

如果專案本來就是 React，可以用 npm 安裝 ThreeUI。React 是建立網頁介面的 JavaScript 函式庫，npm 則是下載與管理 JavaScript 套件的工具。安裝時也要加入 ThreeUI 需要的 peer dependencies，也就是套件預期由你的專案自行安裝的相依工具。

npm install @designcodeio/threeui react react-dom three

接著匯入元件與共用樣式：

import { ThreeUIIntro } from "@designcodeio/threeui/components/ThreeUIIntro";
import "@designcodeio/threeui/style.css";

export function HeroBackground() {
  return <ThreeUIIntro />;
}

截至 2026 年 8 月 24 日，npm 上的 @designcodeio/threeui 最新版本為 1.0.0。我做了套件安裝與匯入測試，ThreeUIIntro 可以從元件子路徑載入。

不過官方 README 當時使用 AtTheHorizon 當範例，npm 1.0.0 並沒有輸出這個名稱。若遇到 ERR_MODULE_NOT_FOUND，不要一直重裝套件，先回到元件頁確認最新 import 名稱，或檢查套件實際輸出的元件。

有些完整頁面元件還需要額外資產。官方文件說明，這類元件可能預期檔案放在固定的根目錄路徑；整合時要把 lib-dist/assets/ 需要的內容複製到專案公開目錄，或使用元件提供的 sourceUrl、assetBaseUrl 參數調整路徑。

方法三：把 Community 專案完整跑在本機

如果你想研究所有公開元件、修改元件庫本身，直接複製 GitHub 專案較合適：

git clone https://github.com/MengTo/threeui.git
cd threeui
npm install
npm run dev

要確認型別、公開邊界與正式環境建置，可再執行：

npm run build

這條路最適合開發者與設計工程師。只想在網站加一個 Hero 的人，沒有必要先維護整份元件庫。

ThreeUI Free 與 Pro 差在哪？

截至 2026 年 8 月 24 日，ThreeUI Pro 提供年繳與終身方案。官網顯示年繳優惠價為每年 US$99，原價 US$199；Lifetime 為一次付費 US$199，原價 US$399。這些是當日頁面價格，實際結帳仍以 ThreeUI Pricing 為準。

MCP（Model Context Protocol）是一種讓 AI 客戶端連接外部工具與資料的標準。ThreeUI Pro 的 MCP 能讓支援遠端 MCP 的 Coding Agent 搜尋元件、取得實作 Prompt、檔案清單與授權後的原始碼。

這項功能對常做網站的開發者比較有價值，因為不用一直在瀏覽器與編輯器之間複製資料。對只做一次活動頁的人，MCP 帶來的時間差未必足以支撐付費。

ThreeUI Pro 值得買嗎？

我的判斷是中性偏多，但只適合特定族群。

如果你是自由接案者、設計工程師或經常製作行銷網站，Pro 元件與 MCP 能減少找素材、搬程式碼與整理資產的時間。當免費目錄找不到合適效果，而且你已經確定某個 Pro 元件能直接用在付費專案，購買理由才夠具體。

如果你只是第一次接觸 Three.js，先買 Lifetime 反而容易把工具當成果。真正影響網站品質的，仍是標題是否清楚、CTA 是否可見、手機是否順暢，以及 3D 效果能否服務內容。免費版已足夠做出一個 Hero MVP，也足夠測試團隊能不能維護這種技術。

我的建議順序是：

1. 用 Community 元件完成一個實際頁面。
2. 在手機與較舊的筆電上測試效能。
3. 記錄整合與修改花了多少時間。
4. 只有在 Pro 元件或 MCP 能明確縮短下一個專案時再升級。

如果之後 Community 元件更新速度下降、Pro 授權限制增加，或 MCP 無法穩定提供與網站相同的內容，我會降低對付費版的評價。

上線前要檢查的 5 件事

1. 3D 不要蓋過真正要賣的內容

Hero 最重要的仍是讓讀者在幾秒內看懂產品、對象與下一步。3D 場景應該放在內容後方，不能擋住 H1、價格或 CTA，也不要用過度移動的物件搶走視線。

2. 實測手機與較弱的裝置

開發者電腦跑得順，不代表一般手機也一樣。至少檢查首次載入時間、滑動是否掉幀、頁面切到背景後是否停止動畫，以及長時間瀏覽是否明顯耗電或發熱。

3. 為減少動態偏好提供替代狀態

使用者若開啟 prefers-reduced-motion，頁面應降低或停止非必要動畫。最簡單的做法，是保留靜態構圖與主要內容，不要讓關閉動畫後只剩空白背景。

4. 檢查資產路徑與授權

確認字型、貼圖、影片與模型都能在正式網域載入，也要分清楚 GitHub 內已授權資產與官網遠端預覽素材。不要把可觀看誤認為可重新散布。

5. 看實際載入量，不看單一宣傳數字

Threads 貼文提到單一範本約 100–200 KB，但不同元件使用的程式、材質與外部資產差異很大。npm 1.0.0 的完整套件解壓後約 54.4 MB，這也不等於訪客每次會下載 54.4 MB。真正該看的，是正式頁面經過打包與分割後，使用者實際下載多少 JavaScript 與資產。

ThreeUI 常見問題

ThreeUI 是 Three.js 官方產品嗎？

不是。Three.js 是底層 3D JavaScript 函式庫，ThreeUI 是 Meng To 建立的第三方元件庫。兩者名稱相近，但維護團隊與產品定位不同。

不會寫程式也能使用 ThreeUI 嗎？

可以用 Coding Agent 協助整合，但仍需要有人處理 React 專案、資產路徑、瀏覽器錯誤與部署。若完全沒有前端基礎，較實際的做法是先用免費元件做 Demo，再請開發者檢查上線品質。

ThreeUI Community 可以商用嗎？

官方公開程式碼與 ThreeUI 自製 Community 資產採 MIT License，可在授權條件內商用。字型、Three.js runtime 與外部遠端素材各有自己的授權，不能只看專案根目錄的 LICENSE 就忽略資產來源。

ThreeUI 可以搭配 Codex 或 Claude Code 嗎？

可以。只要 Coding Agent 能讀寫你的專案，就能協助安裝套件、加入元件與修改樣式。Pro MCP 會再多一條直接搜尋與取得授權內容的管道，但免費版不必連 MCP 才能使用。

ThreeUI 會拖慢網站嗎？

不一定，結果取決於元件、資產、渲染方式與同頁場景數量。使用子路徑匯入、延後載入非首屏效果、降低手機版複雜度，通常比只比較元件原始碼大小更有意義。

結語：先用一個免費元件證明它真的有用

ThreeUI 最有價值的地方，是把原本需要從空白場景開始的 3D 效果，變成可以直接挑選與繼續修改的程式碼。這讓 Coding Agent 有更好的起點，也讓小型團隊更快做出高完成度 Demo。

但 3D 效果不會自動改善產品定位，也不會替網站帶來轉換。先選一個 Community Hero，放進真實頁面，測完內容層級、手機效能與維護成本。這個 MVP 通過後，Pro 才是一筆能計算價值的工具支出。

資料來源

• ThreeUI Community GitHub README
• ThreeUI Browse
• ThreeUI Installation
• ThreeUI MCP
• ThreeUI Pricing
• ThreeUI Community MIT License
• ThreeUI Asset Licenses
• ThreeUI npm package
• Three.js official website
• Leo Fong 的 Threads 貼文