docs: replace astackblitz embeds for sandbox (#452)

.github/FUNDING.yml

@@ -1,2 +1,2 @@
-github: [alvarosabu]
+github: [tresjs, alvarosabu]
 ko_fi: alvarosaburido

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,6 +136,14 @@ 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/',
+              },
             ],
           },
         ],
@@ -132,7 +151,7 @@ export default defineConfig({
     ],
     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' },
     ],
   },

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>

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>

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>

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,
+  }
+}

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: {

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']
   }
 }

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>

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}

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:
 

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:
 

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>

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>

docs/guide/index.md

@@ -6,20 +6,18 @@
     </div>
 </ClientOnly>
 
-This is the documentation for version 3 of TresJS. If you are looking for the documentation for the version 1, check [V1 TresJS](https://v1.tresjs.org/).
-
 ::: code-group
 
 ```bash [npm]
-npm install three @tresjs/core
+npm install @tresjs/core three 
 ```
 
 ```bash [yarn]
-yarn add three @tresjs/core
+yarn add @tresjs/core three 
 ```
 
 ```bash [pnpm]
-pnpm add three @tresjs/core
+pnpm add @tresjs/core three 
 ```
 
 :::
@@ -65,6 +63,14 @@ This is required to make the template compiler work with the custom renderer and
 
 ## Try it online
 
+### Sandbox
+
+You can try TresJS online using the official [sandbox](https://play.tresjs.org/). Check it out:
+
+<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
+
+### StackBlitz
+
 We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS online. Check it out:
 
 ![](/stackblitz-starter.png)
@@ -104,8 +110,5 @@ const lunchboxApp = createLunchboxApp(LunchboxApp)
 lunchboxApp.mount('#lunchbox')
 ```
 
-So I was inspired by both libraries to create ~~something that wouldn't require creating a **custom renderer** but intelligent enough to generate Vue components based on the ThreeJS constructors with 0-to-none manteinance required `three:latest`. That's **TresjS v1**~~.
-
-Although v1 was a decent solution 😄, it has some limitations that would only be solved by creating a proper **custom renderer**. After several POCs, I decided to create a new version of TresJS that would be based on a Vue custom renderer but saving the user to do any weird stuff. That's **TresJS v2**.
+So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**.
 
-To learn more how to migrate from v1, check the [migration guide](/guide/migration-guide.html).

docs/guide/your-first-scene.md

@@ -18,6 +18,7 @@ With **TresJS** you only need to import the default component `<TresCanvas />` a
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
 </script>
+
 <template>
   <TresCanvas window-size>
     <!-- Your scene goes here -->
@@ -42,11 +43,13 @@ By default, `TresCanvas` component will take the **parent's width and height**,
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
 </script>
+
 <template>
   <TresCanvas>
     <!-- Your scene goes here -->
   </TresCanvas>
 </template>
+
 <style>
 html,
 body {
@@ -68,6 +71,7 @@ If your scene is not gonna be part of a UI, you can also force the canvas to tak
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
 </script>
+
 <template>
   <TresCanvas window-size>
     <!-- Your scene goes here -->
@@ -139,7 +143,7 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
 Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
 :::
 
-<StackBlitzEmbed projectId="tresjs-first-scene" />
+
 
 ```vue
 <script setup lang="ts">
@@ -147,8 +151,14 @@ import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
-  <TresCanvas clear-color="#82DBC5" window-size>
-    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+  <TresCanvas
+    clear-color="#82DBC5"
+    window-size
+  >
+    <TresPerspectiveCamera
+      :position="[3, 3, 3]"
+      :look-at="[0, 0, 0]"
+    />
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
       <TresMeshBasicMaterial color="orange" />
@@ -159,3 +169,5 @@ import { TresCanvas } from '@tresjs/core'
 ```
 
 From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVMtu2kAU/ZWRu8iiYIcQoojSikCjqlXTRi27OIuJfYGBeWlmzKOIf+8d2zhD2kZU8oI5955z3+yiiQF7o3W8KiDqRwObGaYdseAKTTiVs/dp5GwafUglE1oZR3bEU8ZUrqglezI1SpCzoUNsYZNMGTh7l8pBUgkhDR8OhObUAb4IGQT0jAM17UxxZTDOm+uLj6NxL43ImslcrduW/ao4NesejNWQObaCMRVgaGUjpK+VZY4piSoP3Rbx32MaNeapWqHlEqUbiCu1bFPnCect4r+GkIQx78DO63eNTJQp7CdQApzZkj41M+tVOigR91qkc4XBL1Cs0QmURtSy7A5bYRjl5FC4MthoCBiD5EXoUuBGPDGQ7iubzR3pM+lAYtVbFOg03IpZtReBQRL0PmpF1Qzbgup4YZXEie88K60NOOg+KRGPhUP1hjSaO6dtP0myXCI/B85WJpbgEqlFEroPu3EvPk9yZl3iYfROo9Yfwr4cVQY9VbtioPxVKF/Dx1HcGuhSU3lK7o3v8DI+jzu18gGMBfOcUHtu4CRd7zdExd415vsWrAjbgDdXWDi5v4H7sIO7hop4J7CJxXF3az87pwby/xCuCK9Jo2M7B8FOED24+uIv46uEs6dQ0ivuU7nHnXQ2U3LKZi82MlNCMw7mu/aHfbyZlHO1/lJizhTQ5JfNIVv+BV/YTZXyPS4LmBW2+3mUeMDgKvPtz2+wwd+NUai84PVw/mH8AVbxwudYuY0KmWPagV+Z7efywJicTeztprzcuqijRN1WQ4k+HP46ml2rgMeycaV/OY7xK116rqwbd5uG738DogXwDg==" />

package.json

@@ -17,8 +17,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/tres.js",
-      "require": "./dist/tres.umd.cjs"
+      "require": "./dist/tres.umd.cjs",
+      "import": "./dist/tres.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts"