repository·master·Indexed 27 days ago
https://github.com/metafizzy/zdogA round, flat, designer-friendly pseudo-3D engine that renders simple 3D models using 2D drawing APIs such as Canvas or SVG. It provides a system for creating 3D scenes via Zdog.Illustration, utilizing shape constructors like Zdog.Ellipse, Zdog.Rect, Zdog.Box, Zdog.Cylinder, and Zdog.Cone, and organizing them with Zdog.Group.
You can include Zdog in your project using several methods:
CDN Link directly to the minified version via unpkg:
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>Package Managers
npm install zdogbower install zdogDirect Download
You can download the minified (zdog.dist.min.js) or un-minified (zdog.dist.js) files directly from unpkg.
To create a 3D scene, initialize a Zdog.Illustration and attach it to an HTML element. You can then add shapes like Zdog.Ellipse or Zdog.Rect to the illustration. To see movement, use requestAnimationFrame to update the illustration's rotation and call illo.updateRenderGraph() in each frame.
let isSpinning = true;
let illo = new Zdog.Illustration({
element: '.zdog-canvas',
zoom: 4,
dragRotate: true,
// stop spinning when drag starts
onDragStart: function() {
isSpinning = false;
},
});
// circle
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
translate: { z: 10 },
stroke: 5,
color: '#636',
});
// square
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true,
});
function animate() {
illo.rotate.y += isSpinning ? 0.03 : 0;
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
animate();Zdog.Group to nest shapes and apply transformations (like rotation, translation, or scaling) to multiple objects simultaneously. Groups can be added to an Illustration or other groups.Illustration or a Group. These include 2D shapes like Rect and Ellipse, and 3D primitives like Box, Cylinder, and Cone.Zdog.Illustration class. An illustration acts as the container for all shapes, groups, and rendering settings. You must create an instance of Zdog.Illustration to begin building a 3D scene.Zdog exposes its rendering engines and internal utility classes through the main namespace for advanced customization and interaction.
Zdog.CanvasRenderer
Zdog.SvgRenderer
Zdog.Vector
Zdog.Anchor
Zdog.Dragger
Zdog.PathCommandThe following constructors are available via the Zdog namespace for creating geometric primitives and complex shapes:
Zdog.Illustration
Zdog.Shape
Zdog.Group
Zdog.Rect
Zdog.RoundedRect
Zdog.Ellipse
Zdog.Polygon
Zdog.Hemisphere
Zdog.Cylinder
Zdog.Cone
Zdog.Box