告别WebGL噩梦：Zdog如何让3D开发变得像画画一样简单
在前端开发的世界里，我们经常面临这样的困扰：想要为网页添加一些生动的立体元素，让界面更有层次感和趣味性，但又不想陷入复杂的3D编程中。
传统的解决方案要么过于复杂，要么效果有限，设计师和前端开发者往往需要在视觉效果和开发成本之间做艰难的取舍。
Zdog的开源项目，它用一种全新的思路重新定义了Web 3D的边界。这个仅有28KB的小巧库，却能创造出令人惊艳的伪3D效果，就像用代码绘制的立体插画一样优雅。
Zdog优点
复杂立体效果的简化需求 网页设计越来越追求层次感和立体效果，但传统的CSS 3D transform功能有限，创建复杂图形困难。Zdog提供了直观的API来创建各种立体图形。
轻量级动画的性能要求 现代网页注重加载速度和运行性能，需要既能呈现精美效果又不会拖累页面性能的解决方案。Zdog仅28KB的体积和优秀的渲染性能完美满足这一需求。
扁平化设计的立体表达 当下流行的扁平化和极简主义设计风格需要一种既有立体感又不失简洁的视觉语言。Zdog的伪3D风格天然契合这种审美需求。
跨设备兼容性的挑战 不同设备和浏览器的渲染能力差异很大，需要一个通用性强、兼容性好的图形库。Zdog基于Canvas 2D，确保了优秀的跨平台表现。
案例演示
它并不追求照片级别的写实渲染，而是选择了一种更纯粹的表达方式——通过简洁的线条和几何形状来构建立体世界。
Zdog基于Canvas 2D和SVG渲染，通过精确的数学变换来模拟三维透视效果。这种"伪3D"的实现方式巧妙地避开了复杂的3D渲染管线，却依然能够呈现出令人印象深刻的立体感。
引入依赖
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="zdog-demo.js"></script>创建html元素
<canvas class="zdog-canvas" width="240" height="240"></canvas>基础几何体
// zdog-demo.js
// create illo
let illo = new Zdog.Illustration({
// set canvas with selector
element: '.zdog-canvas',
});
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636',
});
// update & render
illo.updateRenderGraph();
动画
function animate() {
// rotate illo each frame
illo.rotate.y += 0.03;
illo.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
// start animation
animate();
画一个笑脸
让我们通过一个完整的实例来体验Zdog的魅力——创建一个带有表情的立体头像。
我们的初始设置一个 Illustration ，一个具有单个 Shape 的模型，以及一个动画循环。
let illo = new Zdog.Illustration({
element: elem,
zoom: 10,
dragRotate: true,
});
// ---- model ---- //
let head = new Zdog.Shape({
addTo: illo,
stroke: 12,
color: gold,
});
// -- animate --- //
function animate() {
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
animate();头部形状被渲染为一个带有 Shape 的平面色球体。 Shape 类可以通过其 path 属性来定义渲染任何形状——线条、曲线、多边形。由于 head 没有设置 path ，其路径默认为单个点。这个点，在 stroke 体积的作用下，渲染为一个平面色球体。
添加眼睛
接下来我们将眼睛 Ellipse 添加为 head 的子形状，并使用 addTo: head 。
let eye = new Zdog.Ellipse({
addTo: head,
diameter: 2,
quarters: 2, // semi-circle 半圆
translate: { x: -2, y: 1, z: 4.5 },
// rotate semi-circle to point up 旋转半圆朝上
rotate: { z: -TAU/4 },
color: eggplant,
stroke: 0.5,
// hide when front-side is facing back 当正面朝后时隐藏
backface: false,
});对于右边的眼睛，我们可以 .copy() 左边的眼睛。原始选项会被复制过来，然后可以被新的选项覆盖，在这个例子中是改变 translate 。
// eye on left 左眼
let eye = new Zdog.Ellipse({
addTo: head,
diameter: 2,
quarters: 2,
translate: { x: -2, y: 1, z: 4.5 },
// ...
});
// eye on right 右眼
eye.copy({
translate: { x: 2, y: 1, z: 4.5 },
});比较眼睛的 translate 向量对象：
// eye on left 左眼
translate: { x: -2, y: 1, z: 4.5 }
// eye on right 右眼
translate: { x: 2, y: 1, z: 4.5 }唯一的不同是 x 坐标。但是所有三个 x ， y ， z 坐标都需要设置。只设置 translate: { x: 2 } 会得到 { x: 2, y: 0, z: 0 } ，这不是我们想要的。
绘制微笑
微笑是用一个类似的半圆 Ellipse 制作的。它的路径用 closed: true 闭合。
// smile 微笑
new Zdog.Ellipse({
addTo: head,
diameter: 3,
quarters: 2,
translate: { y: 2.5, z: 4.5 },
rotate: { z: TAU/4 },
closed: true,
color: '#FED',
stroke: 0.5,
fill: true,
backface: false,
});
写在最后
Zdog应用领域：品牌logo动效、产品特性展示、数据图表立体化、网站装饰动画以及交互式说明图等场景。
它专注于创造简洁优雅的伪3D效果，适合那些需要立体感但又要保持视觉简洁的场景。对于需要复杂光影效果或写实渲染的项目，则需要考虑其他解决方案。
Zdog为我们提供了一个完美的平衡点：足够的视觉冲击力，适中的学习成本，以及优秀的性能表现。告别WebGL噩梦：Zdog如何让3D开发变得像画画一样简单