glyphcss 

glyphcss 是一个极具创意的开源项目，它将 3D 网格数据直接投影到 HTML 的 <pre> 元素中，利用等宽字符构建出独特的 ASCII 艺术风格 3D 场景。与传统的 WebGL 或 Canvas 渲染不同，glyphcss 完全摒弃了复杂的图形 API，仅通过操作文本内容即可实现流畅的 3D 交互体验。

核心亮点：极简架构，极致轻量

• 纯 DOM 渲染：无需 WebGL、Canvas 或大量的 DOM 节点。渲染器遍历所有多边形，填充一个 cols × rows 的字符网格，并将最终结果作为单个字符串写入 <pre>.textContent。这种机制极大地降低了内存占用和渲染开销。
• 多格式支持：原生支持加载 OBJ、glTF、GLB 以及 MagicaVoxel 的 .vox 文件，兼容性强。
• 多种渲染模式：
  • 线框模式 (Wireframe)：展示模型的骨架结构。
  • 实体模式 (Solid)：通过字符密度模拟光影和表面。
  • 体素模式 (Voxel)：还原 MagicaVoxel 风格的块状美学。
• 可定制调色板：用户可以自由切换字符集和颜色方案，打造个性化的视觉风格。

技术渊源：站在巨人的肩膀上

glyphcss 派生自著名的 polycss 项目。它完整保留了 polycss 的核心数学库，包括：

• 网格数学运算
• 文件格式解析器
• 场景组合树管理
• 相机数学模型
• 输入控制系统

在此基础上，glyphcss 重写了后端渲染逻辑，从“为每个多边形创建 CSS 变换节点”进化为“高效的字符网格光栅化”，实现了性能与表现力的双重提升。

快速开始

1. 安装

你可以根据项目需求选择相应的包：

# Vanilla JS / Web Components
npm install glyphcss

# React
npm install @glyphcss/react

# Vue 3
npm install @glyphcss/vue

或者直接从 CDN 加载自定义元素：

<script type="module" src="https://esm.sh/glyphcss/elements"></script>

2. 最小化示例 (Web Components)

只需几行代码即可创建一个可交互的 3D 场景：

<glyph-camera rot-x="65" rot-y="45">
  <glyph-scene>
    <!-- 轨道控制器，支持鼠标拖拽旋转 -->
    <glyph-orbit-controls></glyph-orbit-controls>
    <!-- 加载 GLB 模型 -->
    <glyph-mesh src="/cottage.glb"></glyph-mesh>
  </glyph-scene>
</glyph-camera>

3. 框架集成

在 React 或 Vue 中，你可以使用声明式的组件模型：

• <GlyphCamera>：控制视点和相机参数。
• <GlyphScene>：配置光栅化选项、光照及渲染模式。
• <GlyphMesh>：加载或接收多边形数据。

应用场景

• 复古风格网页设计：为网站增添独特的极客美学和怀旧感。
• 低带宽环境可视化：由于传输的是文本而非图像或二进制图形数据，非常适合网络条件受限的场景。
• 创意编程与艺术装置：探索字符与空间关系的无限可能。
• 终端模拟器增强：在基于 Web 的终端应用中嵌入简单的 3D 预览。