講解開源項目：讓你成爲靈魂畫手的 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>

第一個畫布是初始靜態演示，第二個畫布是動畫，第三個畫布是由第一個畫布放大，第四個畫布是經過拖動實現不規則旋轉。