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

<glyph-camera rot-x="23" zoom="1.3">
  <glyph-scene>
    <glyph-orbit-controls drag wheel></glyph-orbit-controls>
    <glyph-mesh geometry="dodecahedron">
      <glyph-hotspot at="0,1,0"></glyph-hotspot>
    </glyph-mesh>
  </glyph-scene>
</glyph-camera>

import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react";

export function App() {
  return (
    <GlyphCamera rotX={23} zoom={1.3}>
      <GlyphScene>
        <GlyphOrbitControls drag wheel />
        <GlyphMesh geometry="dodecahedron">
          <GlyphHotspot at={[0, 1.2, 0]} onClick={() => alert("vertex")} />
        </GlyphMesh>
      </GlyphScene>
    </GlyphCamera>
  );
}

<template>
  <GlyphCamera :rot-x="23" :zoom="1.3">
    <GlyphScene>
      <GlyphOrbitControls drag wheel />
      <GlyphMesh geometry="dodecahedron">
        <GlyphHotspot :at="[0, 1.2, 0]" @click="onVertex" />
      </GlyphMesh>
    </GlyphScene>
  </GlyphCamera>
</template>
<script setup lang="ts">
import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue";
function onVertex() { alert("vertex"); }
</script>