最近两年伪 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