ZIM with Zdog 3D – a good match for the Canvas with JavaScript, CreateJS and ZIMjs

Zdog at http://zzz.dog is a nice easy pseudo 3D engine great for quick code based modeling.  The format is very similar to ZIM and it is easy to bring in to a ZIM app through the ZIM Tag().  Here is a CodePen example of controlling Zdog properties with ZIM components and controls:

The Tag() code looks like this:

const dogTag = new Tag(300,300)
.center()
.mov(0,-80)
.add(“<canvas id=dog width=300 height=300></canvas>”);

dogTag.tag.style.pointerEvents = “none”;

And then here is what Zdog looks like:

const dog = new Zdog.Illustration({
element: “#dog”,
});
const hemi = new Zdog.Hemisphere({
addTo: dog,
diameter: 300,
stroke: false,
color: blue,
backface: green,
});

You can also just use Zdog controls which are very nice orbit-like controls.  Set dragRotate: true on the Illustration.  In doing so, the Zdog canvas which is overlaid on ZIM will have control and you will not be able to interact with ZIM directly underneath.

ZIM also works with ThreeJS which is perhaps a larger undertaking.  See the THREEjs example here:  https://zimjs.com/three/ or some basics here: https://zimjs.com/bits/view/three.html

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

• LEARN tutorials on how to start and code in ZIM
• CODE ZIM Frame template and code context
• DOCS the objects and commands all defined
• NEWS latest features and articles
• ABOUT features, applications, archives, reviews, etc.
• EXAMPLES sample projects created in ZIM