Zdog 是一个用于 <canvas> 和 SVG 的 3D JavaScript 引擎。通过 Zdog，你可以在 Web 界面上设计和渲染简单的 3D 模型。今天，我们来跟随 Maria Antonietta Perna 学习如何使用 Zdog 进行 3D 设计和动画制作。

有一个很酷的 JavaScript 库，像 Chris Gannon、Val Head、CodePen 等都对这个 JavaScript 库赞不绝口。你也可以在 Product Hunt 找到它，在网上的演示做得非常不错。这个很酷的 JavaScript 库，不是别的，正是 Dave DeSandro 的 Zdog。

在本文中，我将介绍 Zdog，并展示一些由出色的开发人员制作的演示，这些演示实在太可爱了，你可以对这些演示进行逆向工程并从中学习。

让我们开始吧！

Zdog 是什么？

DeSandro 在这个库的专用网站是这样解释 Zdog 的：

Zdog 是一个用于 <canvas> 和 SVG 的 3D JavaScript 引擎。借助 Zdog，你可以在 Web 上设计和渲染简单的 3D 模型。Zdog 是一个伪 3D 引擎，它的几何图形存在于 3D 空间中，但却以平面图形进行渲染。这就让 Zdog 很特别。

换句话说，你可以设计、显示和动画 SVG 或基于 <canvas> 的 3D 模型。

Zdog 很小（整个库只有 2100 行代码，压缩之后只有 28KB），对开发人员很友好（你可以使用直接声明性 API 来快速实现它）。

Zdog 入门

与大多数 JavaScript 一样，你可以通过以下方式将 Zdog 打包到你的项目中。

只需从以下链接将该库的副本下载到本地环境中：https://unpkg.com/zdog@1/dist/zdog.dist.min.js（未压缩版本是 https://unpkg.com/zdog@1/dist/zdog.dist.js）；
从 CDN 库获取：https://unpkg.com/zdog@1/dist/zdog.dist.min.js；
如果你使用 npm，键入以下命令来安装 Zdog：

npm install zdog

下面是 CodePen 上的官方“Hello World”演示，你可以立即运行并使用这个库：

此演示网址为 https://codepen.io/desandro/pen/YbrLaO

DeSandro 提供了一个很棒的入门指南，我将用它来让你了解这个库是如何运行的，以及你可以从中期待什么样的结果。

Zdog 是如何运行的

让我们从创建静态 SVG 圆圈开始。

HTML 只是一个可以用作包装器的 SVG 元素。如果你更喜欢使用 canvas 元素创建 Zdog 图形，只需将 SVG 记替换为 canvas 标记即可：

<svg id="circle" width="100" height="100"></svg>

现在在 SVG 元素上添加一些 CSS：

#circle {
    background-color: #081d3f;
    width: 100vw;
    height: 100vh;
}

最后，JavaScript 代码如下：

/*  create an instance of the Zdog 
    Illustration class */
    let circle = new Zdog.Illustration({
    element: '#circle'
    })

/*  create an instance of the 
    Zdog shape class Ellipse */
    new Zdog.Ellipse({
    // add the shape to the circle
    addTo: circle,
    // set more properties
    diameter: 20,
    stroke: 20,
    color: '#ccc'
    })

    // display the scene
    circle.updateRenderGraph()

要绘制图形，你需要创建 Zdog 类的实例。Illustration 是处理 <canvas> 或 <svg> 的顶级类。你为场景创建的形状将是 Illustration 类实例的子类。

Ellipse 是一个形状类。你可以创建 Ellipse 形状类的新实例，并使用 addTo() 方法将其添加到容器中，在本例中为 circle。Zdog 提供了许多预定义的形状，如 rect、polygon等等。若要创建自定义形状，请使用 Shape 类并定义其路径点。你可以为形状添加其他属性，如 diameter、stroke 和 color。要想了解更多的属性，请查看 Zdog 的 Shape 类的 API。

若要在屏幕上呈现图形，请调用 circle 实例上的 updateRenderGraph() 方法。

你的圆圈应该是这样的：

此演示网址为 https://codepen.io/antonietta/pen/bPBeXZ

使用 Zdog 设置动画和拖动

动画要求在每一帧上重新渲染 circle 实例。你可以使用 .requestAnimationFrame() ，如下所示：

function animate() {
/* incrementally increase 
the rotation on the y axis */
circle.rotate.y += 0.03
// re-render the graphic
circle.updateRenderGraph()
// animate the next frame        
requestAnimationFrame(animate)
}

animate()

Zdog 可以让你快速将拖动功能添加到你的图形中。如果你想在拖动时停止动画，并在拖动后恢复动画，你需要执行以下操作。

首先，将 isSpinning 标志设置为 true：

let isSpinning = true

接下来，返回到 Illustration 类的 circle 实例，并将 dragRotate 属性设置为 true。此外，在 onDragStart() 和 onDragEnd() 方法中切换标志，以便在拖动开始时设置为 false，在拖动结束时设置为 true：

let circle = new Zdog.Illustration({
    element: '#circle',
    dragRotate: true,
    onDragStart() {
    isSpinning = false
    },
    onDragEnd() {
    isSpinning = true
    }
})

最后，通过在顶部添加这个条件语句来调整 animate()函数，这样只有当 isSpinning 标志设置为 true 时，才会发生旋转：

    if(isSpinning) {
      circle.rotate.y += 0.03 
    }

这是运行的演示：

演示网址为 https://codepen.io/antonietta/pen/jjVBWO

资源与演示

以上只是你能用 Zdog 创建的所有令人惊叹的图形和动画的冰山一角。你还可以将其与其他库（如 GreenSock) 混合搭配，以获得更加惊人的结果。

下面是一些资源和演示集合，你可以在其中找到关于这个最新添加到设计和动画空间的更多信息，这些都是在代码中完成的：

Zdog 网站，你可以找到所有关于 API 的详细信息、更多演示、预排等等。
Holy Zdog，CodePen 的一个博客，内容全是基于 Zdog 的演示。
Made with Zdog，在 CodePen 上收集的基于 Zdog 的演示。
Made with Zdog，在 Twitter 上收集的一组很棒的演示，显然都是用 Zdog 制作的。

英文原文：https://www.sitepoint.com/learn-zdog/

创作场景

带来更多炫酷效果！用于 3D 设计和动画制作的 JavaScript 库：Zdog