Zdog Studio — Pseudo 3D Editor For Zdog

Visit Zdog 3D Studio

Zdog Studio is a powerful, interactive, web-based 3D modeling and animation editor built on top of the popular Zdog pseudo-3D engine. It provides a visual interface for creating 3D meshes, 2D shapes, custom paths, keyframe animations, and exporting production-ready JavaScript code, SVG, or PNG scenes.

Features

• Interactive Modeling: Click and drag to add, move, rotate, scale, clone, or delete 3D shapes (Box, Cylinder, Cone, Hemisphere) and 2D shapes (Ellipse, Rect, RoundedRect, Polygon).
• Free-form Drawing (Pen Tool): Click directly on the viewport canvas to sketch custom shape paths and easily edit/close them.
• Auto-Color Selection: Every new shape or pen path automatically receives a distinct, vibrant color upon creation to distinguish items, customizable later in the sidebar.
• Visual Keyframe Timeline: Create motion tween keyframes across 120 frames to animate translation, rotation, and scaling of objects. Play, pause, or slide to inspect animations in real-time.
• "Import JS" Code compiler: Paste raw imperative Zdog JavaScript code from CodePen or other sources. The engine parses it into an editable, visual scene graph structure instantly.
• Dynamic Re-compiling Code View: View and copy/download clean, standalone ES6 JavaScript code as you modify the scene.
• Exporting Options: Export clean SVG files, high-resolution PNG images, or save/load your workspace using the native .zd3d project format.
• Adaptive Dark/Light Theme: Sleek Spline-style dark mode and a playful neo-brutalist light mode toggle.

Getting Started

Simply open index.html in your browser, or spin up a local development server:

npx http-server neu

Project Structure

Zdog Studio/
├── index.html              # Main editor UI
├── script/
│   ├── neu.js              # Application controller (main logic)
│   ├── zdog.dist.min.js    # Zdog engine library
│   └── lucide.min.js       # Lucide icon library
├── style/
│   └── styles.css          # Spline-style dark/light theme
├── assets/
│   ├── favicon.png         # App favicon
│   └── zdog3dstudio.gif    # Demo animation
├── wasmer.toml             # Wasmer static web server deployment config
└── README.md

No build tools required — open index.html directly in your browser, or serve with a local server.

Built With

• HTML5 & CSS3
• Vanilla ES6 JavaScript
• Zdog engine (by David DeSandro)
• Lucide Icons
• Wasmer (web deployment)