heerich

把 3D 体素场景变成 SVG 矢量图，零依赖、可编辑

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 17 🐛 待处理 1 👀 关注 2

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 631

维护状态活跃

是否开源开源

定价模式 🏷️完全免费开源项目，MIT许可证，完全免费，无付费版本。

项目预览

项目数据

分类设计创意

开发团队meodai

官网地址https://meodai.github.io/heerich

GitHubhttps://github.com/meodai/heerich

定价模式🏷️完全免费

价格说明开源项目，MIT许可证，完全免费，无付费版本。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言JavaScript

技术栈/模型3d,generative-art,isometric,isometric-graphics,oblique-projection,svg

GitHub 星标★ 631

上线时间2026-03-28 00:00:00

代码更新2026-11-07

仓库体积1.4 MB

本站数据更新2026-11-09

维护状态活跃

收录时间2026-08-09

浏览次数6

项目介绍

heerich 是一个极简的 3D 体素场景渲染引擎，专门将体素模型输出为 SVG 矢量图形。它解决了在 Web 环境中生成可缩放、可编辑的等距或透视风格 3D 插画的问题，无需依赖 WebGL 或重型 3D 库。核心能力包括体素布尔运算（并集、交集、差集）、斜轴投影与透视相机切换，以及零依赖的纯 JavaScript 实现。项目灵感源自艺术家 Erwin Heerich 的几何纸板雕塑，因此输出风格带有几何构成感和手工纸艺质感。它适合用于生成技术图解、几何艺术创作、简单游戏素材或数据可视化中的 3D 图标，所有输出均为标准 SVG，便于后续在浏览器或设计工具中编辑。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 631

技术标签

3d generative-art svg

使用教程

难度：进阶约 30 分钟部署方式：本地安装 5 步

环境要求

Node.js 或浏览器
基础三维坐标概念

安装与启动步骤

1装包

它是个很小的 npm 包，零运行时依赖。
```
npm install heerich
```
2建场景

实例化时给格子尺寸与相机类型，四种投影按需选。
```
new Heerich({ tile: 40, camera: { type: 'oblique', angle: 45, distance: 15 } })
```
3堆体素

用几何体描述加进场景，每个面可以单独给填充与描边。
```
h.applyGeometry({ type: 'box', position: [0, 0, 0], size: [5, 4, 5] })
```
4挖掉一块

做减法就能开门开窗，这是它比手写 SVG 省事的地方。
```
h.removeGeometry({ type: 'box', position: [2, 1, 0], size: [1, 3, 1] })
```
5导出矢量图

输出是纯 svg 字符串，直接塞进页面或存成文件。
```
document.body.innerHTML = h.toSVG()
```