DeSandro explains what Zdog is about on the library’s dedicated website:
Zdog is a 3D JavaScript engine for
<canvas>
and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
In other words, you can design, display and animate SVG or <canvas>
-based 3D models.
Zdog is small (2,100 lines of code for the entire library, 28KB minified) and developer-friendly (you can quickly implement it using its straightforward, declarative API).
As is the case with most JavaScript libraries, you can include Zdog in your project by…
https://unpkg.com/[email protected]/dist/zdog.dist.min.js
(https://unpkg.com/[email protected]/dist/zdog.dist.js
for the unminified version);https://unpkg.com/[email protected]/dist/zdog.dist.min.js
npm install zdog
if you’re using npm
Here’s the official Hello World
demo on CodePen to get you up and running with the library right away:
See the Pen Zdog – hello world canvas by Dave DeSandro (@desandro)
on CodePen.
DeSandro offers an awesome Getting Started guide, which I will use to give you an idea of how the library works and which results you can expect from it.
Let’s begin by creating a static SVG circle.
The HTML is just an SVG element you can use as a wrapper. If you prefer creating your Zdog graphic using the canvas element instead, simply replace the svg
tag with the canvas
tag:
<svg id="circle" width="100" height="100"></svg>
Now a sprinkle of CSS on the SVG element:
#circle {
background-color: #081d3f;
width: 100vw;
height: 100vh;
}
Finally, the JavaScript:
/* create an instance of the Zdog
Illustration class */
let circle = new Zdog.Illustration({
element: '#circle'
})
/* create an instance of the
Zdog shape class Ellipse */
new Zdog.Ellipse({
// add the shape to the circle
addTo: circle,
// set more properties
diameter: 20,
stroke: 20,
color: '#ccc'
})
// display the scene
circle.updateRenderGraph()
To draw graphics, you need to create instances of Zdog classes. Illustration
is the top-level class that deals with the <canvas>
or <svg>
element. The shapes that you create for your scene will be children of the Illustration
class instance.
Ellipse
is a shape class. You create a new instance of the Ellipse
shape class and add it to your container, circle
in this case, using the addTo()
method. Zdog offers lots of predefined shapes like rect
, polygon
, and more. To create your custom shape, use the Shape
class and define its path points. You can add other properties to your shape like diameter
, stroke
, and color
. For more properties, check out Zdog’s API for the Shape class.
To render your graphic on the screen, call the updateRenderGraph()
method on your circle
instance.
Here’s what your circle should look like:
See the Pen Zdog Static CircleExample by Maria Antonietta Perna (@antonietta)
on CodePen.
Animation requires that your circle
instance be re-rendered on every frame. For this, you use .requestAnimationFrame()
like this:
function animate() {
/* incrementally increase
the rotation on the y axis */
circle.rotate.y += 0.03
// re-render the graphic
circle.updateRenderGraph()
// animate the next frame
requestAnimationFrame(animate)
}
animate()
Zdog quickly lets you add dragging functionality to your graphic. Here’s what you need to do if you’d like to stop the animation when dragging is starting and resume the animation once the dragging is over.
First, set a isSpinning
flag to true
:
let isSpinning = true
Next, go back to your circle
instance of the Illustration
class and set the dragRotate
property to true
. Further, switch the flag inside the onDragStart()
and onDragEnd()
methods, so that when the dragging starts the flag is set to false
, and when the dragging ends it gets set back to true
:
let circle = new Zdog.Illustration({
element: '#circle',
dragRotate: true,
onDragStart() {
isSpinning = false
},
onDragEnd() {
isSpinning = true
}
})
Finally, adjust the animate()
function by adding this conditional statement at the top, so that the rotation takes place only if the isSpinning
flag is set to true
:
if(isSpinning) {
circle.rotate.y += 0.03
}
Here’s the working demo, check it out:
See the Pen Zdog Animation and Dragging Example by Maria Antonietta Perna (@antonietta)
on CodePen.
This is only the tip of the iceberg of all the amazing graphics and animations you can create with Zdog. You can also mix and match it with other libraries like GreenSock for even more stunning results.
Here’s a bunch of resources and demo collections where you can find out more about this latest addition to the design and animation space done in code:
Where are your Zdog creations? Lots of places out there to show them off, don’t you think?
30s ad
Unity® Game Development Mastery Build 2D & 3D Games
☞ http://academy.learnstartup.net/p/Ljl1U6bNs
Unity 2D and 3D Game Development - Build 10 Games in Unity
☞ http://academy.learnstartup.net/p/n7J9kImM-
Concepts in Unity 3D Game Programming
☞ http://academy.learnstartup.net/p/H1_sQ3iGg
Complete Game Design & Development : 20+ 2D & 3D Projects
☞ http://academy.learnstartup.net/p/kOKxOjyv9
Build 2D, 3D, and VR Games in Unity and Unreal Masterclass
☞ http://academy.learnstartup.net/p/ryaHCq4iG
Make a Fun 3D Game and Publish it with Unity 2019
☞ http://academy.learnstartup.net/p/OAAbmf03e
☞ Developing 2D & 3D Games using C# and Unity for Windows
☞ Create a Platformer Game with JavaScript - Full Tutorial
☞ How To Learn Unreal Engine? (Game Development)
☞ 3D Game Development in Python with Ursina
☞ Ecommerce Furniture App UI Design - Flutter UI - Speed Code