AVW-11：JS 图形与交互生态全景——Three.js 及 40+ 核心项目的定位、星数与解决什么问题

AI 动态视觉 Web 专题 全景地图 | AVW-11 JS 生态全景 ← 本文

前言：JS 生态的"图形栈"

JavaScript 生态已经从"操作 DOM"发展为完整的图形/交互/3D 技术栈。这套栈可以分为 9 条技术线，每条线有 1-3 个主导项目。

本文的目标是给每个项目一句话讲清楚它是什么、解决什么问题、目前热度如何。不做教程，做地图。

第一条线：3D 渲染引擎 — Web 的 3D 能力从哪来

Three.js — JS 3D 的北极星

• GitHub: mrdoob/three.js · 102k+ stars
• 官网: threejs.org
• 定位: JavaScript 3D 库。WebGL/WebGPU 的抽象层
• 解决问题的本质: 你不用直接写 WebGL 的着色器代码。Three.js 提供了场景(Scene)、相机(Camera)、几何体(Geometry)、材质(Material)、灯光(Light)等高层抽象
• 代表用户: Google、Apple、Nike、NASA、Figma
• AI 场景: 3D 数据可视化、数字孪生、产品 3D 预览、VR/AR 体验

Three.js 是 JS 3D 生态的绝对核心——下面要讲的 react-three-fiber、Drei、gltfjsx、react-xr 全部依赖它。

Babylon.js — 更偏向游戏引擎的 3D 方案

• GitHub: BabylonJS/Babylon.js · 23k+ stars
• 官网: babylonjs.com
• 定位: 强大的开源游戏和渲染引擎
• 与 Three.js 的核心区别:

什么时候选 Babylon.js: 你需要物理引擎、碰撞检测、粒子系统等"游戏引擎"级功能，且不希望自己拼装第三方库。

PlayCanvas — 浏览器优先的游戏引擎

• GitHub: playcanvas/engine · 10k+ stars
• 官网: playcanvas.com
• 定位: Web 优先的游戏引擎，WebGL/WebGPU/WebXR 全支持
• 特色: 在线编辑器 + glTF 标准 + 强大的 PBR 材质

OGL — 极简 WebGL

• GitHub: oframe/ogl · 3.5k+ stars
• 定位: 最小化的 WebGL 库。如果你觉得 Three.js 太重但又不想裸写 WebGL
• 适合: 追求极致体积的场景（如落地页 3D 背景）

regl — 函数式 WebGL

• GitHub: regl-project/regl · 5k+ stars
• 定位: 函数式的 WebGL。用 React 风格的函数式 API 写着色器
• 适合: 需要精细控制着色器但不想写样板代码的场景

第二条线：React 3D 生态 — pmndrs 宇宙

pmndrs（Poimandres）是一个开源组织，围绕 Three.js 构建了一整套 React 生态。如果你用 React 做 3D，这一整套都是标准配置。

react-three-fiber (R3F) — Three.js 的 React 渲染器

• GitHub: pmndrs/react-three-fiber · 28k+ stars
• 定位: Three.js 的 React 渲染器。用 JSX 写 3D 场景
• 解决问题的本质: 让 Three.js 融入 React 的声明式 + 组件化 + 状态管理范式

<Canvas>
  <ambientLight />
  <mesh>
    <boxGeometry />
    <meshStandardMaterial color="hotpink" />
  </mesh>
</Canvas>

Drei — R3F 的"瑞士军刀"

• GitHub: pmndrs/drei · 9k+ stars
• 定位: react-three-fiber 的实用工具集
• 包含: OrbitControls、Text、Html、Sky、Environment、useGLTF 等 100+ helpers

其他 pmndrs 生态

第三条线：2D 渲染 & 游戏引擎

PixiJS — 最快的 2D WebGL 渲染器

• GitHub: pixijs/pixijs · 44k+ stars
• 官网: pixijs.com
• 定位: 高性能 2D WebGL 渲染引擎
• 解决问题的本质: 你需要同时渲染数千个精灵（sprite）并保持 60fps——Canvas 2D 做不到，PixiJS 的 WebGL 渲染器可以
• 代表用户: Adobe、Disney、HBO
• AI 场景: 粒子效果、交互式数据可视化、2D 游戏

Phaser — 最流行的 2D Web 游戏框架

• GitHub: phaserjs/phaser · 38k+ stars
• 官网: phaser.io
• 定位: 完整的 2D 游戏框架。物理引擎、音效、输入、动画全内置
• 与 PixiJS 的区别: PixiJS 是渲染引擎，Phaser 是游戏引擎（内置物理/音效/场景管理）

Konva.js — 可交互的 Canvas 框架

• GitHub: konvajs/konva · 11k+ stars
• 定位: HTML5 Canvas 交互框架。提供图层、形状、事件系统
• 适合: 图形编辑器、白板、标注工具

Fabric.js — Canvas 上的"DOM 操作"

• GitHub: fabricjs/fabric.js · 29k+ stars
• 定位: Canvas 对象模型 + SVG 解析。让 Canvas 操作像操作 DOM 一样
• 适合: 设计工具、图片编辑器

Paper.js — 矢量图形的瑞士军刀

• GitHub: paperjs/paper.js · 14k+ stars
• 定位: 矢量图形脚本框架。贝塞尔曲线、路径运算、布尔操作
• 适合: 矢量图形编辑器、生成艺术

第四条线：数据可视化

详见 AVW-3 数据可视化全景 和 AVW-8 中国生态，此处仅列核心 JS 项目

第五条线：动画引擎

详见 AVW-2 动画引擎对比 和 GSAP 系列

第六条线：物理引擎

Matter.js — 2D 物理引擎

• GitHub: liabru/matter-js · 17k+ stars
• 定位: Web 端 2D 刚体物理引擎
• 解决问题的本质: 你需要重力、碰撞、摩擦力这些物理效果，但不想自己写物理公式
• 代表场景: 2D 小游戏、物理模拟、交互式教育

const engine = Matter.Engine.create()
const box = Matter.Bodies.rectangle(400, 200, 80, 80)
Matter.Composite.add(engine.world, [box, Matter.Bodies.rectangle(400, 600, 800, 20, { isStatic: true })])
Matter.Runner.run(engine)

Cannon.js — 3D 物理引擎

• GitHub: schteppe/cannon.js · 5k+ stars
• 定位: 轻量 3D 物理引擎（刚体、碰撞检测、约束）
• 与 Three.js 的配合: Three.js 负责渲染，Cannon.js 负责物理计算。两者通过同步 position/rotation 协作

第七条线：WebVR/AR

A-Frame — HTML 写 VR

• GitHub: aframevr/aframe · 17k+ stars
• 定位: 用 HTML 标签写 WebVR 体验
• 核心理念: 把 Three.js 的 VR 能力包装成声明式 HTML 标签

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>

• react-xr: pmndrs/xr — R3F 的 VR/AR 绑定，React 技术栈用这个而非 A-Frame

第八条线：地图可视化

第九条线：创意编程 & ML

p5.js — 代码作画

• GitHub: processing/p5.js · 22k+ stars
• 定位: 面向艺术家、设计师、学生的创意编程平台
• 特色: Processing 的 JS 版本，"让不会编程的人也能用代码创作视觉作品"

Zdog — 伪 3D 引擎

• GitHub: metafizzy/zdog · 10k+ stars
• 定位: 扁平化、设计师友好的伪 3D 引擎（Canvas/SVG）
• 适合: 2.5D 的卡通风格图标、Logo、插画

TensorFlow.js — 浏览器里的机器学习

• GitHub: tensorflow/tfjs · 18k+ stars
• 定位: WebGL 加速的浏览器端 ML 库
• AI 场景: 在浏览器里跑模型推理、迁移学习、实时姿态检测

ml5.js — 友好的浏览器 ML

• GitHub: ml5js/ml5-library · 6k+ stars
• 定位: TensorFlow.js 的友好封装，面向艺术家和创意编程者

第十条线：工具 & 导出

JS 图形生态版图总结

按 GitHub Stars 降序排列的核心项目热度榜：

技术选型速查

本文是 AVW 专题的第 11 篇，与前面的动画引擎（AVW-2）、数据可视化（AVW-3/8）、视频与动效（AVW-6）形成 JS 生态的完整覆盖。

实操清单

• 打开 threejs.org 浏览官方 Examples，找到一个感兴趣的 3D 场景并查看其源码
• 对照"技术选型速查"表，根据自己当前项目需求圈出首选框架
• 用 npm 初始化一个 Vite 项目，安装 three 和 @react-three/fiber，用 R3F 的 <Canvas> 渲染一个旋转的彩色立方体
• 安装 @react-three/drei，替换原生 Three.js 的 OrbitControls 为 Drei 的 <OrbitControls />，验证鼠标拖拽效果
• 用 gltfjsx CLI（npx gltfjsx model.glb）将一个 glTF 模型转换为 JSX 组件，导入 R3F 场景中
• 在 Matter.js 官方演示页 打开 Wrecking Ball 示例，阅读其源码，理解 Engine、Bodies、Runner 三者的关系
• 安装 matter-js，创建一个带重力的落体场景：一个方块落到静态地面并产生碰撞
• 将 Three.js 场景与 Cannon.js 联动：让一个 Three.js Mesh 的 position/quaternion 每帧同步 Cannon.js 刚体的物理状态
• 用 A-Frame 写 5 行 HTML 在浏览器中渲染一个可点击的 3D 场景，用手机扫 QR 码进入 VR 模式体验
• 进入 p5.js 编辑器，修改官方 Noise 示例，生成一张随机地形高度图
• 根据本文"热度榜"，在 GitHub 上 Star 你打算深入学习的 3 个项目，并订阅其 Release 通知