各位老鐵，我灰太狼又又又回來了，嘿嘿！！！！最近在忙所以有日子沒寫博客了，今天帶大家看個好玩的東西
這個東西是今天偶爾看到的，是啥呢，難道是漂亮的小姐姐嗎？當然是......不可能的了，這個東西其實就是簡單易用的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/