Библиотека glyphcss позволяет добавлять 3D-сцены прямо в HTML с помощью кастомных элементов. Для vanilla JS достаточно подключить скрипт через esm.sh и использовать теги <glyph-camera>, <glyph-scene>, <glyph-mesh>, <glyph-hotspot> и <glyph-orbit-controls>. В примере собирается простая сцена: камера с поворотом 23° по оси X и зумом 1.3, сцена с орбитальным управлением (drag и колесо), mesh-додекаэдр и на нём hotspot с координатами (0, 1, 0). При клике на hotspot выводится alert("vertex").
Для React компоненты импортируются из @glyphcss/react — GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot. Код почти идентичен, только атрибуты передаются как пропсы (например rotX={23}, at={[0, 1.2, 0]}), а обработчик клика — через onClick.
Для Vue — импорт из @glyphcss/vue, атрибуты с префиксом : (:rot-x="23", :at="[0, 1.2, 0]"), событие клика — @click="onVertex", сама функция onVertex объявлена в <script setup lang="ts">.
Таким образом, glyphcss — кросс-фреймворковая библиотека с одинаковым набором компонентов для работы с 3D-графикой. В конце статьи дана ссылка на API reference.