---
title: "AI 做視覺選哪個套件？JavaScript 圖表、動畫、3D 與影片框架總盤點"
description: "依用途盤點 JavaScript 視覺框架：資料圖表（Chart.js、ECharts、Vega-Lite、D3）、2D 畫布（Konva、Fabric.js、p5.js）、高效能 2D（PixiJS）、3D（Three.js、Babylon.js）、著色器、動畫（GSAP、Anime.js、Motion、Lottie）、物理、聲音、地圖與流程圖，以及用程式碼做影片（Remotion、Motion Canvas、HyperFrames）。附五層瀏覽器 API 速查、在 Claude Artifact 使用的限制，以及 Remotion、ApexCharts、GSAP 的商用授權門檻。"
author: "莊哲昀（AJ）"
tag: "AI 工具實戰"
date: 2026-09-28
canonical: https://www.ahadigit.work/blog/javascript-visual-libraries-ai-code-video
source: "blocks"
---

# AI 做視覺選哪個套件？JavaScript 圖表、動畫、3D 與影片框架總盤點

請 AI 做一張互動圖表、一段片頭動畫或一個 3D 展示，它第一個要決定的就是「用哪個套件」。選對了，一次就做出來；選錯了，不是卡頓就是來回修不好。這篇依照「你想做什麼」分成十類，盤點目前可用的 JavaScript 視覺框架，並標出在 Claude 裡使用時要注意的地方。

本文的版本與授權皆以 2026 年 9 月 28 日 npm 上的最新版查證。表格只列「最適合做什麼」，不列完整功能；選型時先看用途，再看授權。

## 先記住一件事：所有畫面與聲音都落在五個瀏覽器 API 上

網頁上的圖、動畫和聲音，最後都會落到五個瀏覽器原生 API 之一。套件只是讓這些 API 更好寫。知道底層是哪一個，就能預判效能與限制：

| 原生 API | 特性 | 適合 |
| --- | --- | --- |
| DOM／CSS | 一般網頁元素，可選取、可點選、無障礙最好 | 文字、按鈕、介面動畫 |
| SVG | 向量圖形，每個形狀都是一個元素，放大不失真 | 圖表、圖示、數百個以內的物件 |
| Canvas 2D | 一張點陣畫布，畫上去就變成像素 | 插畫、數千個物件、逐像素效果 |
| WebGL／WebGPU | 交給 GPU 算，能處理數萬到數百萬個點 | 3D、大量粒子、著色器特效 |
| Web Audio | 瀏覽器內的音訊處理與合成 | 合成器、音效、節奏排程 |

經驗法則：**需要點選互動、物件不多，用 SVG；物件上千、要流暢，改 Canvas 或 WebGL。**AI 做出來的東西會卡，最常見的原因就是用 SVG 畫了幾千個點。

## 一、資料圖表

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Chart.js | 長條、折線、圓餅等常見商業圖表，設定簡單 | Canvas | MIT |
| Apache ECharts | 大量資料、儀表板、地理熱圖，內建互動豐富 | Canvas／SVG | Apache-2.0 |
| Vega-Lite | 用一份 JSON 規格描述圖表，AI 很容易產生正確規格 | Canvas／SVG | BSD-3 |
| Observable Plot | 探索性分析，幾行程式就出圖，由 D3 團隊開發 | SVG | ISC |
| Plotly.js | 科學與工程圖表、3D 曲面、縮放與滑鼠提示 | SVG／WebGL | MIT |
| D3.js | 完全客製的視覺化；比例尺、資料繫結、轉場的底層工具箱 | SVG（也可 Canvas） | ISC |
| ApexCharts | 外觀精緻的儀表板圖表 | SVG | 雙授權，見下方授權段 |

給 AI 的建議：**一般報表先指定 Chart.js 或 ECharts，要可重複產生的規格用 Vega-Lite，只有要做沒人做過的圖才用 D3。**D3 功能最強，但程式碼最長，AI 出錯的機會也最高。

## 二、2D 繪圖與可操作的畫布

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| 原生 Canvas 2D | 插畫、漸層、簡單動畫，不想多載一個套件時 | Canvas | 瀏覽器內建 |
| Konva | 可拖曳、縮放、選取的物件，適合做編輯器與白板 | Canvas | MIT |
| Fabric.js | 圖片編輯、貼圖、文字排版的物件模型，可匯出 JSON | Canvas | MIT |
| Paper.js | 向量路徑運算：布林運算、曲線平滑、路徑交點 | Canvas | MIT |
| Two.js | 同一套 API 可輸出 SVG、Canvas 或 WebGL | SVG／Canvas／WebGL | MIT |
| Rough.js | 手繪、素描風格的線條與圖形 | Canvas 或 SVG | MIT |
| p5.js | 生成藝術、創意程式、教學示範 | Canvas（也有 WebGL／WebGPU） | LGPL-2.1 |

## 三、大量物件的高效能 2D

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| PixiJS | 數萬個精靈圖（sprite）與粒子、2D 遊戲、濾鏡特效 | WebGL／WebGPU | MIT |

當 Canvas 2D 開始掉幀，PixiJS 通常是第一個換上的選項：寫法仍是 2D 的思維，底層改由 GPU 繪製。

## 四、3D

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Three.js | 最主流的網頁 3D 函式庫，範例與教學最多 | WebGL，另有 WebGPU 渲染器 | MIT |
| React Three Fiber | 在 React 專案裡用元件寫 Three.js | 同 Three.js | MIT |
| Babylon.js | 功能完整的 3D 引擎：物理、GUI、XR 一應俱全 | WebGL／WebGPU | Apache-2.0 |
| PlayCanvas | 偏遊戲與產品展示的引擎，也有線上編輯器 | WebGL／WebGPU | MIT（引擎） |
| A-Frame | 用 HTML 標籤寫 3D 與 VR 場景，門檻最低 | WebGL（基於 Three.js） | MIT |
| OGL | 極簡的 WebGL 函式庫，體積小 | WebGL | Unlicense |

AI 對 Three.js 最熟，範例量也最大；**除非有特定需求，3D 先指定 Three.js**。要做完整的互動遊戲或 XR 應用，再考慮 Babylon.js。

## 五、著色器與低階 GPU

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| GLSL | 直接寫給 GPU 的著色器語言：液態漸層、雜訊、全螢幕特效 | WebGL | 語言本身 |
| Three.js TSL | 用 JavaScript 寫著色器，可同時輸出 WebGL 與 WebGPU | WebGL／WebGPU | MIT |
| regl | 以函式風格包裝 WebGL，適合資料密集的繪圖 | WebGL | MIT |
| twgl.js | 減少 WebGL 樣板程式碼的輕量工具 | WebGL | MIT |

## 六、動畫

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| GSAP | 時間軸編排、緩動曲線、捲動觸發動畫，業界最常用 | DOM／CSS／SVG／任意物件 | 免費標準授權（有限制） |
| Anime.js | 輕量、錯開（stagger）序列動畫；v4 另有 Web Animations API 模組 | DOM／CSS／SVG | MIT |
| Motion | React 與原生 JS 的介面動畫、手勢、版面轉場 | DOM／Web Animations API | MIT |
| Lottie（lottie-web） | 播放設計師從 After Effects 匯出的向量動畫 | SVG／Canvas | MIT |
| Theatre.js | 用視覺化時間軸調整動畫與 3D 鏡頭 | 任意 JS 物件 | 核心 Apache-2.0，編輯器 AGPL-3.0 |
| Web Animations API | 瀏覽器原生動畫，不需套件 | DOM | 瀏覽器內建 |

## 七、物理模擬

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Matter.js | 2D 剛體：碰撞、重力、堆疊，上手最快 | 純運算（內建 Canvas 渲染器） | MIT |
| Planck.js | Box2D 的 JavaScript 版，2D 物理更精確 | 純運算 | MIT |
| Rapier | Rust 寫成、編譯成 WebAssembly，2D／3D 都有，效能高 | WebAssembly | Apache-2.0 |
| cannon-es | 搭配 Three.js 的 3D 物理 | 純運算 | MIT |

## 八、聲音

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Tone.js | 合成器、節奏排程、效果器，也能離線把音樂算成音檔 | Web Audio | MIT |
| Howler.js | 播放音效與背景音樂，處理各瀏覽器相容性 | Web Audio／HTML5 Audio | MIT |

## 九、地圖、流程圖、網路圖與數學式

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Leaflet | 輕量互動地圖 | DOM／SVG／Canvas | BSD-2 |
| MapLibre GL JS | 向量圖磚地圖、3D 地形、大量資料點 | WebGL | BSD-3 |
| Mermaid | 用文字寫流程圖、循序圖、甘特圖 | SVG | MIT |
| Cytoscape.js | 關係網路圖、組織圖、知識圖譜 | Canvas | MIT |
| KaTeX | 在網頁排版數學公式 | DOM | MIT |

## 十、用程式碼做影片

影片也可以完全用程式碼產生：畫面由瀏覽器算出、逐格擷取，再用 ffmpeg 合成。好處是精準、可重現，改一個參數就能重新輸出，適合資訊圖表動畫、課程教材與片頭片尾。

| 工具 | 最適合 | 底層 | 授權 |
| --- | --- | --- | --- |
| Remotion | 用 React 元件寫影片，生態完整 | React／瀏覽器渲染 | 有條件免費，見授權段 |
| Motion Canvas | 用 TypeScript 寫程式化動畫影片，附即時預覽編輯器 | Canvas | MIT |
| HyperFrames | HeyGen 開源，用 HTML 與 GSAP 等網頁技術合成影片 | HTML／瀏覽器渲染 | Apache-2.0 |

無論用哪一套，要能逐格輸出都有同一個前提：**畫面必須是時間的純函數**。同一個時間點每次算出同一張畫面，不能依賴即時時鐘，亂數要用固定種子；聲音則用離線渲染（Web Audio 的 OfflineAudioContext，或 Tone.js 的 Tone.Offline）直接算成音檔。

## 在 Claude 裡使用：Artifact 與 Claude Code 的差別

這些都是公開的 JavaScript 套件，不是 Claude 的內建功能；Claude 的工作是選套件、寫程式、看成品修正。實際能不能跑，取決於你在哪個環境。

**在 Claude 對話裡產生的 Artifact 網頁**，外部腳本只能從 cdnjs、jsDelivr、unpkg 等少數 CDN 載入，其他主機一律被擋；網頁也不能從外部網址載入圖片、音訊影片、外部樣式表、字型檔（Google Fonts 除外）或資料。實務上會遇到的狀況：

- **大多數套件的程式可以直接載入**：jsDelivr 會同步 npm 上的套件，指定精確版本載入即可。
- **CSS 與素材要內嵌**：Leaflet、MapLibre、KaTeX 的樣式表要直接寫進頁面，否則版面會亂；KaTeX 的數學字型會退回系統字型；音檔、3D 模型、貼圖要轉成 base64 內嵌，或改用 Tone.js 即時合成聲音、用程式生成幾何。
- **地圖底圖載不出來**：Leaflet、MapLibre 的圖磚來自外部伺服器，在 Artifact 裡會被擋；要嘛改用內嵌的 GeoJSON 畫輪廓，要嘛到本機專案做。
- **Lottie 動畫檔要內嵌**：不能從網址讀 JSON，要把動畫資料直接寫進頁面。
- **聲音要先點一下**：受瀏覽器自動播放限制，Tone.js、Howler.js 都要由使用者點選後才會出聲。
- **Mermaid 不必載入**：Artifact 會直接渲染 Mermaid 圖表。
- **需要打包工具的框架不適合**：React Three Fiber、Remotion、Motion Canvas 這類要建置流程的工具，放到本機專案比較順。

**在 Claude Code 等本機環境**，就像一般前端專案用 npm 安裝，沒有上述限制；也能讓 AI 開無頭瀏覽器逐格截圖、檢查畫面，再輸出影片。

## 授權：商用前一定要看的三個

多數套件是 MIT、Apache、BSD 這類寬鬆授權，可以自由商用。但下面三個有門檻，企業使用前要先確認：

- **Remotion**：個人、員工 3 人以下的營利組織、非營利組織可以免費使用；超過這個規模的公司需要購買公司授權（評估階段、尚未商用時也可免費）；不論規模都不能把修改版拿去轉售或再授權。
- **ApexCharts**：採雙授權。年營收未達 200 萬美元的組織適用免費的社群授權；達到門檻要購買商業授權，嵌入給他人使用的產品或平台，則不論營收都需要 OEM 授權；社群授權也不能用在與它競爭的圖表產品。
- **GSAP**：包含外掛在內都可以免費商用，但不能用在「讓使用者不寫程式就能做視覺動畫、並與 Webflow 競爭」的工具裡（取得事先書面同意者除外）。官方 FAQ 也說明，用 AI 產生 GSAP 程式碼不屬於禁止用途。

另外兩個要留意開源義務：p5.js（LGPL-2.1）隨產品散布時，要附授權聲明並保留使用者替換函式庫的能力；Theatre.js 的視覺化編輯器 studio（AGPL-3.0）若修改後透過網路提供他人使用，就要公開原始碼。studio 通常只在開發階段使用，正式上線只打包 core（Apache-2.0）即可避開。以上授權條件以 2026 年 9 月 28 日查證為準，Remotion 已預告 5.0 版會調整授權。

## 給 AI 的選型提示詞

把用途、渲染層、執行環境和授權限制一次講清楚，AI 選出來的套件會準很多：

```text
我要做：［例如：一張顯示 12 個月營收、滑鼠移上去就能看數字的折線圖］
執行環境：［Claude Artifact 單一網頁／本機 Vite 專案］
資料量：［例如：每條線 12 個點、共 3 條線］
限制：公司年營收超過 200 萬美元，請避開需要付費授權的套件

請先推薦一個最適合的 JavaScript 套件，說明它的底層是 SVG、Canvas 還是 WebGL，
以及為什麼不選另外兩個候選；確認後再寫程式，指定精確版本號。
```

> 那個數位協助企業與學校規劃 AI 內訓，從用 AI 做資料圖表、互動網頁到教材動畫，都能帶團隊實際做出來。歡迎與我們聊聊。

## 資料來源

- [Chart.js](https://www.chartjs.org/)
- [Apache ECharts](https://echarts.apache.org/)
- [Vega-Lite](https://vega.github.io/vega-lite/)
- [D3.js](https://d3js.org/)
- [Three.js](https://threejs.org/)
- [Babylon.js](https://www.babylonjs.com/)
- [PixiJS](https://pixijs.com/)
- [GSAP 標準授權](https://gsap.com/standard-license)
- [Remotion 授權](https://www.remotion.dev/license)
- [Motion Canvas](https://motioncanvas.io/)
- [HyperFrames](https://github.com/heygen-com/hyperframes)