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

日期:5 月 30 日 × 2019 年设计工具
最近两年伪 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/

博文评论
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash