Zdog -岩石教程

特点

简约的 3D 图形：Zdog 采用扁平设计，能够轻松绘制和操作简单的 3D 形状。
轻量级：整个库的体积小，加载快速，适合在各种网络环境下使用。
动画支持：内置动画功能，可以为 3D 对象添加动态效果。
易于使用的 API：Zdog 提供直观的 API，开发者可以快速上手并实现各种 3D 场景。
跨浏览器兼容：支持所有现代浏览器，确保在不同平台上的一致表现。

使用场景

数据可视化：适用于创建简单的 3D 数据可视化图表和图形。
互动网站：为网站添加互动的 3D 动画和效果，提升用户体验。
游戏开发：用于开发轻量级的网页游戏和动画场景。
教育和演示：制作教育动画和演示文档，帮助解释复杂的概念和流程。

安装方式

使用 npm 安装 Zdog：

npm install zdog

或通过 CDN 引入：

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

使用示例

基础使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zdog Example</title>
</head>
<body>
  <canvas id="zdog-canvas" width="240" height="240"></canvas>
  <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
  <script>
    // 创建一个 Zdog 场景
    const illo = new Zdog.Illustration({
      element: '#zdog-canvas',
      rotate: { y: -Zdog.TAU/8 },
    });

    // 添加一个基本形状
    new Zdog.Box({
      addTo: illo,
      width: 80,
      height: 80,
      depth: 80,
      stroke: false,
      color: '#C25',
      leftFace: '#EA0',
      rightFace: '#E62',
      topFace: '#ED0',
      bottomFace: '#636',
    });

    // 渲染场景
    illo.updateRenderGraph();
  </script>
</body>
</html>

常用 API 介绍

Zdog.Illustration: 创建一个 Zdog 场景。

const illo = new Zdog.Illustration({
  element: '#zdog-canvas',
  rotate: { y: -Zdog.TAU/8 },
});

Zdog.Shape: 创建一个基本形状。

new Zdog.Shape({
  addTo: illo,
  stroke: 20,
  color: '#636',
});

Zdog.Box: 创建一个盒子形状。

new Zdog.Box({
  addTo: illo,
  width: 80,
  height: 80,
  depth: 80,
  stroke: false,
  color: '#C25',
  leftFace: '#EA0',
  rightFace: '#E62',
  topFace: '#ED0',
  bottomFace: '#636',
});

Zdog.TAU: 常量，用于表示 2π。
```
rotate: { y: -Zdog.TAU/8 },
```
updateRenderGraph: 更新并渲染场景。
```
illo.updateRenderGraph();
```

高级用法

动画

Zdog 支持简单的动画，可以使用 requestAnimationFrame 来创建循环动画：

function animate() {
  illo.rotate.y += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}

animate();

复杂形状

Zdog 允许组合多个基本形状来创建复杂的 3D 对象：

const illo = new Zdog.Illustration({
  element: '#zdog-canvas',
  rotate: { y: -Zdog.TAU/8 },
});

const head = new Zdog.Shape({
  addTo: illo,
  stroke: 80,
  color: '#636',
});

const eye = new Zdog.Shape({
  addTo: head,
  translate: { x: -20, y: -10, z: 40 },
  stroke: 10,
  color: '#000',
});

illo.updateRenderGraph();

官方资料

更多资料可以查看官方文档