17 個免費 3D 素材網站推薦：圖示、模型、Mockup

專案上線前兩天，首頁那個 hero 區塊還是空空的，客戶傳訊息過來說「可不可以多一點立體感、一點科技感」，你打開 Blender 才發現自己建模的速度根本跟不上 deadline。這時候你需要的，是一座已經有人把地基打好的現成素材庫。自己從零雕一個模型，在 deadline 面前幾乎是奢侈。問題是，3D 素材資源網站多到讓人眼花，哪些真的能用、哪些只是看起來漂亮，沒有人帶你走一遍，你會把一整個下午耗在試錯上。

這篇整理 17 個免費或提供免費方案的 3D 素材資源網站，分成 3D 圖示、3D 模型、3D Mockup 與工具 三大類，並附上授權與格式的注意事項。若要快速開始，可以先看 3dicons、Sketchfab 與 Spline；實際可用功能、下載格式與授權仍以各平台當下頁面為準。如果你想知道的是整體設計走向，我也會在後面把 3D 素材和近年的 網頁設計趨勢 串起來談。

為什麼 3D 素材突然變成網頁設計的顯學

把時間拉回五年前，網頁上的 3D 元素多半是廣告主丟一支產品旋轉影片進來，又重又卡，手機開起來像在放幻燈片。這兩年情況完全反轉。Apple 在官網大量使用可即時渲染的 3D 產品模型，你可以用手指拖著 iPhone 轉到任何一個角度，流暢得像在操作實體；各家 SaaS 的 landing page 開始出現浮在漸層上的立體圖示，連 Bento Grid 排版（你可以參考我們寫的 Bento Grid 網頁排版設計）都習慣用 3D 小物件來填補資訊區塊的呼吸感。3D 從過去那種「炫技」的標籤，慢慢沉澱成一種日常的「介面語彙」，就跟五年前扁平化 icon 變成標配是同一條路徑。

背後有三個很實際的原因。瀏覽器對 WebGL 的支援已相當成熟，WebGPU 也逐步普及，低面數模型不再需要額外外掛；設計工具如 Figma、Spline 則降低了 3D 元素的匯入門檻，自學 UIUX 的人不必先熟悉 Blender 或 Maya，也能製作基本效果。帶有深度與光影的元素也更容易吸引視線，但是否改善點擊、停留或捲動，仍要看內容、版位與效能，不能直接視為搜尋排名訊號。

3D 素材可以用於首頁主視覺、產品展示與互動動畫。要下載現成素材或自行建模，應依授權、品牌辨識、客製程度、工期與預算判斷：一般裝飾或概念展示通常可先採用現成素材，需要精準產品比例或獨特互動時則可能要自行建模。平面照片也能透過AI 深度動畫工具製作視差式立體動態，但不能取代可任意旋轉與編輯的完整 3D 模型。

這也是為什麼這幾年 3D 素材資源網站會像雨後春筍一樣冒出來。需求被點亮之後，供給自然跟上。但數量一多，品質就參差，授權也開始複雜。這篇的整理，就是幫你把那十七個真正值得放進書籤的挑出來，並且標清楚每一個的用法與地雷。

下載之前，先搞懂 3D 素材的三個地雷

很多人找到資源網站就興奮地狂下，結果上線那天才發現三種死法。我把這三個地雷講在前面，因為它們跟你要在哪個專案用、要不要商用、網站速度能不能扛息息相關。

地雷一：授權不是「免費下載」四個字那麼簡單

3D 素材的免費分成好幾種層次，每一種對你能不能拿去商用、能不能修改、要不要署名，都有不同規定。CC0 是在法律允許範圍內將作品投入公眾領域，通常不要求署名；CC BY 4.0 允許使用、商用與修改，但必須依授權條款標示作者與出處；編輯用途（Editorial Use Only） 的使用範圍則受限，不可直接當成一般商業素材；還有一種是 Personal / Commercial 授權分流，個人作品集可免費使用，客戶專案可能需要另購授權。下載前花十秒看授權頁與平台附加條款，比事後處理下架通知或侵權爭議省事。

地雷二：檔案格式決定你能不能用

網頁即時 3D 常用 glTF 或 GLB。glTF 是 Khronos Group 制定的標準格式，可承載 PBR 材質，也受到主流網頁 3D 函式庫支援；做平面 Mockup 可以選 PNG 透明背景的預渲染圖，或可縮放的 SVG；要進 Blender 或 Cinema 4D 二次編輯，則常見 .blend、.fbx、.obj 等原始檔。高精度的 .max 或 .c4d 檔案可能很大，也未必適合直接放上網頁。挑資源時，先確認是否提供你的工具能開啟、且符合上線效能需求的格式。

地雷三：風格一致性比數量重要

這是最多人略過的一點。3dicons 的圓潤可愛、Sketchfab 上某個寫實戰車模型、TurboSquid 的金屬科技風，三種擺在同一個首頁會變成視覺大亂鬥。真正的關鍵在光源與材質的一致性。每個素材各自帶著不同的光源方向、不同的材質反射率、不同的色溫，混在一起時，大腦會直覺判讀成「拼湊」，感覺不出「設計」該有的整體感。

我自己習慣一個專案只認一組 3D 素材來源，把它的色票、光源方向、材質風格鎖死，再往下延伸。需要補其他來源時，也會先在 Blender 或 Spline 裡統一打光、統一調色，讓它們看起來像同一套。配色工具 與 網站色彩計畫 的邏輯在這裡完全適用：一致性才是質感，數量只是雜訊。一個只用三個 3D 元素、但風格統一的網站，會遠勝過塞了二十個、卻各自為政的網站。

圖示類：把資訊圖像立體化的四個起點

3D 圖示是進入門檻最低、投報率最高的一類。一個 24px 的扁平 icon 換成同尺寸的 3D 版本，視覺份量立刻翻倍，而且檔案通常只有幾十 KB。這四個是我重複回去抓的來源。

1. 3dicons（3dicons.co）

我自己最常推薦的起點。設計師 Vijay Verma 製作的開源 3D 圖示集，採 CC0 授權，可商用、可修改，不需署名。圖示風格是圓潤的黏土感、帶柔和陰影，顏色飽和但不刺眼，特別適合 SaaS 與教育類網站。提供 PNG 透明背景與 SVG 兩種格式，直接丟進 Figma 就能用，不用再進 3D 軟體。如果你有在做 Figma 圖示外掛 的工作流，這幾乎是必載的素材包。

2. Iconscout 的 3D 圖示庫

Iconscout 是一個大型設計資源市集，它的 3D 圖示區塊是 freemium 模式：有一大批標示為免費的圖示可以直接下載，付費方案則解鎖更多風格與編輯功能。它的強項是風格多樣，從黏土、玻璃、金屬到擬真都有，而且整合了 Figma、Adobe XD、Sketch 的外掛，能在設計軟體裡直接搜尋插入。付費牆要留意，免費區會清楚標示，別誤把 Pro 圖示當免費用。

3. Iconfinder 的 3D 區塊

Iconfinder 經營很久的圖示搜尋引擎，近年也收進不少 3D 圖示集。它的優勢是搜尋與篩選做得很細，你可以直接用「3D」當風格篩選條件，再套上顏色、授權類型、商用許可過濾，很快縮到你要的那一張。授權分 Free 與 Premium，Free 也有標示是否允許商用，這點對接案設計師很友善。適合你已經有明確主題、不想一頁一頁翻的時候。

4. LottieFiles 的 3D 動畫素材

LottieFiles 主打 Lottie 動畫，也能找到帶有 3D 視覺感的動畫素材。這類素材通常是把立體效果做成可播放的動畫，而不是在瀏覽器內即時操作完整 3D 模型，因此可作為 WebGL 場景以外的選項。商用前要檢查個別素材授權，也要實測檔案大小；Lottie JSON 常以向量圖形為主，但也可能引用點陣資產，不能一概視為無限放大都不失真。

模型類：從單一物件到完整場景的七個寶庫

當圖示滿足不了你，需要一個具體的產品、角色、建築或抽象幾何場景時，就進到模型類。這裡的坑比圖示多，主要差在檔案體積與精度：同一個花瓶，低面數版本可能 50KB，電影級精度版本可能 50MB，兩者擺在網頁上的命運完全不同，前者讀者幾乎無感，後者可能讓整頁停擺三秒。挑的時候要記得回頭看前面講的格式地雷，並且心中先有一把尺：這個模型預計出現在哪裡、會被放大到什麼程度、讀者用什麼裝置看。心裡有這三個問題，你就不會被「看起來很精緻」的高精度模型牽著走，抓回真正適合網頁的中低面數版本。

5. Sketchfab

3D 模型界的 YouTube。Sketchfab 真正的價值在於那個規模龐大的 CC 授權免費下載區，賣模型反而像附帶的服務。它最體貼的一點，是每個模型都能在瀏覽器裡直接 360 度預覽、檢查拓樸與材質，不用下載才知道長怎樣。它的篩選器可以直接勾「Downloadable」加「CC BY」「CC0」，把可商用、可下載的模型一次拉出來。對網頁設計師來說，這是查 reference、抓低面數物件、找可即時渲染素材的第一站。它也是少數原生支援 glTF/GLB 匯出的平台。

6. Free3D

名字直白，就是衝著「免費 3D 模型」這個搜尋意圖來的。Free3D 的免費區集中在交通工具、傢俱、武器、日常物件這類相對好建模的品項，精度落差大，需要自己一個一個挑、看預覽圖判斷拓樸乾不乾淨。它的付費區其實也不貴，急用時花個幾十塊美金買一個現成模型，比你自己建三天划算，也比你反覆在免費區大海撈針划算。下載前確認授權，免費檔多數允許商用但禁止轉售，附帶的紋理貼圖有時要分開下載，記得檢查壓縮包內容是否齊全，別到建模途中才發現缺了材質檔。

7. CGTrader 的免費區

CGTrader 是大型 3D 市集，有明確的 Free 3D Models 分類。它的特色是品質把關比 Free3D 嚴，模型通常帶比較完整的材質與 UV，分類也細，動漫角色、建築、低面數遊戲資源分得清楚，不會全部混在一頁。適合用在需要中等精度、又要進一步修改的場景。授權依個別上傳者而異，商用前一定看清楚條款，尤其留意是否有「不可用於 NFT 或區塊鏈專案」這類近兩年才出現的新限制。

8. TurboSquid 的免費區

TurboSquid 是老牌專業 3D 市集，整體走高精度、電影與廣告級的路線，單價較高，但它有一個免費區塊，會不定期釋出樣品模型。免費模型數量不多，不過品質普遍不錯，當你需要一個「撐得起特寫鏡頭」的關鍵物件、其他免費來源都達不到那個精細度時值得一翻。注意它的免費模型很多是 Editorial 或限制商用，用在客戶專案前務必確認授權，別因為它掛在「Free」分類下就假設可以隨意商用。

9. Poly Pizza

一個我私心很喜歡的小專案。Poly Pizza 是一個低面數（low-poly）3D 模型搜尋引擎，整合了上千個開源模型，全部採 CC 授權，介面乾淨、搜尋快、下載即用。低面數模型天生適合網頁與遊戲，檔案小、渲染快、風格統一，做插畫式場景或 isometric 網站非常合適。如果你做的是活潑、插畫感重的品牌網站，這裡比寫實市集對味得多。

10. Mixamo

Adobe 旗下的免費 3D 角色與動畫服務。Mixamo 的核心價值是它給你完整的角色骨架與預錄動畫，你上傳一個人形模型、套上跑步或揮手的動畫、直接匯出 FBX，完全免費。對做遊戲、互動網站、角色驅動 landing page 的人來說是神器。它的角色庫本身也能直接下載，授權允許商用，但要綁定 Adobe 帳號。缺點是它已經很久沒更新，骨架類型有限。

11. Thangs

相對新的 3D 模型搜尋引擎，強項是幾何搜尋，你丟一個模型上去，它幫你找長得像的其他模型。Thangs 整合了非常多來源，雖然它的主力客群偏向 3D 列印，但設計與遊戲用的低面數模型也很多。對「我想找跟這個類似、但要可商用」的需求，它是目前最順手的工具。授權一樣逐模型檢查，因為來源混雜。

Mockup 與工具類：讓 3D 素材真正落地到畫面的六個幫手

找到模型不等於做好版面。真正讓 3D 素材發揮價值的，是把它放進一個能排版、能互動、能匯出成網頁可用資源的環境。這六個是從素材到成品之間的橋樑。

12. Spline（spline.design）

Spline 是目前把 3D 帶進網頁流程最順的工具。你在瀏覽器裡組場景、調光、加互動事件（hover 旋轉、捲動觸發動畫），然後直接匯出成可嵌入網站的程式碼片段，前後端都不用碰。它的 Community 區有大量免費、可 remix 的 3D 場景與素材，很多設計師會把自己的練習作品開源出來，是很好的起點與靈感來源。對不會寫 WebGL 的人來說，Spline 等於把 3D 互動的門檻整個拆掉，你只要會拖曳、會調參數，就能做出一年前還要寫幾百行程式才做得到的效果。如果你想看互動設計的整體脈絡，可以搭配 UI/UX 設計指南 一起讀，把互動邏輯想清楚再進工具。想再進一步用自然語言把整個 3D 頁面生成出來，可以接著看vibe coding 做 3D 視覺網站的完整教學。

13. Vectary

Vectary 走的是瀏覽器內 3D 與 AR 設計，能用於建立場景、展示模型與製作 AR 預覽。客戶可透過支援的手機與連結查看模型在實際空間裡的比例，適合產品提案。和 Spline 相比，Vectary 偏向建模與展示，Spline 偏向互動與網頁整合；免費方案的匯出格式、專案數與 AR 功能可能調整，使用前要核對現行方案。

14. Smartmockups

Smartmockups 提供裝置 Mockup，可把手機、筆電、平板的螢幕換成網頁設計稿，再依模板調整背景與外觀並匯出圖片或影片。它適合製作 作品集網站 或提案素材；若將輸出檔放上網頁，仍要壓縮圖片或影片，不能因為不是即時 3D 就忽略效能。可用模板、輸出格式與免費額度以現行方案為準。

15. Animockup

Animockup 用來製作會動的裝置 Mockup，可將截圖放入裝置動畫，再輸出成支援的影片或動圖格式。動態素材比較容易吸引視線，但是否提高點閱或停留仍要透過實際測試判斷，也要留意自動播放、檔案大小與無障礙設定。免費方案的浮水印、解析度與輸出限制可能變動，使用前應查看現行條款。

16. Yellow Images 的免費 3D Mockup

Yellow Images 是商業 Mockup 大站，主打高品質付費素材，但它在網站上維護一個 Free Mockups 區塊，定期更新幾款免費的 3D Mockup，品質通常比純免費站高一階。適合用在需要「雜誌級」精緻度的提案場合。下載要註冊帳號，授權條款要逐款確認，免費區通常允許個人或商業專案使用但禁止再散佈。

17. Dimensions.com

這個比較特別，它本身不提供 3D 檔，提供的東西卻更基礎：真實物件的尺寸資料庫，從一張信用卡、一支 iPhone、一輛單車到一台鋼琴，都標註了精確的長寬高。為什麼列進來？因為 3D Mockup 要做得有說服力，比例正確是基本功。一張信用卡畫得比手機還大，再精緻的渲染都救不回來。Dimensions.com 是我在做產品場景時一定會開在旁邊的分頁，免費查閱，是讓你的 3D 畫面「看起來合理」的隱形地基。

一張表看懂 17 個 3D 資源

這張表把 17 個資源的類型、主要格式、免費範圍與適合場景整在一起，方便你對照挑選。我把「適合場景」這欄寫得具體一點，因為選資源的重點在於對接場景，最強的不一定最對。

資源	類型	主要格式	免費範圍	適合場景
3dicons	3D 圖示	PNG、SVG	全免費 CC0（免署名）	SaaS、教育網站的 icon 系統
Iconscout	3D 圖示	PNG、SVG、Lottie	Freemium，免費區標示清楚	需要多種風格切換的品牌
Iconfinder	3D 圖示	PNG、SVG	Free 與 Premium 並存	已有明確主題、靠搜尋縮範圍
LottieFiles	3D 動畫	Lottie JSON、GIF	免費區夠做載入與空狀態	會動但不想扛 WebGL 的 hero
Sketchfab	3D 模型	glTF、GLB、OBJ、FBX	CC 授權免費下載區龐大	查 reference、抓低面數物件
Free3D	3D 模型	OBJ、FBX、3DS	免費區集中日常物件	急用、預算極低的專案
CGTrader	3D 模型	FBX、OBJ、BLEND	明確 Free 分類	需中精度、要二次修改
TurboSquid	3D 模型	MAX、FBX、OBJ	少量免費樣品	要撐特寫的關鍵單品
Poly Pizza	低面數模型	glTF、GLB	全開源 CC 授權	插畫感、isometric 場景
Mixamo	3D 角色動畫	FBX	完全免費、需 Adobe 帳號	角色驅動的互動網站
Thangs	模型搜尋引擎	視來源而定	整合多來源、逐模型授權	用幾何相似度找替代品
Spline	3D 設計工具	互動網頁嵌入、影片	免費方案加 Community 區	把 3D 互動帶進網頁
Vectary	3D 與 AR 工具	glTF、AR 連結	免費方案可建專案	產品 AR 預覽與提案
Smartmockups	3D 裝置 Mockup	PNG、MP4	免費方案涵蓋主流裝置	裝置外觀提案、作品集
Animockup	動態 3D Mockup	MP4、GIF	免費有浮水印或限制	hero 區塊的動態裝置展示
Yellow Images	3D Mockup	PSD、PNG	Free Mockups 定期更新	需要雜誌級精緻度的提案
Dimensions.com	尺寸參考	網頁查閱	完全免費	校準 3D 場景的真實比例

依照專案類型挑素材：三種情境的組合包

表列了 17 個資源，但你大概不會每個專案都全部翻一遍。我把最常遇到的三種專案情境，各自配一組「主力加配角」的素材包，你照著抓就能上工。

情境一：SaaS 或工具型網站

這類網站要的是俐落、可信任、不搶內容鋒頭。主力我會放 3dicons 當 icon 系統，它的圓潤黏土感剛好中和科技產品容易出現的冷硬；hero 區塊用 Spline 排一個能 hover 旋轉的抽象幾何場景，檔案壓在 500KB 以內。配角是 LottieFiles 的 3D Lottie，放在空狀態與載入動畫，用動態安撫使用者等待時的焦慮。整個組合的關鍵是「克制」：寧可少用幾個 3D 元素，也不要每個區塊都塞一顆立體球。

情境二：電商或品牌官網

電商要的是把產品本身的立體感做出來，3D 素材在這裡是襯託的角色，用來強化實拍圖，而非搶走主角位置。主力放 Smartmockups 或 Animockup，把產品照放進 3D 裝置或場景裡，快速產出 hero 視覺；要更精緻的話補 Yellow Images 的免費 3D Mockup。配角是 Sketchfab 抓一個低面數的環境物件（桌面、盆栽、燈具）當背景點綴，再用 Dimensions.com 校準產品與環境的比例。記得商用授權逐一確認，電商出事通常就出在這裡。

情境三：作品集或個人品牌

作品集是少數可以放膽用 3D 玩風格的場域，因為目標讀者就是來看你的設計能力。Poly Pizza 的低面數模型最適合做插畫感的 isometric 場景；Spline 與 Vectary 拿來做互動 hero，讓進站的人第一眼就想動手玩；想加入角色動態的話，Mixamo 提供免費的角色與動畫，能讓作品集多一層「會呼吸」的感覺。這個情境的底線是風格統一，挑一個視覺調性鎖死，比同時用十種風格更能讓人記住你。把作品集當品牌來經營的人，這一步等同於在做自己的視覺識別。

把免費素材用得像付費的：我的四個工作流習慣

免費素材最大的陷阱，往往出在紀律散漫，而非品質本身。你抓了五十個模型，存在十個資料夾，三個月後要回頭找某一個，才發現根本不知道它的授權寫在哪。這四個習慣是我吃過虧之後固定下來的做法，給你參考。

習慣一：下載那一刻就記錄授權

每抓一個素材，我會在同個資料夾放一個純文字檔，記下來源網址、作者、授權類型、下載日期。聽起來龜毛，但這份清單在客戶問「這個能不能商用」的時候，就是你不用半夜爬起來找網頁的護身符。如果你常處理大量設計資產，用 Eagle 素材管理工具 這類工具把授權寫進標籤，會比純文字更有效率。真正關鍵的是「下載當下就記」這個動作，工具只是輔助，事後補永遠補不全。

習慣二：鎖定一個主視覺來源，其他當配角

一個專案我只讓一個 3D 素材來源當主角，負責 icon 系統或 hero 物件的主調性，其他來源只用來補特定缺口（例如主角風格裡缺一個支付 icon，才去別處找）。這樣整個網站的 3D 語彙會是統一的，不會出現「每個區塊都漂亮、擺在一起卻像拼裝車」的窘境。這個原則和 品牌色彩挑選 的精神一樣：先立主調，再談變化。

習慣三：網頁用的素材一律過一道壓縮

從模型網站抓下來的 glTF 常常帶了過大的貼圖，PNG 預渲染圖常常是 4K。上線前我一定過一道壓縮，貼圖降解析度、網格減面、圖片轉 WebP 或 AVIF。一個 8MB 的 hero 模型壓完可能只剩 800KB，視覺幾乎無損，但載入時間差了十倍。這一步是把你「看起來很厲害」的設計變成「真的能用」的設計的關鍵。

習慣四：為互動預留退路

WebGL 與 WebGPU 不是每台裝置都跑得動，尤其舊手機與低階 Android。我做 3D 互動區塊時，一定準備一個靜態圖片或影片的 fallback，偵測到裝置不支援或使用者開啟減少動態偏好時，自動切換成靜態版本。這不只是體貼，而是確保你的設計在所有裝置上都「至少能看見」。

3D 素材會拖垮網站速度嗎？效能與 SEO 的取捨

這是我最想講、也最常被一般「3D 素材推薦文」跳過的一段。因為 3D 素材本質上是多媒體資源，它對網站效能的影響，會直接回頭咬你辛苦做的 SEO。

先看一個事實：全球網頁流量裡，行動裝置的佔比長期維持在五成以上，而且這個比例在 2015 年到 2026 年之間持續上升（依 Statista 的行動流量統計，2026 年 4 月）。行動裝置的 CPU、GPU、記憶體都遠不如桌機，一個在你看來順到不行的 3D 場景，在中階手機上可能掉到每秒十幾 frame，甚至直接把瀏覽器凍住。

再看 Google 那一端。Core Web Vitals 是頁面體驗的一部分，也是眾多排名訊號中的一小部分，不是單獨決定名次的門檻（見 Google Search Central 於 2020 年 11 月的 頁面體驗排名時程公告）。3D 素材若延後主要內容顯示、佔用主執行緒或造成版面位移，可能拖累 LCP、INP 或 CLS；即使先不談搜尋排名，也會直接影響行動裝置上的閱讀與操作。

所以問題不是「要不要用 3D 素材」，而是「怎麼用才不會反噬」。我自己的底線有三條：

• 首屏只放輕量素材。Hero 區塊的 3D 物件應依實際網路與裝置測試設定體積預算；500KB 可當作嚴格起點，而不是所有網站通用的合格線。必要時改用預渲染圖片或較輕的動畫取代即時渲染。
• 互動場景延遲載入。非首屏的 3D 互動區塊，等到使用者捲動靠近再載入，不要一進站就把全部資源拉下來。
• 圖片要過圖片 SEO 流程。即便是 3D 預渲染出來的 PNG，也要按照 圖片 SEO 優化 的流程處理檔名、壓縮與符合用途的 alt 文字；只有內容本身符合支援的結構化資料類型時，才需要加入對應標記。

換句話說，3D 素材的效能管理就是一道取捨題：你要的是那個立體感的注意力紅利，就必須用工程手段把它的效能成本壓到可接受。把這道取捨想清楚，你才不會做出「設計師自己很滿意、使用者和 Google 都很痛苦」的網站。

進階搭配：3D 素材與其他設計元素的組合拳

單獨看 3D 素材，它的價值是立體感；但把它放進整體設計語彙裡，它真正的作用是建立視覺層級。這裡給你三個我自己常用的搭配手法，讓 3D 元素不會只是孤零零地浮在畫面上。

搭配一：3D 物件加漸層背景。這是 SaaS landing page 最常見、也最安全的組合。一個低面數的 3D 物件放在柔和的漸層色塊上，光源方向與漸層走向一致，立刻有「漂浮在空氣裡」的高級感。背景色怎麼挑，可以回到 色彩心理學 與 配色理論 的邏輯，讓 3D 物件的色溫跟整體品牌一致。

搭配二：3D 圖示配排版留白。3D 圖示本身已經有分量，周圍一定要留夠呼吸空間，否則會變得很擠。把它和 排版設計技巧 一起規劃：圖示尺寸、字級、行距三者要有一致的節奏，3D 元素才會成為視覺重點，不會淪為畫面上的雜訊。這也是為什麼 網頁排版範例 裡常見的格狀結構跟 3D 圖示特別搭，每個格子天生給每個 3D 元素一個專屬的舞台。

搭配三：3D Mockup 配真實內容。Smartmockups 這類工具最怕的是「裝置很漂亮、螢幕裡是空白」。Mockup 的說服力來自它裝載的內容，所以一定要放真實的設計稿、真實的文案，別用 lorem ipsum 填空。一個裝著真實 dashboard 截圖的 3D 裝置 Mockup，比十個空殼 mockup 更能讓客戶點頭。這個道理跟 網頁設計必備元素 談的「內容先行」完全一致：視覺是容器，內容才是主角。

這三個搭配背後的共同原則是：3D 素材是設計系統裡的一個元件，不是裝飾品。把它當元件來對待，它會撐起你的視覺層級；把它當裝飾品來對待，它只會增加你網站的體積和雜訊。

挑素材常見的五個疑問

整理資源的過程裡，我被問最多的其實是這幾個問題，一次回答清楚，幫你省下摸索的時間。

一、免費的 3D 素材真的能商用嗎？可以，但前提是授權允許。CC0 與 CC BY 4.0 都允許商用，CC BY 只要標示作者就合法。真正要小心的是標示「僅限個人使用」或「Editorial Use Only」的素材，這類放上客戶網站就有侵權風險。養成下載當下看一眼授權頁的習慣，比你事後處理侵權通知省事百倍。

二、3D 圖示會比傳統扁平 icon 慢很多嗎？不一定。如果是 PNG 或 SVG 格式的 3D 圖示，檔案大小跟一般圖片差不多，經過壓縮幾乎感受不到差異。真正會拖慢速度的是即時渲染的 WebGL 場景，那才是要嚴格管控的部分。所以「3D 等於慢」是個迷思，關鍵在於你用的是預渲染圖片還是即時模型。

三、不會 Blender 能用這些素材嗎？能。這也是這份清單把 Spline、Vectary、Smartmockups 列進來的原因。它們都是瀏覽器內工具，匯入素材、調整、匯出，全程不用碰專業 3D 軟體。不會建模、不會綁骨架，照樣能把 3D 素材放進網站。

四、3D 素材跟 AI 生成的 3D 圖比起來，優勢在哪？在於可控性。AI 生成的 3D 圖每次結果都不一樣，授權也常常處於灰色地帶；素材網站的模型是固定檔案，能重複使用、能精確修改、授權白紙黑字。對需要長期維護、需要一致性的品牌專案來說，可控性遠比驚喜感重要。

五、一個專案該用幾個 3D 元素才適當？我通常的答案是「少到你覺得不夠，再多一個就太多」。3D 元素是視覺重點，重點一旦變多就不再是重點。一個 hero 物件加一組 3D icon 系統，對大多數網站來說已經足夠撐起立體感，剩下的留給內容與排版去表現。

行動清單：今天就能開始的三步

看了十七個資源，最怕的就是收藏了然後就沒有然後。給你三個今天就能做完的動作。

1. 建立一個專屬的 3D 素材資料夾。不要散在 Downloads。開一個資料夾，裡面分 icon、model、mockup 三層，再放一個授權清單文字檔，把每一個素材的來源網址、作者、授權類型、下載日期記下來。這一步只要十分鐘，但會決定你後續抓素材的紀律，也會在客戶突然問起授權時救你一命。
2. 從 3dicons 抓一組 icon 回來試做。挑一個你手上的真實專案，把首頁那排扁平 icon 換成 3dicons 的版本，跑一次 設計趨勢 裡談的視覺層級檢查，看看立體感有沒有把重點區塊撐起來、有沒有讓資訊更易讀。這是驗證「3D 對你的品牌到底對不對味」最低成本的方式，做壞了也只是一組 icon 的事。
3. 挑一個模型，走完從下載到上線的完整流程。去 Sketchfab 抓一個 CC 授權的低面數模型，進 Spline 排成場景，匯出嵌入一個測試頁，用你自己的手機開看看順不順、載入要多久。走過一次完整流程，你就會知道效能與授權的坑實際長在哪裡，之後每個專案都會踩得比別人穩。

3D 素材不會讓一個爛設計變好，但它能讓一個好設計被看見的方式多出一個維度。工具都幫你備好了，剩下的就看你怎麼用它說故事。現在，挑一個資源，打開那個你卡了很久的首頁，把它動起來吧。