老铁们，大家好，相信还有很多朋友对于zoomdog2019中国和让你成为灵魂画手的的相关问题不太懂，没关系，今天就由我来为大家分享分享zoomdog2019中国以及让你成为灵魂画手的的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
本文作者：HelloGitHub-kalifun
今天给大家推荐一个使用JavaScript语言编写的开源Web3D模型项目——Zdog。
一、介绍
1.1Zdog
Zdog项目地址：https://github.com/metafizzy/zdog
Tips:本文出现的所有作品都是通过Zdog完成的。
圆形、扁平、设计师友好用于canvas和SVG的伪3D引擎。
使用Zdog您可以在Web上设计和渲染简单的3D模型。Zdog是一个伪3D引擎。它的几何形状存在于3D空间中，但呈现为扁平形状，这使Zdog特别。
1.2Zdog特点
体积小：整个库只有2100行代码，最小体积为28KB。图形圆滑：所有的圆形都呈现为圆边，没有多边形锯齿。使用友好：使用API完成建模。二、方法介绍
解释说明均在代码中以注释方式展示，请大家注意阅读。
2.1初始静态演示
让我们进入一个基本的非动画演示。
静态演示只需要在画布上将想要绘画的图像渲染出来就可以了。
//Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。nletillo=newZdog.Illustration({n//用class选择器设置画布nelement:'.zdog-canvas',n});n?n//画圆nnewZdog.Ellipse({n//将形状添加到illonaddTo:illo,n//设置圆的直径ndiameter:80,n//设置画笔宽度nstroke:20,n//设置圆的颜色ncolor:'#636',n});n?n//更新所有显示属性并渲染到illo画布上nillo.updateRenderGraph();n
2.2动画
为实现动画场景，我们需要每帧重新渲染图形在画布上。
letillo=newZdog.Illustration({n//用id选择器设置画布nelement:'#zdog-canvas',n});n?n//画圆nnewZdog.Ellipse({naddTo:illo,ndiameter:80,n//你可以理解z轴向前移动40个像素ntranslate:{z:40},nstroke:20,ncolor:'#636',n});n?n//画矩形nnewZdog.Rect({naddTo:newcanvas,nwidth:80,nheight:80,n//你可以理解z轴向后移动40个像素ntranslate:{z:-40},nstroke:12,ncolor:'#E62',nfill:true,n});n?nfunctionanimate(){n//通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。nillo.rotate.y+=0.03;nillo.updateRenderGraph();n//动画下一帧继续执行函数nrequestAnimationFrame(animate);n}n//开始动画，执行函数nanimate();n
2.3放大
Zdog需要设置大量数字。设置zoom将按比例缩放整个场景。
//Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。nletillo2=newZdog.Illustration({n//用class选择器设置画布nelement:'.zdog-canvas2',n//将图形放大4倍nzoom:4,n});n//画圆nnewZdog.Ellipse({n//将形状添加到illo2naddTo:illo2,n//设置圆的直径ndiameter:80,n//设置画笔宽度nstroke:20,n//设置圆的颜色ncolor:'#636',n});n?n//更新所有显示属性并渲染到illo画布上nillo2.updateRenderGraph();n
2.4拖动旋转
通过在插图上设置dragRotate：true来拖动来启用旋转。
letnewcanvas2=newZdog.Illustration({n//用id选择器设置画布nelement:'#zdog-canvas2',ndragRotate:true,n});n?n//画圆nnewZdog.Ellipse({naddTo:newcanvas2,ndiameter:80,n//你可以理解z轴向前移动40个像素ntranslate:{z:40},nstroke:20,ncolor:'#636',n});n?n//画矩形nnewZdog.Rect({naddTo:newcanvas2,nwidth:80,nheight:80,n//你可以理解z轴向后移动40个像素ntranslate:{z:-40},nstroke:12,ncolor:'#E62',nfill:true,n});n?nfunctionanimate2(){n//通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。nnewcanvas2.rotate.y+=0.03;nnewcanvas2.updateRenderGraph();n//动画下一帧继续执行函数nrequestAnimationFrame(animate2);n}n//开始动画，执行函数nanimate2();n
三、快速入手
下面我们将一步步的讲解如何使用Zdog这个库。我们采用的是最简单的CDN引用方式，方便大家能够快速体检其魅力（复制代码便可查看效果）。
Tips：解释说明均在代码中以注释方式展示，请大家注意阅读。
<!DOCTYPEhtml>n<htmllang="en">n<head>n<metacharset="UTF-8">n<title>zdog</title>n<styletype="text/css">n.zdog-canvas{n/*给class="zdog-canvas"的画布添加背景*/nbackground:#FDB;n}n</style>n</head>n<body>n<!--Zdog在<canvas>或<svg>元素上呈现。-->n<!--设置画布1，及长宽-->n<canvasclass="zdog-canvas"width="240"height="240"></canvas>n<!--设置画布2，及长宽-->n<canvasid="zdog-canvas"width="240"height="240"></canvas>n<!--引入zdog文件-->n<scriptsrc="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>n<script>n//Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。nletillo=newZdog.Illustration({n//用class选择器设置画布nelement:'.zdog-canvas',n});n?n//画圆nnewZdog.Ellipse({n//将形状添加到illonaddTo:illo,n//设置圆的直径ndiameter:80,n//设置画笔宽度nstroke:20,n//设置圆的颜色ncolor:'#636',n});n?n//更新所有显示属性并渲染到illo画布上nillo.updateRenderGraph();n?n?nletnewcanvas=newZdog.Illustration({n//用id选择器设置画布nelement:'#zdog-canvas',n});n?n//画圆nnewZdog.Ellipse({naddTo:newcanvas,ndiameter:80,n//你可以理解z轴向前移动40个像素ntranslate:{z:40},nstroke:20,ncolor:'#636',n});n?n//画矩形nnewZdog.Rect({naddTo:newcanvas,nwidth:80,nheight:80,n//你可以理解z轴向后移动40个像素ntranslate:{z:-40},nstroke:12,ncolor:'#E62',nfill:true,n});n?nfunctionanimate(){n//通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。nnewcanvas.rotate.y+=0.03;nnewcanvas.updateRenderGraph();n//动画下一帧继续执行函数nrequestAnimationFrame(animate);n}n//开始动画，执行函数nanimate();n</script>n</body>n</html>n
第一个画布是初始静态演示，第二个画布是动画，第三个画布是由第一个画布放大，第四个画布是通过拖动实现不规则旋转。
四、总结
Zdog可以设计和显示简单的3D模型而不需要很多开销。这让我们成为一个灵魂画手简单了很多，如果你想给自己的网站增添色彩，不妨试试Zdog吧。如果各位感兴趣的话，下一期我将带领大家成为一位代码上的灵魂画手！
五、参考资料
Zdog官方文档[1]
References
[1]Zdog官方文档:https://zzz.dog/
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系、加入我们，让更多人爱上开源、贡献开源～
OK，本文到此结束，希望对大家有所帮助。
还没有评论，来说两句吧...