ZDog：簡單便捷好玩的的3D設計和動畫製作庫
阿新 • • 發佈：2019-08-11
各位老鐵，我灰太狼又又又回來了，嘿嘿！！！！最近在忙所以有日子沒寫部落格了，今天帶大家看個好玩的東西
這個東西是今天偶爾看到的，是啥呢，難道是漂亮的小姐姐嗎？當然是......不可能的了，這個東西其實就是簡單易用的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.