Introduction
Imagine un monde où tu peux créer des rendus 3D complexes directement dans ton DOM sans jamais toucher à WebGL ou <canvas>. C'est exactement ce que propose GlyphCSS, un moteur de rendu 3D en ASCII qui utilise des balises HTML standard comme <pre> pour projeter des scènes 3D. Simple et élégant, il s'intègre parfaitement avec des frameworks populaires comme React et Vue.
Le fonctionnement de GlyphCSS
GlyphCSS se distingue par sa capacité à rendre des maillages 3D en utilisant uniquement des caractères ASCII. Chaque scène est encapsulée dans une balise <pre>, ce qui permet aux développeurs d'inspecter, de survoler et de cliquer sur les éléments. Cela signifie qu'il n'y a pas de nœuds DOM par polygone ou de matrices 3D complexes à gérer.
Support des formats
GlyphCSS est compatible avec une variété de formats de fichiers de maillage, y compris OBJ, glTF, GLB, et MagicaVoxel VOX. Cela élargit considérablement la gamme de modèles 3D que tu peux intégrer dans ton projet. De plus, il prend en charge les textures UV et les couleurs des matériaux, ajoutant une dimension supplémentaire à tes scènes.
Intégration facile
Que tu utilises vanilla JS, React ou Vue, l'intégration de GlyphCSS est simple. Voici un exemple de code pour chaque environnement :
Vanilla JS
``html <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> ``
React
```jsx 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> ); } ```
Vue
```vue <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> ```
Cas d'usage et potentiel
L'un des principaux avantages de GlyphCSS est sa légèreté et sa facilité d'intégration. Pour les développeurs cherchant à ajouter des éléments interactifs 3D à leurs sites web sans la surcharge de WebGL, GlyphCSS offre une alternative innovante. Imagine des présentations de produits en 3D, des jeux légers ou des visualisations de données animées.
Conclusion
GlyphCSS n'est pas seulement une curiosité technique, c'est un outil puissant pour les développeurs cherchant à enrichir l'expérience utilisateur avec des graphiques 3D simples et efficaces. Prêt à transformer tes projets ? Discutons de ton projet en 15 minutes.