无需 WebGL 和 ＜canvas＞！glyphcss 借助 ASCII 在 DOM 渲染带纹理 3D 网格

01 glyphcss 简介我们可以借助 glyphcss利用 ASCII 在 DOM 中渲染带纹理的 3D 网格。它无需 WebGL也无需 。每个场景都是一个单独的 可对其进行检查、悬停和点击操作。同时它支持 OBJ、glTF、GLB 和 MagicaVoxel VOX 文件格式包括 UV 纹理和材质颜色还可与原生 JavaScript、React 和 Vue 配合使用。02 运行环境与安装方式glyphcss 的运行环境为原生 JavaScript、React、Vue。其安装方式有两种一是通过包管理器终端命令分别为 $ npm install glyphcss、$ npm install glyphcss/react、$ npm install glyphcss/vue二是通过 CDN在 index.html 文件中添加 。03 工作原理glyphcss 可加载 OBJ、glTF、GLB、STL 和 VOX 网格文件。每个场景都会渲染到一个单独的 中光栅化器会投影每个多边形填充一个 列数 × 行数 的字符网格并在每次渲染时将一个字符串写入 textContent。这里没有针对每个多边形的 DOM 节点也不使用 matrix3d。其交互功能是可选且轻量级的在任意 3D 锚点放置一个 glyphcss 会在投影单元格上方生成一个绝对定位的 它支持真实的 DOM 事件、真实的 :hover 样式以及真实的 rolebutton 无障碍访问功能而无需为每个多边形创建一个 DOM 节点。04 快速上手示例glyphcss 提供了自定义元素、、命令式的 createGlyphScene API 以及可选的 React / Vue 绑定我们可以根据自己的技术栈选择合适的入口。以下是不同技术栈的示例代码原生 JavaScript、React、Vuescript typemodule srchttps://esm.sh/glyphcss/elements/scriptglyph-camera rot-x23 zoom1.3 glyph-scene glyph-orbit-controls drag wheel/glyph-orbit-controls glyph-mesh geometrydodecahedron glyph-hotspot at0,1,0/glyph-hotspot /glyph-mesh /glyph-scene/glyph-cameraReactimport { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from glyphcss/react;export function App() { return ( GlyphCamera rotX{23} zoom{1.3} GlyphScene GlyphOrbitControls drag wheel / GlyphMesh geometrydodecahedron GlyphHotspot at{[0, 1.2, 0]} onClick{() alert(顶点)} / /GlyphMesh /GlyphScene /GlyphCamera );}Vuetemplate GlyphCamera :rot-x23 :zoom1.3 GlyphScene GlyphOrbitControls drag wheel / GlyphMesh geometrydodecahedron GlyphHotspot :at[0, 1.2, 0] clickonVertex / /GlyphMesh /GlyphScene /GlyphCamera/templatescript setup langtsimport { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from glyphcss/vue;function onVertex() { alert(顶点); }/script此外还有 glyphcss v1.0遵循 MIT 许可证正常运行时间为无限。