Three.js · yAnimationPlayground

空间场景图

用对象层级、透视相机、光照与材质表达真实的前后关系。

GPU 帧预算

用点云合批、DPR 上限和 renderer.info 观察真实绘制成本。

命中与降级

射线检测负责画布命中，原生按钮提供等价键盘与语义路径。

实验结论

Three.js 是空间渲染层，不是常规界面动画库。

当信息本身需要透视、相机、深度遮挡、三维模型或大量 GPU 图元时，Three.js 才带来不可替代的价值。普通按钮、列表、文字和二维数据图仍应留在 DOM / SVG；否则会用更高的包体、调试与可访问性成本换来并不存在的产品收益。

应该负责

不应该负责

从 Canvas 升级到 Three.js 的判断线

两者都能做逐帧绘制，但拥有的坐标系统和工程责任不同。

继续使用 Canvas

二维图元、屏幕坐标、粒子或轨迹已经足够，且不需要相机、光照和深度遮挡。

进入 Three.js

视觉含义依赖 3D 坐标、透视相机、模型、材质、光照或 GPU 管线，而不只是“看起来更炫”。

保持混合分层