讲解开源项目：让你成为灵魂画手的 JS 引擎：Zdog

时间 2020-05-03

标签讲解开源项目让你成为灵魂引擎 zdog 栏目 JavaScript 繁體版

原文原文链接

<p align="center">本文做者：HelloGitHub-<strong>kalifun</strong></p>javascript

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

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

1、介绍

1.1 Zdog

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

Tips: 本文出现的全部做品都是经过 Zdog 完成的。git

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

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

1.2 Zdog 特色

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

2、方法介绍

解释说明均在代码中以注释方式展现，请你们注意阅读。canvas

2.1 初始静态演示

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

静态演示只须要在画布上将想要绘画的图像渲染出来就能够了。函数

// 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 拖动旋转

经过在插图上设置 dragRotate：true 来拖动来启用旋转。

let newcanvas2 = new Zdog.Illustration({
        // 用id选择器设置画布
        element: '#zdog-canvas2',
        dragRotate: true,
    });

    // 画圆
    new Zdog.Ellipse({
        addTo: newcanvas2,
        diameter: 80,
        // 你能够理解z轴向前移动40个像素
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // 画矩形
    new Zdog.Rect({
        addTo: newcanvas2,
        width: 80,
        height: 80,
        // 你能够理解z轴向后移动40个像素
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate2() {
        // 经过逐步增长xxx.rotate.y来改变场景的旋转。值越大越快。
        newcanvas2.rotate.y += 0.03;
        newcanvas2.updateRenderGraph();
        // 动画下一帧继续执行函数
        requestAnimationFrame( animate2 );
    }
    // 开始动画，执行函数
    animate2();

3、快速入手

下面咱们将一步步的讲解如何使用 Zdog 这个库。咱们采用的是最简单的 CDN 引用方式，方便你们可以快速体检其魅力（复制代码即可查看效果）。

Tips： 解释说明均在代码中以注释方式展现，请你们注意阅读。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zdog</title>
    <style type="text/css">
        .zdog-canvas {
            /*给class="zdog-canvas"的画布添加背景*/
            background: #FDB;
        }
    </style>
</head>
<body>
<!--Zdog在<canvas>或<svg>元素上呈现。-->
<!--设置画布1，及长宽-->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<!--设置画布2，及长宽-->
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<!--引入zdog文件-->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
    // 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();


    let newcanvas = new Zdog.Illustration({
        // 用id选择器设置画布
        element: '#zdog-canvas',
    });

    // 画圆
    new Zdog.Ellipse({
        addTo: newcanvas,
        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来改变场景的旋转。值越大越快。
        newcanvas.rotate.y += 0.03;
        newcanvas.updateRenderGraph();
        // 动画下一帧继续执行函数
        requestAnimationFrame( animate );
    }
    // 开始动画，执行函数
    animate();

</script>
</body>
</html>

第一个画布是初始静态演示，第二个画布是动画，第三个画布是由第一个画布放大，第四个画布是经过拖动实现不规则旋转。

4、总结

Zdog 能够设计和显示简单的 3D 模型而不须要不少开销。这让咱们成为一个灵魂画手简单了不少，若是你想给本身的网站增添色彩，不妨试试 Zdog 吧。若是各位感兴趣的话，下一期我将带领你们成为一位代码上的灵魂画手！

5、参考资料

Zdog官方文档

『讲解开源项目系列』——让对开源项目感兴趣的人再也不畏惧、让开源项目的发起者再也不孤单。跟着咱们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系咱们、加入咱们，让更多人爱上开源、贡献开源～

原文出处：https://www.cnblogs.com/xueweihan/p/11536518.html