Show HN：一个ASCII 3D渲染引擎

# glyphcss：面向 DOM 的 ASCII 多边形网格渲染器 来源：https://glyphcss.com/ >在 DOM 中渲染带纹理的 3D 网格，使用 ASCII。无需 WebGL。无需 ` `。每个场景都是一个单一的 ` `，你可以检查、悬停和点击。 >支持 OBJ、glTF、GLB 和 MagicaVoxel VOX 格式——包括 UV 纹理和材质颜色。适用于原生 JS、React 和 Vue。 运行环境：原生 JS、React、Vue [ 安装 ] ┌─包管理器─┐ 终端 ```text $ npm install glyphcss ``` 终端 ```text $ npm install @glyphcss/react ``` 终端 ```text $ npm install @glyphcss/vue ``` ┌─CDN─┐ index.html ```html <script src="https://unpkg.com/glyphcss"></script> ``` [ 工作原理 ] >glyphcss 加载 OBJ、glTF、GLB、STL 和 VOX 网格文件。每个场景渲染到一个单一的 ` `：光栅化器投影每个多边形，填充一个 `cols × rows` 字符网格，并在每次渲染时将一个字符串写入 `textContent`。没有针对每个多边形的 DOM 节点，也没有 `matrix3d`。 >交互性是可选的且稀疏的：在任何 3D 锚点放置一个 ` `，glyphcss 会在投影的单元格上方发射一个绝对定位的 ` `。真实的 DOM 事件、真实的 `:hover` 样式、真实的 `role="button"` 可访问性——无需每个多边形一个 DOM 节点。 [ [→ 核心概念](https://glyphcss.com/core-concepts) ] [ 你好，世界 ] >glyphcss 提供自定义元素（`<glyph-camera>`、`<glyph-scene>`）、命令式 `createGlyphScene` API，以及可选的 React / Vue 绑定。使用适合你技术栈的入口点。 ```html <glyph-scene> <glyph-camera> <glyph-orbit-controls> <glyph-mesh src="models/cube.glb"> <glyph-hotspot position="0 1 0" label="顶点" on:click="alert('顶点')" /> </glyph-mesh> </glyph-orbit-controls> </glyph-camera> </glyph-scene> ``` ```jsx import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react"; export function App() { return ( <GlyphScene> <GlyphCamera> <GlyphOrbitControls> <GlyphMesh src="models/cube.glb"> <GlyphHotspot position={[0, 1, 0]} label="顶点" onClick={() => alert("顶点")} /> </GlyphMesh> </GlyphOrbitControls> </GlyphCamera> </GlyphScene> ); } ``` ```vue <script setup> import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue"; function onVertex() { alert("顶点"); } </script> <template> <GlyphScene> <GlyphCamera> <GlyphOrbitControls> <GlyphMesh src="models/cube.glb"> <GlyphHotspot :position="[0, 1, 0]" label="顶点" @click="onVertex" /> </GlyphMesh> </GlyphOrbitControls> </GlyphCamera> </GlyphScene> </template> ``` [ [→ API 参考](https://glyphcss.com/api/headless) ]