SVG（Scalable Vector Graphics）和 Three.js 是两种不同的技术，分别适用于 2D 矢量图形 和 3D 图形渲染。
文章目录
- 一、基本概念对比
- 二、功能特性对比
-
- 三、性能与适用场景对比
- 四、选择建议
一、基本概念对比
| 特性 | SVG | Three.js |
|---|
| 类型 | 2D 矢量图形 | 3D 图形库（基于 WebGL） |
| 渲染方式 | DOM 元素 | Canvas/WebGL 渲染 |
| 支持平台 | 所有现代浏览器 | 支持 WebGL 的浏览器 |
| 可交互性 | 原生支持事件绑定（如 click, hover） | 需手动实现交互逻辑 |
| 缩放质量 | 无损缩放（矢量图） | 分辨率依赖（像素图） |
| 学习曲线 | 较低（HTML/CSS/JS） | 较高（3D 数学、WebGL） |
二、功能特性对比
SVG 的优势
- 适合 2D 图形展示：图标、流程图、地图、图表等。
- 易于集成：可直接嵌入 HTML，使用 CSS 控制样式。
- 可访问性好：SVG 是 DOM 节点，可被搜索引擎索引。
- 动画能力：支持 CSS 动画、SMIL（已弃用）、JavaScript 控制。
- 响应式设计友好：自动适配不同分辨率屏幕。
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Three.js 的优势
- 强大的 3D 渲染能力：支持模型加载、光照、材质、阴影、后期处理等。
- 高性能图形渲染：基于 WebGL，充分利用 GPU 加速。
- 丰富的 3D 拓展生态：支持 GLTF/GLB、OBJ、PLY、FBX 等格式。
- 实时交互体验：可用于游戏、可视化数据、虚拟现实（VR）、增强现实（AR）等。
- 支持物理引擎集成：如 Cannon.js、Ammo.js。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);camera.position.z = 5;function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();
三、性能与适用场景对比
| 场景 | 推荐技术 | 原因 |
|---|
| 图标、流程图、数据可视化（2D） | SVG | 易于操作、兼容性好、响应式强 |
| 复杂 3D 场景（建模、粒子系统、光影效果） | Three.js | 强大的 3D 渲染能力 |
| 高性能要求的复杂动画 | Three.js | 利用 GPU 加速，帧率更高 |
| 移动端轻量级动画 | SVG | 占用资源少，兼容性好 |
| SEO & 可访问性 | SVG | DOM 元素，利于爬虫识别 |
| VR / AR 应用 | Three.js | 提供 WebXR 支持 |
四、选择建议
| 目标 | 推荐技术 |
|---|
| 构建图标库、图表、UI 动画 | SVG |
| 创建 3D 游戏、产品展示、数据三维可视化 | Three.js |
| 快速开发、低资源消耗、易维护 | SVG |
| 高性能图形、复杂交互、沉浸式体验 | Three.js |
