Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
👷 v0.1.0 for initial package registration
+180
+89
README.md
+89
README.md
···
1
+
# Zdog
2
+
3
+
_Round, flat, designer-friendly pseudo-3D engine_
4
+
5
+
View complete documentation and live demos at [zzz.dog](https://zzz.dog).
6
+
7
+
## Install
8
+
9
+
### Download
10
+
11
+
+ [zdog.pkgd.min.js](https://unpkg.com/zdog@0/dist/zdog.pkgd.min.js) minified, or
12
+
+ [zdog.pkgd.js](https://unpkg.com/zdog@0/dist/zdog.pkgd.min.js) un-minified
13
+
14
+
### CDN
15
+
16
+
Link directly to Zdog JS on [unpkg](https://unpkg.com).
17
+
18
+
``` html
19
+
<script src="https://unpkg.com/zdog@0/dist/zdog.pkgd.min.js"></script>
20
+
```
21
+
22
+
### Package managers
23
+
24
+
npm: `npm install zdog`
25
+
26
+
Bower: `bower install zdog`
27
+
28
+
## Hello world demo
29
+
30
+
Create 3D models with Zdog by adding shapes. See [Getting started](https://zzz.dog/getting-started) for a walk-through of this demo.
31
+
32
+
``` js
33
+
let isSpinning = true;
34
+
35
+
const illo = new Zdog.Illustration({
36
+
element: '.zdog-canvas',
37
+
zoom: 4,
38
+
dragRotate: true,
39
+
// stop spinning when drag starts
40
+
onDragStart: function() {
41
+
isSpinning = false;
42
+
},
43
+
});
44
+
45
+
// circle
46
+
new Zdog.Ellipse({
47
+
addTo: illo,
48
+
diameter: 20,
49
+
translate: { z: 10 },
50
+
stroke: 5,
51
+
color: '#636',
52
+
});
53
+
54
+
// square
55
+
new Zdog.Rect({
56
+
addTo: illo,
57
+
width: 20,
58
+
height: 20,
59
+
translate: { z: -10 },
60
+
stroke: 3,
61
+
color: '#E62',
62
+
fill: true,
63
+
});
64
+
65
+
function animate() {
66
+
illo.rotate.y += isSpinning ? 0.03 : 0;
67
+
illo.updateRenderGraph();
68
+
requestAnimationFrame( animate );
69
+
}
70
+
animate();
71
+
```
72
+
73
+
## About Zdog
74
+
75
+
Hi, [Dave here](https://desandro.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.
76
+
77
+
Zdog is directly inspired by [Dogz](https://en.wikipedia.org/wiki/Petz), 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://www.youtube.com/watch?v=6lKSn_cHw5k) Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.
78
+
79
+
Zdog uses the same principal. It renders all shapes using the 2D drawing APIs in either `<canvas>` or `<svg>`. Spheres are actually dots. Toruses are actually circles . Capsules are actually thick lines. It’s a simple, but effective trick.
80
+
81
+
Zdog is pronounced "Zee-dog" in American parlance or "Zed-dog" in British.
82
+
83
+
### Beta!
84
+
85
+
Zdog 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://github.com/metafizzy/zdog/issues).
86
+
87
+
---
88
+
89
+
Licensed MIT
+25
bower.json
+25
bower.json
···
1
+
{
2
+
"name": "zdog",
3
+
"description": "Round, flat, designer-friendly pseudo-3D engine",
4
+
"main": "js/index.js",
5
+
"authors": [
6
+
"David DeSandro"
7
+
],
8
+
"license": "MIT",
9
+
"keywords": [
10
+
"3D",
11
+
"canvas",
12
+
"svg"
13
+
],
14
+
"homepage": "https://zzz.dog",
15
+
"ignore": [
16
+
"**/.*",
17
+
"node_modules",
18
+
"bower_components",
19
+
"test",
20
+
"tests",
21
+
"package.json",
22
+
"demo",
23
+
"demos"
24
+
]
25
+
}
+3
demo/flex-size/flex-size.js
+3
demo/flex-size/flex-size.js
+39
index.js
+39
index.js
···
1
+
/*!
2
+
* Zdog v0.1.0
3
+
* Round, flat, designer-friendly pseudo-3D engine
4
+
* Licensed MIT
5
+
* https://zzz.dog
6
+
* Copyright 2019 Metafizzy
7
+
*/
8
+
9
+
( function( root, factory ) {
10
+
// universal module definition
11
+
/* globals define, module, require */
12
+
var depends = [
13
+
'./utils',
14
+
'./canvas-renderer',
15
+
'./svg-renderer',
16
+
'./vector',
17
+
'./anchor',
18
+
'./path-command',
19
+
'./shape',
20
+
'./group',
21
+
'./rect',
22
+
'./rounded-rect',
23
+
'./ellipse',
24
+
'./polygon',
25
+
'./hemisphere',
26
+
'./cylinder',
27
+
'./cone',
28
+
'./box',
29
+
];
30
+
if ( typeof define == 'function' && define.amd ) {
31
+
// AMD
32
+
define( depends, factory );
33
+
} else if ( typeof module == 'object' && module.exports ) {
34
+
// CommonJS
35
+
module.exports = factory.apply( root, depends.map( require ) );
36
+
}
37
+
})( window, function factory( Zdog ) {
38
+
return Zdog;
39
+
});
+24
package.json
+24
package.json
···
1
+
{
2
+
"name": "zdog",
3
+
"version": "0.1.0",
4
+
"description": "Round, flat, designer-friendly pseudo-3D engine",
5
+
"main": "js/index.js",
6
+
"scripts": {
7
+
"test": "echo \"Error: no test specified\" && exit 1"
8
+
},
9
+
"repository": {
10
+
"type": "git",
11
+
"url": "git+https://github.com/metafizzy/zdog.git"
12
+
},
13
+
"keywords": [
14
+
"3D",
15
+
"canvas",
16
+
"svg"
17
+
],
18
+
"author": "David DeSandro",
19
+
"license": "MIT",
20
+
"bugs": {
21
+
"url": "https://github.com/metafizzy/zdog/issues"
22
+
},
23
+
"homepage": "https://zzz.dog"
24
+
}