让你成为灵魂画手的 JS 引擎：Zdog

最新推荐文章于 2024-08-15 09:37:43 发布

削微寒

于 2019-09-18 08:15:00 发布

阅读量717

点赞数

本文链接：https://blog.csdn.net/a419240016/article/details/101026862

版权

640?wx_fmt=png

本文作者：HelloGitHub-kalifun

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

一、介绍

1.1 Zdog

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

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

640?wx_fmt=gif

圆形、扁平、设计师友好用于 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 拖动旋转

通过在插图上设置 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();

三、快速入手

下面我们将一步步的讲解如何使用 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>