[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70652":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},70652,"zdog","metafizzy\u002Fzdog","metafizzy","Flat, round, designer-friendly pseudo-3D engine for canvas & SVG","https:\u002F\u002Fzzz.dog",null,"JavaScript",10631,406,102,46,0,1,13,3,68.63,false,"master",[24,25,26],"3d","canvas","svg","2026-06-12 04:00:56","# Zdog\n\n_Round, flat, designer-friendly pseudo-3D engine_\n\nView complete documentation and live demos at [zzz.dog](https:\u002F\u002Fzzz.dog).\n\n## Install\n\n### Download\n\n+ [zdog.dist.min.js](https:\u002F\u002Funpkg.com\u002Fzdog@1\u002Fdist\u002Fzdog.dist.min.js) minified, or\n+ [zdog.dist.js](https:\u002F\u002Funpkg.com\u002Fzdog@1\u002Fdist\u002Fzdog.dist.js) un-minified\n\n### CDN\n\nLink directly to Zdog JS on [unpkg](https:\u002F\u002Funpkg.com).\n\n``` html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fzdog@1\u002Fdist\u002Fzdog.dist.min.js\">\u003C\u002Fscript>\n```\n\n### Package managers\n\nnpm: `npm install zdog`\n\nBower: `bower install zdog`\n\n## Hello world demo\n\nCreate 3D models with Zdog by adding shapes. See [Getting started](https:\u002F\u002Fzzz.dog\u002Fgetting-started) for a walk-through of this demo.\n\n``` js\nlet isSpinning = true;\n\nlet illo = new Zdog.Illustration({\n  element: '.zdog-canvas',\n  zoom: 4,\n  dragRotate: true,\n  \u002F\u002F stop spinning when drag starts\n  onDragStart: function() {\n    isSpinning = false;\n  },\n});\n\n\u002F\u002F circle\nnew Zdog.Ellipse({\n  addTo: illo,\n  diameter: 20,\n  translate: { z: 10 },\n  stroke: 5,\n  color: '#636',\n});\n\n\u002F\u002F square\nnew Zdog.Rect({\n  addTo: illo,\n  width: 20,\n  height: 20,\n  translate: { z: -10 },\n  stroke: 3,\n  color: '#E62',\n  fill: true,\n});\n\nfunction animate() {\n  illo.rotate.y += isSpinning ? 0.03 : 0;\n  illo.updateRenderGraph();\n  requestAnimationFrame( animate );\n}\nanimate();\n```\n\n## About Zdog\n\nHi, [Dave here](https:\u002F\u002Fdesandro.com). I wanted to make a video game. I needed a 3D engine, but most engines were too powerful and complex for me. I made Zdog so I could design and display simple 3D models without a lot of overhead.\n\nZdog is directly inspired by [Dogz](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPetz), a virtual pet game by P.F. Magic released in 1995. It used flat 2D circle sprites to render the Dogz’ models, but in a 3D scene. [See Dogz playthrough video here.](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=6lKSn_cHw5k) Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.\n\nZdog uses the same principle. It renders all shapes using the 2D drawing APIs in either `\u003Ccanvas>` or `\u003Csvg>`. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from [Rotating 3D Shapes](https:\u002F\u002Fwww.khanacademy.org\u002Fcomputing\u002Fcomputer-programming\u002Fprogramming-games-visualizations\u002Fprogramming-3d-shapes\u002Fa\u002Frotating-3d-shapes) by [Peter Collingridge](https:\u002F\u002Fpetercollingridge.appspot.com\u002F3D-tutorial\u002Frotating-objects).\n\nZdog is pronounced \"Zee-dog\" in American parlance or \"Zed-dog\" in British.\n\n### Beta!\n\nZdog v1 is a beta-release, of sorts. This is my first time creating a 3D engine, so I probably got some stuff wrong. Expect lots of changes for v2. Provide input and select new features on the [Zdog issue tracker on GitHub](https:\u002F\u002Fgithub.com\u002Fmetafizzy\u002Fzdog\u002Fissues).\n\n### More Zdog resources\n\nOther people's stuff:\n\n+ [Zfont](https:\u002F\u002Fjaames.github.io\u002Fzfont\u002F) - Text plugin for Zdog\n+ [vue-zdog](https:\u002F\u002Fgithub.com\u002FAlexandreBonaventure\u002Fvue-zdog) - Vue wrapper for Zdog\n+ [zDogPy](https:\u002F\u002Fgithub.com\u002Fgferreira\u002Fzdogpy) - Python port of Zdog for DrawBot\n+ [Made with Zdog CodePen Collection](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FDzdGMe\u002F)\n+ [Made with Zdog on Twitter](https:\u002F\u002Ftwitter.com\u002Fi\u002Fmoments\u002F1135000612356206592)\n\nMy stuff:\n\n+ [Zdog demos on CodePen](https:\u002F\u002Fgithub.com\u002Fmetafizzy\u002Fzdog-demos), source code at [zdog-demos](https:\u002F\u002Fgithub.com\u002Fmetafizzy\u002Fzdog-demos)\n+ [zdog-docs](https:\u002F\u002Fgithub.com\u002Fmetafizzy\u002Fzdog-docs) - Docs site source code\n\n---\n\nLicensed MIT. Made by Metafizzy 🌈🐻\n","Zdog 是一个面向设计师的伪3D引擎，用于在canvas和SVG中创建简洁、扁平化的3D模型。其核心功能包括通过2D绘图API渲染所有形状，支持旋转、拖拽等交互操作，并且提供了直观易用的API来构建基础3D图形如圆形、矩形等。技术上，Zdog利用了简单的2D元素模拟3D效果，降低了学习曲线同时保持了良好的性能表现。适用于需要快速开发轻量级3D视觉效果的应用场景，比如网页游戏、数据可视化项目或是任何希望为用户界面增添趣味性而不增加过多复杂性的场合。",2,"2026-06-11 03:33:13","high_star"]