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

这个东西是今天偶尔看到的，是啥呢，难道是漂亮的小姐姐吗？当然是......不可能的了，这个东西其实就是简单易用的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. SqlCommand的Parameters的用法

    SqlCommand的Parameters的用法 可以用的SqlCommand的Parameters的方法SqlCommand cmd=new ("insert into notice(ly ...

  2. JavaSE核心知识

    一:Java简介 1. Java语言的介绍:Java是一门面向对象编程语言,具有功能强大和简单易用两个特征. 2. Java语言的特点:简单性.面向对象.分布式.健壮性.安全性.平台独立与可移植性.多 ...

  3. 2.秋招复习简单整理之String、StringBuffer、StringBuilder的区别和联系

    String特点: 1.String是不可变对象,一旦赋值创建就不变,这意味着对String的一切修改将产生一个新的字符串,比如String的subString,replace.toUpperCase ...

  4. 对scanner.close方法的误解以及无法补救的错误

    scanner错误关闭导致的异常 public class test2 { public static void main(String[] args) { Scanner scanner1 = ne ...

  5. [Usaco2007 Open]Fliptile 翻格子游戏题解

    问题 B: [Usaco2007 Open]Fliptile 翻格子游戏 时间限制: 5 Sec  内存限制: 128 MB 题目描述 Farmer John knows that an intell ...

  6. 网页学习：day1

    初始准备: Write some function Write a titie Write a article Write some button Button function写法: functio ...

  7. 后端 - Lession 01 PHP 基础

    目录 Lession 01 php 基础 1. php 基础 2. php 变量 3. php 单引号 和 双引号区别 4. 数据类型 5. 数据类型转换 6. 常量 7. 运算符 8. 为 fals ...

  8. Excel催化剂开源第31波-pdf相关功能实现及类库介绍

    在Excel催化剂刚推出的pdf相关功能中,反馈很热烈,不止是用户层面好多人喜欢,也听到在.NET开发群里有询问pdf在winform上展现的功能诉求,一段时间没写开源篇,生怕大家以为Excel催化剂 ...

  9. python -服务器与客户端断电续传程序详细介绍

    6.28自我总结 客户端与服务器之间文件传输断电续传 `通过判断文件大小,以及文件在读取中的指针位置的调整来解决断电续传问题' 1.程序目录 E:/断电续传 |___bil | |___common. ...

  10. Java提供的几种线程池

    线程池,顾名思义,放线程的池子嘛,这个池子可以存放多少线程取决于你自己采用什么样的线程池,你的硬件资源,以及并发线程的数量.JDK提供了下面的四种线程池: 固定线程数的线程池 最简单的 在Java中创 ...