什么是 Zdog？
Zdog 是一个轻量级的 3D 动画库，使用简单的 API 创建 SVG 3D 图形。它特别适合那些希望在网页上实现 3D 动画效果的开发者，而不需要深入了解复杂的 3D 编程知识。Zdog 的设计理念是直观易用，旨在让每个人都能创造出美丽的 3D 动画。
Zdog 的基本概念
在深入使用 Zdog 之前，我们先了解几个基本概念：
-
Illustration（插图）：Zdog 的核心对象，所有的形状和动画都添加到这个对象中。
-
Shape（形状）：Zdog 提供了多种基础形状，如：
Zdog.Shape：基本形状。Zdog.Box：立方体。Zdog.Ellipse：椭圆。Zdog.Rect：矩形。Zdog.Cylinder：圆柱体。Zdog.Hemisphere：半球体。
-
Group（组）：通过
Zdog.Group，你可以将多个形状组合在一起，以便于统一控制。 -
Animation（动画）：Zdog 提供了简单的动画框架，允许用户定义动画循环。
-
Canvas（画布）：Zdog 使用 HTML 的
<canvas>元素进行渲染，支持在网页上动态展示 3D 效果。
安装 Zdog
Zdog 的使用非常简单，你只需要在你的 HTML 文件中引入 Zdog 库。可以通过 CDN 直接引入：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zdog 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zdog/1.1.0/zdog.dist.min.js"></script>
<style>
body { margin: 0; }
canvas { background: #fff; }
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// Zdog 代码将在这里添加
</script>
</body>
</html>
创建基本形状
在 <script> 标签内，你可以开始创建 Zdog 对象。以下是创建一个简单的 3D 方块的示例：
// 创建 Zdog 画布
const canvas = document.getElementById('canvas');
const illo = new Zdog.Illustration({
element: canvas,
});
// 创建一个方块
const box = new Zdog.Box({
addTo: illo,
width: 80,
height: 80,
depth: 80,
stroke: 20, // 边框宽度
color: '#E62', // 颜色
fill: true, // 填充
});
// 开始动画
function animate() {
illo.updateRenderGraph(); // 更新渲染图形
requestAnimationFrame(animate); // 请求下一帧
}
// 开始动画循环
animate();
在上述代码中，我们首先创建了一个 Zdog 的 Illustration 实例，然后在其中添加了一个方块。updateRenderGraph 方法用于更新画布上的图形。
添加旋转动画
通过更新每一帧的 rotate 属性，我们可以使方块旋转。以下是修改后的代码示例：
// 创建 Zdog 画布
const canvas = document.getElementById('canvas');
const illo = new Zdog.Illustration({
element: canvas,
});
// 创建一个方块
const box = new Zdog.Box({
addTo: illo,
width: 80,
height: 80,
depth: 80,
stroke: 20,
color: '#E62',
fill: true,
});
// 开始动画
function animate() {
box.rotate.x += 0.03; // 沿 x 轴旋转
box.rotate.y += 0.02; // 沿 y 轴旋转
illo.updateRenderGraph(); // 更新渲染图形
requestAnimationFrame(animate); // 请求下一帧
}
// 开始动画循环
animate();
在这个例子中，box.rotate.x 和 box.rotate.y 的值在每帧中不断增加，从而实现旋转效果。
组合形状
Zdog 允许你组合多个形状。你可以创建一个组，将多个形状添加到组中，以便同时控制它们。以下是一个组合多个形状的示例：
// 创建 Zdog 画布
const canvas = document.getElementById('canvas');
const illo = new Zdog.Illustration({
element: canvas,
});
// 创建一个组
const group = new Zdog.Group({
addTo: illo,
});
// 添加多个方块到组中
for (let i = 0; i < 5; i++) {
new Zdog.Box({
addTo: group,
width: 30,
height: 30,
depth: 30,
translate: { x: (i - 2) * 40, y: 0, z: 0 },
stroke: 10,
color: `hsl(${i * 60}, 100%, 50%)`,
fill: true,
});
}
// 开始动画
function animate() {
group.rotate.y += 0.01; // 组的旋转
illo.updateRenderGraph(); // 更新渲染图形
requestAnimationFrame(animate); // 请求下一帧
}
// 开始动画循环
animate();
在这个例子中，我们创建了一个 Group，并在其中添加了多个不同颜色的方块。然后通过旋转组来实现整体动画效果。
进阶功能
Zdog 不仅支持基本形状和动画，还允许使用一些高级功能，如：
- 阴影和光照：通过添加光源和设置颜色，可以创建更复杂的光照效果。
- 形状的渐变色：可以使用渐变色填充形状，增加视觉效果。
- 变形（Morphing）：Zdog 允许在不同形状之间进行平滑过渡，通过定义关键帧来实现动画效果。
- 用户交互：可以通过鼠标事件或触摸事件实现用户交互，例如旋转、缩放和拖拽等。
实用示例
以下是一个结合了多个进阶功能的完整示例：
// 创建 Zdog 画布
const canvas = document.getElementById('canvas');
const illo = new Zdog.Illustration({
element: canvas,
});
// 创建一个光源
const light = new Zdog.Shape({
addTo: illo,
translate: { x: 100, y: -100, z: 100 },
stroke: 10,
color: '#FFC700', // 光源颜色
});
// 创建一个渐变色的球体
const sphere = new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#6EDC9B',
fill: true,
});
// 使球体变形
function morphSphere() {
sphere.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
sphere.diameter = Math.random() * 100 + 40;
}
// 开始动画
function animate() {
light.rotate.y += 0.01; // 光源旋转
sphere.rotate.x += 0.02; // 球体旋转
morphSphere(); // 变形
illo.updateRenderGraph(); // 更新渲染图形
requestAnimationFrame(animate); // 请求下一帧
}
// 开始动画循环
animate();
在这个示例中，我们添加了一个光源并使其旋转，同时让球体的颜色和大小随机变化，增加了动画的趣味性和复杂性。
