本文作者：HelloGitHub-kalifun

HelloGitHub 的《讲解开源项目》系列，项目地址：https://github.com/HelloGitHub-Team/Article

今天给大家推荐一个使用 JavaScript 语言编写的开源 Web 3D 模型项目 —— Zdog。

一、介绍

1.1 Zdog

Zdog 项目地址：https://github.com/metafizzy/zdog

Tips: 本文出现的所有作品都是通过 Zdog 完成的。

圆形、扁平、设计师友好用于 canvas 和 SVG 的伪 3D 引擎。

使用 Zdog 您可以在 Web 上设计和渲染简单的 3D 模型。Zdog 是一个伪 3D 引擎。它的几何形状存在于 3D 空间中，但呈现为扁平形状，这使 Zdog 特别。

1.2 Zdog 特点

• 体积小：整个库只有 2100 行代码，最小体积为 28 KB。
• 图形圆滑：所有的圆形都呈现为圆边，没有多边形锯齿。
• 使用友好：使用 API 完成建模。

二、方法介绍

解释说明均在代码中以注释方式展示，请大家注意阅读。

2.1 初始静态演示

让我们进入一个基本的非动画演示。

静态演示只需要在画布上将想要绘画的图像渲染出来就可以了。

// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。     let illo = new Zdog.Illustration({         // 用class选择器设置画布         element: '.zdog-canvas',     });      // 画圆     new Zdog.Ellipse({         // 将形状添加到illo         addTo: illo,         // 设置圆的直径         diameter: 80,         // 设置画笔宽度         stroke: 20,         // 设置圆的颜色         color: '#636',     });      // 更新所有显示属性并渲染到illo画布上     illo.updateRenderGraph();

2.2 动画

为实现动画场景，我们需要每帧重新渲染图形在画布上。

let illo = new Zdog.Illustration({         // 用id选择器设置画布         element: '#zdog-canvas',     });      // 画圆     new Zdog.Ellipse({         addTo: illo,         diameter: 80,         // 你可以理解z轴向前移动40个像素         translate: { z: 40 },         stroke: 20,         color: '#636',     });      // 画矩形     new Zdog.Rect({         addTo: newcanvas,         width: 80,         height: 80,         // 你可以理解z轴向后移动40个像素         translate: { z: -40 },         stroke: 12,         color: '#E62',         fill: true,     });      function animate() {         // 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。         illo.rotate.y += 0.03;         illo.updateRenderGraph();         // 动画下一帧继续执行函数         requestAnimationFrame( animate );     }     // 开始动画，执行函数     animate();

2.3 放大

Zdog 需要设置大量数字。设置 zoom 将按比例缩放整个场景。

// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。     let illo2 = new Zdog.Illustration({         // 用class选择器设置画布         element: '.zdog-canvas2',          // 将图形放大4倍         zoom: 4,     });     // 画圆     new Zdog.Ellipse({         // 将形状添加到illo2         addTo: illo2,         // 设置圆的直径         diameter: 80,         // 设置画笔宽度         stroke: 20,         // 设置圆的颜色         color: '#636',     });      // 更新所有显示属性并渲染到illo画布上     illo2.updateRenderGraph();

2.4 拖动旋转

通过在插图上设置