在 <canvas> 中實現 3D 動畫通常需要借助 WebGL 技術，因為原生的 2D 上下文（CanvasRenderingContext2D）無法直接支持 3D 渲染。WebGL 是基于 OpenGL ES 2.0 的 JavaScript API，可以直接在瀏覽器中實現高性能的 3D 圖形渲染。以下是關于 <canvas> 3D 動畫的概念、實現方法及難點的詳細說明。

---

1. 3D 動畫的基本概念

(1) WebGL 簡介

• WebGL 是一種用于在瀏覽器中渲染 3D 圖形的 API，基于 OpenGL ES 2.0。
• 它通過 JavaScript 與 GPU 交互，實現高性能的圖形渲染。

(2) 3D 動畫的核心

• 頂點數據：定義 3D 模型的幾何形狀。
• 著色器：控制圖形的渲染方式，包括頂點著色器和片段著色器。
• 矩陣變換：通過矩陣實現平移、旋轉、縮放等 3D 變換。
• 光照與材質：模擬光線和物體表面的交互，增強真實感。

(3) 動畫原理

• 通過逐幀更新 3D 模型的狀態（如位置、旋轉角度等），并重新渲染場景，實現動畫效果。

---

2. 3D 動畫的實現步驟

(1) 初始化 WebGL 上下文

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {console.error('WebGL 不支持');
}

(2) 定義頂點數據

const vertices = [-1, -1, 0,1, -1, 0,0, 1, 0
];

(3) 創建著色器

• 頂點著色器：處理頂點位置。

  const vertexShaderSource = `attribute vec3 aPosition;void main() {gl_Position = vec4(aPosition, 1.0);}
  `;
  

• 片段著色器：處理像素顏色。

  const fragmentShaderSource = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 紅色}
  `;
  

(4) 編譯著色器并鏈接程序

function