docs: replace astackblitz embeds for sandbox (#452)

Tresjs · alvarosabu · Dec 13, 2023 · Nov 10, 2023 · Nov 26, 2023 · Nov 28, 2023
commit e508bf13adbeb5a4c880f627902f495c03dc1ecc
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,2 +1,2 @@
-github: [alvarosabu]
+github: [tresjs, alvarosabu]
 ko_fi: alvarosaburido
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -94,6 +94,17 @@ export default defineConfig({
             text: 'Cientos 💛',
             link: 'https://cientos.tresjs.org/',
           },
+          {
+            text: 'Nuxt module',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Post-processing (Soon)',
+          },
         ],
       },
     ],
@@ -125,14 +136,22 @@ export default defineConfig({
                 text: 'Cientos 💛',
                 link: 'https://cientos.tresjs.org/',
               },
+              {
+                text: 'Nuxt module',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
             ],
           },
         ],
       },  
     ],
     socialLinks: [
       { icon: 'github', link: 'https://github.com/tresjs/tres' },
-      { icon: 'twitter', link: 'https://twitter.com/tresjs_dev' },
+      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
       { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
     ],
   },

diff --git a/docs/.vitepress/theme/TresLayout.vue b/docs/.vitepress/theme/TresLayout.vue
@@ -1,6 +1,7 @@
 <script setup>
 import Theme from 'vitepress/theme'
 import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
+import HomeSponsors from './components/HomeSponsors.vue'
 
 const { Layout } = Theme
 </script>
@@ -10,5 +11,8 @@ const { Layout } = Theme
     <template #home-hero-image>
       <LoveVueThreeJS />
     </template>
+    <template #home-features-after>
+      <HomeSponsors />
+    </template>
   </Layout>
 </template>
diff --git a/docs/.vitepress/theme/components/HomeSponsors.vue b/docs/.vitepress/theme/components/HomeSponsors.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { VPHomeSponsors } from 'vitepress/theme'
+import { useSponsor } from '../composables/sponsor'
+
+const { data } = useSponsor()
+</script>
+
+<template>
+  <VPHomeSponsors
+    v-if="data"
+    message="TresJS is free and open source, made possible by wonderful sponsors."
+    :data="data"
+  />
+  <div class="action">
+    <a
+      class="sponsor"
+      href="https://github.com/sponsors/vitejs"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Become a sponsor <i class="i-carbon-heart" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.action {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  padding-top: 4rem;
+}
+
+.sponsor {
+  /* .VPButton */
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  /* .VPButton.medium */
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+  /* .VPButton.sponsor */
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.sponsor:hover {
+  /* .VPButton.sponsor:hover */
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/SandboxDemo.vue b/docs/.vitepress/theme/components/SandboxDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{ url: string }>()
+</script>
+
+<template>
+  <iframe
+    :src="url"
+    class="w-full my-16 rounded shadow-lg outline-none border-none aspect-4/3"
+  />
+</template>
diff --git a/docs/.vitepress/theme/composables/sponsor.ts b/docs/.vitepress/theme/composables/sponsor.ts
@@ -0,0 +1,20 @@
+import { ref, onMounted } from 'vue'
+
+const data = ref()
+
+export function useSponsor() {
+  onMounted(async () => {
+    if (data.value) {
+      return
+    }
+    /* 
+    const result = await fetch(dataUrl)
+    const json = await result.json() */
+
+    data.value = []
+  })
+
+  return {
+    data,
+  }
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,12 @@
 import 'uno.css'
+import { h } from 'vue'
 
 // .vitepress/theme/index.ts
 import Theme from 'vitepress/theme'
 import './config.css'
 
 import TresLayout from './TresLayout.vue'
+import HomeSponsors from './components/HomeSponsors.vue'
 
 /* const plausible = createPlausible({
   init: {

diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -12,10 +12,12 @@ declare module 'vue' {
     ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']
     FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default']
     FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default']
+    HomeSponsors: typeof import('./.vitepress/theme/components/HomeSponsors.vue')['default']
     LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SandboxDemo: typeof import('./.vitepress/theme/components/SandboxDemo.vue')['default']
     StackBlitzEmbed: typeof import('./.vitepress/theme/components/StackBlitzEmbed.vue')['default']
   }
 }
diff --git a/docs/examples/basic-animations.md b/docs/examples/basic-animations.md
@@ -4,7 +4,7 @@ This guide will help you get started with basic animations in TresJS.
 
 We will build a simple scene with a cube. We will then animate the cube to rotate around the Y and Z axis.
 
-<StackBlitzEmbed projectId="tresjs-basic-animations" />
+<SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
 
 ## useRenderLoop
 
@@ -35,7 +35,10 @@ const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 
 <template>
   <TresCanvas>
-    <TresMesh ref="boxRef" :scale="1">
+    <TresMesh
+      ref="boxRef"
+      :scale="1"
+    >
       <TresBoxGeometry :args="[1, 1, 1]" />
       <TresMeshNormalMaterial />
     </TresMesh>

diff --git a/docs/examples/groups.md b/docs/examples/groups.md
@@ -2,8 +2,6 @@
 
 A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).
 
-<StackBlitzEmbed projectId="tresjs-groups" />
-
 ## Usage
 
 ```vue{13,22}

diff --git a/docs/examples/load-models.md b/docs/examples/load-models.md
@@ -4,9 +4,9 @@
 
 3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity.
 
-For this guide we are going to focus on loading glTF (GL Transmission Format) models, which are the most common format for 3D models on the web.
+For this guide we are going to focus on loading gLTF (GL Transmission Format) models, which are the most common format for 3D models on the web.
 
-<StackBlitzEmbed projectId="tresjs-gltf-load-model" />
+<SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
 
 There are several ways to load models on TresJS:
 

diff --git a/docs/examples/load-textures.md b/docs/examples/load-textures.md
@@ -4,7 +4,7 @@
 
 Three-dimensional (3D) textures are images that contain multiple layers of data, allowing them to represent volume or simulate three-dimensional structures. These textures are commonly used in 3D graphics and visual effects to enhance the realism and complexity of scenes and objects.
 
-<StackBlitzEmbed projectId="tresjs-load-textures" />
+<SandboxDemo url="https://play.tresjs.org/#eNq9Vm1PGzkQ/itW7gNBJbvhVVWOVBToVb2DgoBvTVU5u5PE4LUt25uQi3K/5X7L/bIb27tZB1qUfqAgRcnj8TPPjMfjWbTuNJj3SiXTElq91rHJNFOWGLClIpyKcX/QsmbQejcQrFBSW3IHj7bUkJ9SzslIy4JsJWkMOqqt31f2C+JcnFExpYYsqx0nFrF7k2ZSr9te6SGzZ1JYLfl3zBkIK43b4f6P0yAXxeEPC4Xi1AL+IuS4cep+EpJxoLqTSS41hvTb273z07PDQSssmgnN5ayypFxNaPg6YwLxjmF/QwCUnIHuKA0j0CAyQKoJG086CvRI6oIi5DidsZeBQtYjSmvY6bsGbRRklk3hjBagK6+E9JQ0zDIpkP/L7g7Z2yGHX2uxuDySU1w5WOlHiHomRHcjUGDMCHWTGBx5bLfb7dZgLQpl3ZbII0xIYoWtnXhkmz4z9lGdM+1ikoLyC8yNXY+m66M5wGhIjwmL25md48IeAhk1thPOovJznDbniMBxGh1ya6cVyqZTUJXcGymwgBdu16BawLrtEY84LK45t4BHZ60yvTTNcoH7c+BsqhMBNhWqSGPzk/3kMOmmOTM2dTBaD1o7z4hDdf4Md9iB9EcxfQWve7EzoA+Kik20r2xPDhI8/Iq5BpOCuT0x90TDRrzO7gQZD9+i3jdgijgNeO9LAxvnNzI/2e36BON1g8ekWM9uZYd1gTX4E8Rhw0vUaNjJoWAbkNamLviD5CjlbBhTOsblQCyxJq3JpBix8ZOKzGShGAd9pdxNWK9MvFdy9qfHrC5hpS+bQPbwHfzePAbJ11gsoKeY7uYoqR6DDcsfbj/j1Y0WC5mXvDqcHyzegJG8dBqD2WkpcpQd2Xm1n/wFY2J8Zz48+ltcBbUm1M4VePRL3SFWtRaArz5x3t4fx9kLWWoi20/2o4Q/fXs2e8YWBJv46oGpnqxoFSuoIt5x328AD1tfSKl++IYNBB68sUQNdbWT9AmdUWYjsrYPBxtWj2zVBafpLBkzOymHaKeRBPNpEywY3/zQAzUYiEkLygQ2QM9j0iGn2UNHy+whvcGP7v7ht72/vp0zg/0xg8JR3Kvxls8t3v8Veom+Q0p/oQAty/FEgDGv7P2m9tO4Fu5d5q/s97N38vGicUuLoeviV1nGS3c5XtP7+ye+ahXL7agsjZrgzHKDRd93pd8WJefxursQpiyw3KWo6ry/XvntYD4QwaDdXhDskpaS5TbpvwsXNU3JJxybcFDQpSDUEpiCnuONwfmG/PPfv0fdP65vSTsHHBxybB9EjshclpoUUjAr9bYjYSPSXslNppSXsF33gSd4oqWlrlckc/KmH/SgytAcnN4XZsRqXrkEM3EZwRaxInfTickodwMezk7xZLI2GeH2W7/nI8gCLEbawy5lqrENZyz/4YadZm6K3N5aKnKq80uUpBnljYn7m3aG+MQgV9NRmjEu/MUXu1ML7iY4TDV2q5HTV5Zz+2ySWv4PY68KvA==" />
 
 There are two ways of loading 3D textures in TresJS:
 

diff --git a/docs/examples/orbit-controls.md b/docs/examples/orbit-controls.md
@@ -1,6 +1,6 @@
 # OrbitControls
 
-<StackBlitzEmbed projectId="tresjs-orbit-controls" />
+<SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
 
 [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
 
@@ -33,9 +33,15 @@ Now you can use the `TresOrbitControls` component in your scene.
 
 ```vue
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
   </TresCanvas>
 </template>
 ```
@@ -61,10 +67,17 @@ extend({ OrbitControls })
 
 const { state } = useTres()
 </script>
+
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
   </TresCanvas>
 </template>
 ```
@@ -79,7 +92,10 @@ It just works. 💯
 
 ```vue
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
   </TresCanvas>

diff --git a/docs/examples/text-3d.md b/docs/examples/text-3d.md
@@ -2,7 +2,7 @@
 
 [TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) is one of the ways we can add 3D text in our scene.
 
-<StackBlitzEmbed projectId="tresjs-text3d-cientos" />
+<SandboxDemo url="https://play.tresjs.org/#eNqdVlFv2zYQ/iuEgsEbZkuOnXSd5gxe7G5YsbRF7LcqD7RES0wokiApO0Hg/74jKduUkWbp8hCYdx+/O3684+k5Wiqi/5Ay3jQkSqOJzhWVBmliGokY5uVVFhmdRb9nnNZSKIOe0TXWNF9UuBDbGyz7aHH71/VMMKEWEuekjz6JpeAEXJLyEu3QWoka9UylCOn9FvDY0DPMN1gfQFMDtnud5EJ1sZ/VipqZ4EYJ9gKcEm6EDnYsyaNpQXFiF/aAvYxnPBdcG1QydIWeM45QzghWLv0U9c7ej+bXs8te33q0O6JOkVENcRbMZIVTtMZMe4OHwFGXT5Kkp8pYhGiMbCDzvTzpqVwWZI56pV35wL2DU00SfzFwDbAwpJYMGwIrhCaBjJvBivICrqxk7soQ/Dn/F6K0JLmhGzLDNVEYpVJoaqjggP466o/6v95lEUr2m7p6H8yLBmi49pE9uxX64E9OAC74nCobWnDM/qFlZbqxh3006qMLGz2l3MBmap7AcR6PwJRjbQZe5TbKJDkeGAyTJFADlto8MfuzMjUD8VaiePL3XGNVUp6iIciJkMRF4dT2y4rYxFJ0Phz+4AxbWpjqsN5l/AzuwxP9BxahFc4fSiUaXgxyX1dnw6GNAzRwkS7BqB/5Sh3UWMb3WnDoPkeftQ5outQHtLawMawjiypjpE6TJC847C8IoxsVc2ISLuskhE/H8WU8TAqqTWLNgM4iV3YdYt9C38PtdwD9u5C+NXejmC3BDxLzt+R+wE4v4mF83jLvjXFN7Z6Q2z4sb+G1uCkwXr6HfH8mug5lgOeh0eTN+gbw6fnQCQydRx7juqtui4MKVqT4DmK/4TVqAA4KUtM3kO6h9vAX8buE0VVIaRmhNHdQk0bD87im5UlF5qKWlBH1Wdqu7VYmZkxsPzrb4Z10eyqSP7xgv9ePPuUvUCxEbUDu41VCjxLj3R8Wn+BpCZy1KBrWXs43nLdEC9bYHD3sGnoQ0g5wLtu/XYNB+y/1h0f34rSH6iRq4El31q/7x+5Qa95w54RzeHcds1dUOp5sHI8Dwfej6XT2hvMW6sHCGkVenpPhSAXceP7N+biffjU2OcyslvQK4S2mJojzoztyb19UCm/jkpqqWQFEAQVoZmIoCvcUAz/WkLROakw5PMeOwq5sEJ38Ekte2ol699Prk6ydJuP5Xm/UnRSD8z6CaTGEUXFEKLK2nyiw75asQ8ca0gTP/zqD3auTP6nCM1FAVZUNw8r1RBjhMASR+5T5uDiu3dy7Ibq6cSLAf6IoZij1okBenSsIJ6/7WhnPu6Mt2v0LMkc7LA=="/>
 
 However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/TextGeometry` module.
 
@@ -26,7 +26,7 @@ Then you need to extend the catalogue of components using the `extend` method.
 import { extend } from '@tresjs/core'
 import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
-extend({ TextGeometry: TextGeometry })
+extend({ TextGeometry })
 ```
 
 [TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) needs a only one required argument the font, you can see an example below.
@@ -38,10 +38,11 @@ const loader = new FontLoader()
 
 const font = await new Promise((resolve, reject) => {
   try {
-    loader.load(fontPath, font => {
+    loader.load(fontPath, (font) => {
       resolve(font)
     })
-  } catch (error) {
+  }
+  catch (error) {
     reject(console.error('cientos', error))
   }
 })
@@ -51,9 +52,15 @@ Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
 
 ```vue
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <TresMesh>
-      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
     </TresMesh>
   </TresCanvas>
 </template>
@@ -94,7 +101,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 import { FontLoader } from 'three/addons/loaders/FontLoader'
 import { useTexture } from '/@/composables'
 
-extend({ TextGeometry: TextGeometry })
+extend({ TextGeometry })
 
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
 
@@ -113,20 +120,28 @@ const loader = new FontLoader()
 
 const font = await new Promise((resolve, reject) => {
   try {
-    loader.load(fontPath, font => {
+    loader.load(fontPath, (font) => {
       resolve(font)
     })
-  } catch (error) {
+  }
+  catch (error) {
     reject(console.error('cientos', error))
   }
 })
 
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
 </script>
+
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <TresMesh>
-      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
       <TresMeshNormalMaterial :matcap="matcapTexture" />
     </TresMesh>
   </TresCanvas>
@@ -144,7 +159,10 @@ It just works. 💯 (if not text is provided, the text will be TresJS)
 
 ```vue
 <template>
-  <TresCanvas shadows alpha>
+  <TresCanvas
+    shadows
+    alpha
+  >
     <Text3D :font="fontPath" />
   </TresCanvas>
 </template>