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

这个东西是今天偶尔看到的，是啥呢，难道是漂亮的小姐姐吗？当然是......不可能的了，这个东西其实就是简单易用的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. 关于char[]转换成LPCWSTR的有关问题[转]

    一.问题的原因:VS2010默认采用宽字符UNICODE编码方式,定义了Unicode,因此相关的字符串必须为unicode字符串,而非ascii字符串. LPCWSTR中的W是宽字符的意思,是UNI ...

  2. Java连载5-标识符、关键字和字面值

    一.标识符 1.标识符定义:在java源程序中凡是可以自己命名的单词 2.标识符可以标识什么元素? (1)类名(2)方法名(3)变量名(4)接口名(5)常量名 等等 3.标识符的命名要求 (1)一个合 ...

  3. WebApi 通过拦截器设置特定的返回格式

    public class ActionFilter : ActionFilterAttribute { /// <summary> /// Action执行之后由MVC框架调用 /// & ...

  4. JS获取display为none的隐藏元素的宽度和高度的解决方案

    有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...

  5. Bzoj 3124: [Sdoi2013]直径 题解

    3124: [Sdoi2013]直径 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1222  Solved: 580[Submit][Status] ...

  6. ZIP：ZipFile

    ZipFile: /* 此类用于从 ZIP 文件读取条目 */ ZipFile(File file) :打开供阅读的 ZIP 文件,由指定的 File 对象给出. ZipFile(File file, ...

  7. 个人永久性免费-Excel催化剂插件功能修复与更新汇总篇之九

    第11波-快速批量插入图片并保护纵横比不变 原文链接:https://www.jianshu.com/p/9a3d9aa7ba7e 修复了插入图片有纵向的图片时,插入后还是显示横向的情况. 第83波- ...

  8. apache添加https证书

    今天折腾了一下,总结apache添加https证书的方法. 证书类型分为两种, A)自签名证书 利用oepnssl命令生成.csr和key文件,没有授信,没有有效期,但是可以强制使用https协议,可 ...

  9. iOS-监听原生H5性能数据window.performance

    WebKit-WKWebView iOS8开始苹果推荐使用WKWebview作为H5开发的核心组件,以替代原有的UIWebView,以下是webkit基本介绍介绍: 介绍博客 Webkit H5 - ...

  10. SQL Server 设置默认数据库

    STEP 1 调用系统函数 查看SQL Server的当前用户名 SELECT SUSER_NAME(); NOTE : 系统函数的调用跟sql语句执行一样 Paste_Image.png 运行结果 ...