伪 3D 的 JS 立体渲染引擎 Zdog

最近两年伪 3D 的效果在世界范围内都好流行（我实在是很不情愿叫 2.5D），这两天有个「萌萌哒」的国外作者 David DeSandro 开发了一个伪 3D 引擎 Zdog。说他「萌萌哒」是因为这个引擎的官网设计、简介以及 Zdog 这个名字的由来都非常有意思~ 作者对 Zdog 的定义同样非常精简干练：

Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
圆头圆脑、纯平质感、对设计师友好的 canvas + SVG 伪 3D 引擎

被官网范例所吸引去尝试了一下，确实如作者所说这个引擎的效果还是非常初阶的，因为 Zdog 是完全用 2D 对象投射到 3D 物体所在位置来渲染，所以 Z 轴层叠问题基本无解（当然官网也介绍了一些方法来缓解 Z-fighting）。但毕竟这就是一个未压缩也只有 28KB、不追求精确但求好玩的 JS 库，还要啥自行车呢~

我把我台另外两位主播的头像作为范例进行了简单尝试，效果如下~

See the Pen
Yuki + Leon by JJ Ying (@jjying)
on CodePen.

试用下来觉得确实还算对设计师友好，位移旋转变形基本上像是在写 CSS 和 SVG，绑定父对象、建组、动画之类的基础功能也都有，虽然支持的形状略少，建复杂模型不方便但还是值得玩一玩~

Zdog 官网 ：https://zzz.dog/
Tags - zdog , js , 3d