各位老铁，我灰太狼又又又回来了，嘿嘿！！！！最近在忙所以有日子没写博客了，今天带大家看个好玩的东西

这个东西是今天偶尔看到的，是啥呢，难道是漂亮的小姐姐吗？当然是......不可能的了，这个东西其实就是简单易用的3D引擎库：ZDog，再深入一点应该说他是一个伪 3D 引擎，为何称之为伪3D引擎呢，是因为他的展示形式与众不同，按照官网的话说就是它的几何图形存在于 3D 空间中，但却以平面图形进行渲染。

我们先来看看具体的一些效果再继续介绍，毕竟没实现效果的介绍跟白嫖没啥区别

看到了吧，炫酷不，这些都是用ZDog来实现的，是不是感觉美滋滋

虽然这些看上去有点复杂，但是用ZDog实现起来还是很简单的，因为ZDog追求的就是简单易用，ZDog的库只用区区2100行代码，压缩之后的大小28KB，够小的吧，而且上手难度并不高，库嘛，拿来看着文档就可以用，包括API都是十分简洁的，下面我们来看一个一个简单的小例子（建一个HTML文件，直接将以下的代码拉进去，浏览器运行就可以了）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

<body>

    <canvas class="zdog-canvas" width="480" height="480"></canvas>

</body>

<script>

let isSpinning = true;

let illo = new Zdog.Illustration({

  element: '.zdog-canvas',

  dragRotate: true,

  onDragStart: function() {

    isSpinning = false;

  },

});

// circle

new Zdog.Ellipse({

  addTo: illo,

  diameter: 80,

  translate: { z: 40 },

  stroke: 20,

  color: '#636',

});

// square

new Zdog.Rect({

  addTo: illo,

  width: 80,

  height: 80,

  translate: { z: -40 },

  stroke: 12,

  color: '#E62',

  fill: true,

});

function animate() {

  illo.rotate.y += isSpinning ? 0.03 : 0;

  illo.updateRenderGraph();

  requestAnimationFrame( animate );

}

animate();

</script>

</html>

然后呢，我们来看看效果

是不是很简单方便，下午抽空去看了看ZDog的文档，大约一个小时作用就看完了，看完即可上手，官网上还给了一些别的用ZDog实现的效果

看，是不是很好看，正如官网所说，这个引擎的效果还是非常初级的，因为 Zdog 是完全用 2D 对象投射到 3D 物体所在位置来渲染，所以 Z 轴层叠问题基本无解，官网的也注明了这只是第一个版本，至于里面使用细节的介绍我就不详细描述了，官网已经讲得非常细致了,有兴趣的同学们可以去试一下子，反正是白嫖又不收钱，快乐就完事了

传送门

ZDog官网：https://zzz.dog/

ZDog：简单便捷好玩的的3D设计和动画制作库的更多相关文章

  1. 简约而不简单：网站着陆页的设计（Landing Page Design）

    着陆页是一个在线营销的概念,是指当访客点击一个搜索引擎优化的搜索结果进入的第一个页面或“着陆”页面.这是一个重要的页面,它和提供的产品或服务的广告有点类似,提供了与产品相关的精确的信息,告诉客户可以购 ...

  2. 简单便捷的纯PHP网盘程序 Veno File Manager 2.6.3(VFM2)

    体验过很多国外网盘程序,例如:Owncloud.Bedrive.YetiShare.XFilesharing.uCloud.Cloudshare 等等,诸如此类,VFM2与这些臃肿的商用或非商用来的程 ...

  3. 简单聊聊CSS中的3D技术之“立方体”

    简单聊聊CSS中的3D技术之“立方体” 大家好,我是今天的男一号,我叫小博主. 今天来聊一下我在前端“逆战班”学习中遇到的颇为有趣的3D知识.前端学习3周,见识稀疏,在下面的分享中如有不对的地方请大家 ...

  4. 最简单直接地理解Java软件设计原则之单一职责原则

    理论性知识 定义 单一职责原则, Single responsibility principle (SRP): 一个类,接口,方法只负责一项职责: 不要存在多余一个导致类变更的原因: 优点 降低类的复 ...

  5. Qt Creator中的3D绘图及动画教程(参照NeHe)

    Qt Creator中的3D绘图及动画教程(参照NeHe) http://blog.csdn.net/cly116/article/details/47184729 刚刚学习了Qt Creator,发 ...

  6. Mathcad 是一种工程计算软件,主要运算功能:代数运算、线性代数、微积分、符号计算、2D和3D图表、动画、函数、程序编写、逻辑运算、变量与单位的定义和计算等。

    Mathcad软件包Mathcad是由MathSoft公司(2006 年4 月被美国PTC收购)推出的一种交互式数值计算系统. Mathcad 是一种工程计算软件,作为工程计算的全球标准,与专有的计算 ...

  7. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  8. WPF 3D 平移模型+动画（桥梁检测系统）

    原文:WPF 3D 平移模型+动画(桥梁检测系统) 关于WPF 3D,网上有很多旋转的例子,但是关于平移的例子并不是太多.本文并非WPF 3D扫盲篇,因此需要对WPF 3D有一定了解,至少知道View ...

  9. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

随机推荐

  1. Unity3D热更新之LuaFramework篇[06]--Lua中是怎么实现脚本生命周期的

    前言 用c#开发的时候,新建的脚本都默认继承自Monobehaviour, 因此脚本才有了自己的生命周期函数,如Awake,Start, Update, OnDestroy等. 在相应的方法中实现游戏 ...

  2. 从无到有构建vue实战项目（四）

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  3. java中几个常见的问题

    1.正确使用equals方法 Object的equals方法容易抛出空指针异常,应使用常量或确定有值的对象来调用equals方法 例如: //不能使用一个值为null的引用类型变量来调用非静态方法,否 ...

  4. kafka介绍及安装配置（windows）

    Kafka介绍 Kafka是分布式的发布—订阅消息系统.它最初由LinkedIn(领英)公司发布,使用Scala和Java语言编写,与2010年12月份开源,成为Apache的顶级项目.Kafka是一 ...

  5. 七牛云图床和Markdown使用

    七牛云图床和Markdown使用 1.图床是什么? 图床一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn ...

  6. Python爬虫学习代码

    [1]用一个简单的程序来显示Python的数字类型. code: class ShowNumType(object): def __init__(self): self.showInt() self. ...

  7. MapReduce之WordCount

    用户统计文件中的单词出现的个数 注意各个文件的导包,job的封装步骤 WordCountMapper.java package top.wintp.mapreduce.wordcount; impor ...

  8. k8s1.9.0安装--环境准备

    一.预先准备环境 1. 准备服务器 这里准备了三台centos虚拟机,每台一核cpu和2G内存,配置好root账户,并安装好了docker,后续的所有操作都是使用root账户.虚拟机具体信息如下表: ...

  9. 7kyu (难度系数kyu阶段数值越大难度越低) 数组分组及求和

    几个人排成一排,分成两队.第一个人进入一队,第二个人进入第二队,第三个人进入第一队,以此类推. 给定一个正整数的数组(人的权重),返回两个整数的新数组/元组,其中第一个是第1组的总重量,第二个是第2组 ...

  10. 关于STM32F103+ESP8266+阿里云过程之修改SDK连接至阿里云（二）

    继上篇的阿里云物联云平台设置之后,接下来的工作就是对安信可官方给的sdk进行修改 安信可ESP系列集成环境,SDK,aliyun_mqtt_app,下载地址在上一篇博客,https://www.cnb ...