feat!: docus

BREAKING CHANGE: New docs with Nuxt Docus

.gitignore

@@ -28,3 +28,5 @@ docs/.vitepress/cache/
 
 .env
 .env.local
+
+old*

docs/.eslintrc-auto-import.json

@@ -1,67 +0,0 @@
-{
-  "globals": {
-    "Component": true,
-    "ComponentPublicInstance": true,
-    "ComputedRef": true,
-    "EffectScope": true,
-    "InjectionKey": true,
-    "PropType": true,
-    "Ref": true,
-    "VNode": true,
-    "WritableComputedRef": true,
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isProxy": true,
-    "isReactive": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "toValue": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true,
-    "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
-  }
-}

docs/.gitignore

@@ -0,0 +1,40 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+.eslintcache
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Template
+template/pnpm-lock.yaml
+
+# npm pack
+*.tgz
+
+# Temp files
+.tmp
+.profile
+*.0x
+
+#VSC
+.history
+.wrangler

docs/.vitepress/config/de.ts

@@ -1,185 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Änderungen an dieser Seite vorschlagen',
-    },
-    sidebar: [
-      {
-        text: 'Anleitung',
-        items: [
-          // Dies zeigt die Seite `/guide/index.md`.
-          { text: 'Einführung', link: '/de/guide/' },
-          { text: 'Loslegen', link: '/de/guide/getting-started' },
-          { text: 'Deine erste Szene', link: '/de/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/de/guide/nuxt' },
-          { text: 'Fehlerbehebung', link: '/de/guide/troubleshooting' },
-          { text: 'Migration von v1', link: '/de/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/de/api/tres-canvas' },
-          {
-            text: 'Instanzen, Argumente und Props',
-            link: '/de/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/de/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/de/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Fortgeschritten',
-        items: [
-          { text: 'Erweitern', link: '/de/advanced/extending' },
-          { text: 'Primitive', link: '/de/advanced/primitive' },
-          {
-            text: 'Warnhinweise',
-            link: '/de/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debugging',
-        items: [
-          { text: 'Entwicklungstools', link: '/de/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Kochbuch 🍳🧑‍🍳',
-        link: '/de/cookbook/',
-        items: [
-          { text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' },
-          { text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' },
-          { text: 'Fortgeschrittene Animationen', link: '/de/cookbook/advanced-animations' },
-          { text: 'Gruppen', link: '/de/cookbook/groups' },
-          { text: 'Texturen laden', link: '/de/cookbook/load-textures' },
-          { text: 'Modelle laden', link: '/de/cookbook/load-models' },
-          { text: 'Text laden', link: '/de/cookbook/text-3d' },
-          { text: 'Lichter und Schatten', link: '/de/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/de/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Direktiven',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/de/directives/v-log' },
-          { text: 'v-light-helper', link: '/de/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/de/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ökosystem',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt-Modul',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Nachbearbeitung',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Anleitung', link: '/de/guide/' },
-      { text: 'API', link: '/de/api/tres-canvas' },
-      /*       { text: 'API', link: '/de/api/' },
-      { text: 'Konfiguration', link: '/de/config/' }, */
-      {
-        text: 'Ressourcen',
-        items: [
-          { text: 'Team', link: '/de/team' },
-          { text: 'Versionen', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Spielplatz',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Probleme',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Beitragen',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ökosystem',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt-Modul',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Nachbearbeitung',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          de: {
-            translations: {
-              button: {
-                buttonText: 'Suchen',
-                buttonAriaLabel: 'Suchen',
-              },
-              modal: {
-                displayDetails: 'Detaillierte Liste anzeigen',
-                resetButtonTitle: 'Suche zurücksetzen',
-                backButtonTitle: 'Suche schließen',
-                noResultsText: 'Keine Ergebnisse für',
-                footer: {
-                  selectText: 'zur Auswahl',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'zum Navigieren',
-                  navigateUpKeyAriaLabel: 'Pfeil nach oben',
-                  navigateDownKeyAriaLabel: 'Pfeil nach unten',
-                  closeText: 'zum Schließen',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/en.ts

@@ -1,173 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Suggest changes to this page',
-    },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introduction', link: '/guide/' },
-          { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Your first Scene', link: '/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/guide/nuxt' },
-          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
-          { text: 'Migrate from v1', link: '/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/api/tres-canvas' },
-          {
-            text: 'Instances, arguments and props',
-            link: '/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/api/events',
-          },
-        ],
-      },
-      {
-        text: 'Composables',
-        link: '/api/composables',
-        items: [
-          { text: 'useTres', link: '/composables/use-tres' },
-          { text: 'useLoader', link: '/composables/use-loader' },
-          { text: 'useGraph', link: '/composables/use-graph' },
-        ],
-      },
-      {
-        text: 'Advanced',
-
-        items: [
-          { text: 'Extending', link: '/advanced/extending' },
-          { text: 'Primitives', link: '/advanced/primitive' },
-          { text: 'Scaling Performance 🚀', link: '/advanced/performance' },
-          { text: 'Attach', link: '/advanced/attach' },
-          {
-            text: 'Caveats',
-            link: '/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Devtools', link: '/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Cookbook 🍳🧑‍🍳',
-        link: '/cookbook/',
-        items: [
-          { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
-          { text: 'Basic Animations', link: '/cookbook/basic-animations' },
-          { text: 'Advanced Animations', link: '/cookbook/advanced-animations' },
-          { text: 'Groups', link: '/cookbook/groups' },
-          { text: 'Load Textures', link: '/cookbook/load-textures' },
-          { text: 'Load Models', link: '/cookbook/load-models' },
-          { text: 'Load Text', link: '/cookbook/text-3d' },
-          { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/cookbook/shaders' },
-          { text: 'Tweakpane', link: '/cookbook/tweakpane' },
-        ],
-      },
-      {
-        text: 'Directives',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/directives/v-log' },
-          { text: 'v-light-helper', link: '/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosystem',
-        items: [
-          {
-            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',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-      {
-        text: 'Contributing',
-        items: [
-          { text: 'Contribute', link: '/contribute/contributing' },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      {
-        text: 'Resources',
-        items: [
-          { text: 'Team', link: '/team' },
-          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Issues',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Contributing',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ecosystem',
-            items: [
-              {
-                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',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-}

docs/.vitepress/config/es.ts

@@ -1,186 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Sugerir cambios a esta página',
-    },
-    sidebar: [
-      {
-        text: 'Guía',
-        items: [
-          // Esto muestra la página `/guide/index.md`.
-          { text: 'Introducción', link: '/es/guide/' },
-          { text: 'Empezando', link: '/es/guide/getting-started' },
-          { text: 'Tu primera Escena', link: '/es/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/es/guide/nuxt' },
-          { text: 'Solución de problemas', link: '/es/guide/troubleshooting' },
-          { text: 'Migración desde v1', link: '/es/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/es/api/tres-canvas' },
-          {
-            text: 'Instancias, argumentos y props',
-            link: '/es/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/es/api/composables',
-          },
-          {
-            text: 'Eventos',
-            link: '/es/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Avanzado',
-
-        items: [
-          { text: 'Extender', link: '/es/advanced/extending' },
-          { text: 'Primitive', link: '/es/advanced/primitive' },
-          {
-            text: 'Advertencias',
-            link: '/es/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Depuración',
-        items: [
-          { text: 'Herramientas de desarrollo', link: '/es/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Recetario 🍳🧑‍🍳',
-        link: '/es/cookbook/',
-        items: [
-          { text: 'Controles de órbita', link: '/es/cookbook/orbit-controls' },
-          { text: 'Animaciones básicas', link: '/es/cookbook/basic-animations' },
-          { text: 'Advanced Animations', link: '/es/cookbook/advanced-animations' },
-          { text: 'Grupos', link: '/es/cookbook/groups' },
-          { text: 'Cargar texturas', link: '/es/cookbook/load-textures' },
-          { text: 'Cargar modelos', link: '/es/cookbook/load-models' },
-          { text: 'Cargar texto', link: '/es/cookbook/text-3d' },
-          { text: 'Luces y sombras', link: '/es/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/es/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Directivas',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/es/directives/v-log' },
-          { text: 'v-light-helper', link: '/es/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/es/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosistema',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Módulo Nuxt',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-procesamiento',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guía', link: '/es/guide/' },
-      { text: 'API', link: '/es/api/tres-canvas' },
-      /*       { text: 'API', link: '/es/api/' },
-      { text: 'Configuración', link: '/es/config/' }, */
-      {
-        text: 'Recursos',
-        items: [
-          { text: 'Equipo', link: '/es/team' },
-          { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Problemas',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Contribuir',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: 'Ecosistema',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Módulo Nuxt',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Post-procesamiento',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          es: {
-            translations: {
-              button: {
-                buttonText: 'Buscar',
-                buttonAriaLabel: 'Buscar',
-              },
-              modal: {
-                displayDetails: 'Mostrar lista detallada',
-                resetButtonTitle: 'Restablecer búsqueda',
-                backButtonTitle: 'Cerrar búsqueda',
-                noResultsText: 'Sin resultados para',
-                footer: {
-                  selectText: 'para seleccionar',
-                  selectKeyAriaLabel: 'entrar',
-                  navigateText: 'para navegar',
-                  navigateUpKeyAriaLabel: 'flecha arriba',
-                  navigateDownKeyAriaLabel: 'flecha abajo',
-                  closeText: 'para cerrar',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/fr.ts

@@ -1,183 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Suggérer un changement à cette page.',
-    },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introduction', link: '/fr/guide/' },
-          { text: 'Commencer', link: '/fr/guide/getting-started' },
-          { text: 'Votre première scene', link: '/fr/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/fr/guide/nuxt' },
-          { text: 'Résolution de problèmes', link: '/fr/guide/troubleshooting' },
-          { text: 'Migration depuis la v1', link: '/fr/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/fr/api/tres-canvas' },
-          {
-            text: 'Instances, arguments et props',
-            link: '/fr/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/fr/api/composables',
-          },
-          {
-            text: 'Évenements',
-            link: '/fr/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Avancé',
-
-        items: [
-          { text: 'Étendre', link: '/fr/advanced/extending' },
-          { text: 'primitive', link: '/fr/advanced/primitive' },
-          {
-            text: 'Mise en garde',
-            link: '/fr/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Outils de développement', link: '/fr/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Cookbook',
-        link: '/fr/cookbook/',
-        collapsed: true,
-        items: [
-          { text: 'Controles des orbites', link: '/fr/cookbook/orbit-controls' },
-          { text: 'Animations de base', link: '/fr/cookbook/basic-animations' },
-          { text: 'Groupes', link: '/fr/cookbook/groups' },
-          { text: 'Charger des textures', link: '/fr/cookbook/load-textures' },
-          { text: 'Charger des modèles', link: '/fr/cookbook/load-models' },
-          { text: 'Charger du texte', link: '/fr/cookbook/text-3d' },
-          { text: 'Éclairages et ombres', link: '/fr/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/fr/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Directives',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/fr/directives/v-log' },
-          { text: 'v-light-helper', link: '/fr/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/fr/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosystème',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Module Nuxt',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Post-processing',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/fr/guide/' },
-      { text: 'API', link: '/fr/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      { text: 'Resources', items: [
-        { text: 'Équipe', link: '/fr/team.md' },
-        { text: 'Versions', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Playground',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Problèmes',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Contribuer',
-          link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-        },
-        {
-          text: 'Ecosystème',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Module Nuxt',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-            {
-              text: 'Post-processing',
-              link: 'https://post-processing.tresjs.org/',
-            },
-          ],
-        },
-      ] },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          fr: {
-            translations: {
-              button: {
-                buttonText: 'Chercher',
-                buttonAriaLabel: 'Chercher',
-              },
-              modal: {
-                displayDetails: 'Afficher la liste détaillée',
-                resetButtonTitle: 'Réinitialiser la recherche',
-                backButtonTitle: 'Fermer la recherche',
-                noResultsText: 'Aucun résultat pour',
-                footer: {
-                  selectText: 'Pour selectionner',
-                  selectKeyAriaLabel: 'entrer',
-                  navigateText: 'Pour naviguer',
-                  navigateUpKeyAriaLabel: 'Flèche du haut',
-                  navigateDownKeyAriaLabel: 'Flèche du bas',
-                  closeText: 'Pour fermer',
-                  closeKeyAriaLabel: 'quitter',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/index.ts

@@ -1,21 +0,0 @@
-import { defineConfig } from 'vitepress'
-import { deConfig } from './de'
-import { enConfig } from './en'
-import { esConfig } from './es'
-import { frConfig } from './fr'
-import { nlConfig } from './nl'
-import { sharedConfig } from './shared'
-import { zhConfig } from './zh'
-
-export default defineConfig({
-  ...sharedConfig,
-
-  locales: {
-    root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
-    es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
-    fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
-    de: { label: 'Deutsch', lang: 'de-DE', link: '/de/', ...deConfig },
-    zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig },
-    nl: { label: 'Nederlands', lang: 'nl-NL', link: '/nl/', ...nlConfig },
-  },
-})

docs/.vitepress/config/nl.ts

@@ -1,182 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: 'Stel wijzigingen op deze pagina voor',
-    },
-    sidebar: [
-      {
-        text: 'Gids',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introductie', link: '/nl/guide/' },
-          { text: 'Aan de slag', link: '/nl/guide/getting-started' },
-          { text: 'Je eerste scene', link: '/nl/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/nl/guide/nuxt' },
-          { text: 'Problemen oplossen', link: '/nl/guide/troubleshooting' },
-          { text: 'Migreren vanaf v1', link: '/nl/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/nl/api/tres-canvas' },
-          {
-            text: 'Instanties, argumenten en props',
-            link: '/nl/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/nl/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/nl/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Geavanceerd',
-
-        items: [
-          { text: 'Uitbreiden', link: '/nl/advanced/extending' },
-          { text: 'Primitive', link: '/nl/advanced/primitive' },
-          {
-            text: 'Waarschuwingen',
-            link: '/nl/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Foutopsporing',
-        items: [
-          { text: 'Ontwikkelingstools', link: '/nl/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Kookboek 🍳🧑‍🍳',
-        link: '/nl/cookbook/',
-        items: [
-          { text: 'Orbit Controls', link: '/nl/cookbook/orbit-controls' },
-          { text: 'Basis Animaties', link: '/nl/cookbook/basic-animations' },
-          { text: 'Groepen', link: '/nl/cookbook/groups' },
-          { text: 'Textures laden', link: '/nl/cookbook/load-textures' },
-          { text: 'Modellen laden', link: '/nl/cookbook/load-models' },
-          { text: 'Text laden', link: '/nl/cookbook/text-3d' },
-          { text: 'Lichten en Schaduwen', link: '/nl/cookbook/lights-shadows' },
-          { text: 'Shaders', link: '/nl/cookbook/shaders' },
-        ],
-      },
-      {
-        text: 'Richtlijnen',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/nl/directives/v-log' },
-          { text: 'v-light-helper', link: '/nl/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/nl/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: 'Ecosysteem',
-        items: [
-          {
-            text: 'Cientos 💛',
-            link: 'https://cientos.tresjs.org/',
-          },
-          {
-            text: 'Nuxt module',
-            link: 'https://github.com/Tresjs/nuxt',
-          },
-          {
-            text: 'TresLeches 🍰',
-            link: 'https://tresleches.tresjs.org/',
-          },
-          {
-            text: 'Nabewerking',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/nl/guide/' },
-      { text: 'API', link: '/nl/api/tres-canvas' },
-      /*       { text: 'API', link: '/nl/api/' },
-      { text: 'Config', link: '/nl/config/' }, */
-      { text: 'Resources', items: [
-        { text: 'Team', link: '/nl/team' },
-        { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-        {
-          text: 'Speelplaats',
-          link: 'https://play.tresjs.org/',
-        },
-        {
-          text: 'Github',
-          link: 'https://github.com/Tresjs/tres/',
-        },
-        {
-          text: 'Problemen',
-          link: 'https://github.com/Tresjs/tres/issues',
-        },
-        {
-          text: 'Bijdragen',
-          link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-        },
-        {
-          text: 'Ecosysteem',
-          items: [
-            {
-              text: 'Cientos 💛',
-              link: 'https://cientos.tresjs.org/',
-            },
-            {
-              text: 'Nuxt module',
-              link: 'https://github.com/Tresjs/nuxt',
-            },
-            {
-              text: 'TresLeches 🍰',
-              link: 'https://tresleches.tresjs.org/',
-            },
-            {
-              text: 'Nabewerking',
-              link: 'https://post-processing.tresjs.org/',
-            },
-          ],
-        },
-      ] },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          nl: {
-            translations: {
-              button: {
-                buttonText: 'Zoeken',
-                buttonAriaLabel: 'Zoeken',
-              },
-              modal: {
-                displayDetails: 'Gedetailleerde lijst bekijken',
-                resetButtonTitle: 'Zoeken resetten',
-                backButtonTitle: 'Zoeken sluiten',
-                noResultsText: 'Geen resultaten voor',
-                footer: {
-                  selectText: 'Selecteren',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'Navigeren naar',
-                  navigateUpKeyAriaLabel: 'Pijl omhoog',
-                  navigateDownKeyAriaLabel: 'Pijl omlaag',
-                  closeText: 'Sluiten',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-}

docs/.vitepress/config/shared.ts

@@ -1,100 +0,0 @@
-import { resolve } from 'pathe'
-import { defineConfig } from 'vitepress'
-import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
-
-export const sharedConfig = defineConfig({
-  title: 'TresJS',
-  description: 'Declarative ThreeJS using Vue Components',
-  head: [
-    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
-    ['meta', { name: 'theme-color', content: '#82DBC5' }],
-    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
-    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
-    ['meta', { property: 'og:type', content: 'website' }],
-    ['meta', { property: 'og:site_name', content: 'TresJS' }],
-    [
-      'meta',
-      {
-        property: 'og:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    [
-      'meta',
-      {
-        property: 'twitter:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    ['script', { 'defer': 'true', 'data-domain': 'tresjs.org', 'src': 'https://plausible.io/js/script.js' }],
-  ],
-  themeConfig: {
-    logo: '/logo.svg',
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          root: {
-            translations: {
-              button: {
-                buttonText: 'Search',
-                buttonAriaLabel: 'Search',
-              },
-              modal: {
-                displayDetails: 'Display detailed list',
-                resetButtonTitle: 'Reset search',
-                backButtonTitle: 'Close search',
-                noResultsText: 'No results for',
-                footer: {
-                  selectText: 'to select',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: 'to navigate',
-                  navigateUpKeyAriaLabel: 'up arrow',
-                  navigateDownKeyAriaLabel: 'down arrow',
-                  closeText: 'to close',
-                  closeKeyAriaLabel: 'escape',
-                },
-              },
-            },
-          },
-
-        },
-      },
-    },
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/tresjs/tres' },
-      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
-      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
-    ],
-  },
-  vite: {
-    optimizeDeps: {
-      exclude: ['vitepress'],
-      include: ['@tresjs/cientos', '@stackblitz/sdk', '@vueuse/core', 'three'],
-    },
-    server: {
-      hmr: {
-        overlay: false,
-      },
-    },
-    resolve: {
-      alias: {
-        '@tresjs/core': resolve(__dirname, '../../../dist/tres.js'),
-      },
-      dedupe: ['@tresjs/cientos', 'three'],
-    },
-  },
-  vue: {
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  },
-  markdown: {
-    config: (md) => {
-      md.use(groupIconMdPlugin)
-    },
-  },
-})

docs/.vitepress/config/zh.ts

@@ -1,194 +0,0 @@
-import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
-
-export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
-  themeConfig: {
-    editLink: {
-      pattern: 'https://github.com/tresjs/tres/edit/main/docs/:path',
-      text: '对本页内容给出建议',
-    },
-    sidebar: [
-      {
-        text: '使用指南',
-        items: [
-          { text: '简介', link: '/zh/guide/' },
-          { text: '入门指南', link: '/zh/guide/getting-started' },
-          { text: '你的第一个场景', link: '/zh/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/zh/guide/nuxt' },
-          { text: '故障排除', link: '/zh/guide/troubleshooting' },
-          { text: '从 v1 迁移', link: '/zh/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/zh/api/tres-canvas' },
-          {
-            text: '实例, 参数和 props',
-            link: '/zh/api/instances-arguments-and-props',
-          },
-          {
-            text: '组合式函数',
-            link: '/zh/api/composables',
-          },
-          {
-            text: '事件',
-            link: '/zh/api/events',
-          },
-        ],
-      },
-
-      {
-        text: '进阶',
-
-        items: [
-          { text: '扩展', link: '/zh/advanced/extending' },
-          { text: '原语', link: '/zh/advanced/primitive' },
-          {
-            text: '注意事项',
-            link: '/zh/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Devtools', link: '/zh/debug/devtools' },
-        ],
-      },
-      {
-        text: '专题手册 🍳🧑‍🍳',
-        link: '/zh/cookbook/',
-        items: [
-          { text: '轨道控制器', link: '/zh/cookbook/orbit-controls' },
-          { text: '基础动画', link: '/zh/cookbook/basic-animations' },
-          { text: '组', link: '/zh/cookbook/groups' },
-          { text: '加载纹理', link: '/zh/cookbook/load-textures' },
-          { text: '加载模型', link: '/zh/cookbook/load-models' },
-          { text: '加载文本', link: '/zh/cookbook/text-3d' },
-          { text: '光照和阴影', link: '/zh/cookbook/lights-shadows' },
-          { text: '着色器', link: '/zh/cookbook/shaders' },
-        ],
-      },
-      {
-        text: '指令',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/zh/directives/v-log' },
-          { text: 'v-light-helper', link: '/zh/directives/v-light-helper' },
-          { text: 'v-distance-to', link: '/zh/directives/v-distance-to' },
-        ],
-      },
-      {
-        text: '生态系统',
-        items: [
-          {
-            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',
-            link: 'https://post-processing.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: '使用指南', link: '/zh/guide/' },
-      { text: 'API', link: '/zh/api/tres-canvas' },
-      /*       { text: 'API', link: '/api/' },
-      { text: 'Config', link: '/config/' }, */
-      {
-        text: '资源',
-        items: [
-          { text: '团队', link: '/zh/team' },
-          { text: '版本发布', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: '演练场',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: '议题',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: '贡献',
-            link: 'https://github.com/Tresjs/.github/blob/main/CONTRIBUTING.md',
-          },
-          {
-            text: '生态系统',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt 模块',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-              {
-                text: 'Post-processing',
-                link: 'https://post-processing.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          zh: {
-            translations: {
-              button: {
-                buttonText: '搜索',
-                buttonAriaLabel: '搜索',
-              },
-              modal: {
-                displayDetails: '显示详细列表',
-                resetButtonTitle: '重制搜索',
-                backButtonTitle: '关闭搜索',
-                noResultsText: '没有找到相关结果',
-                footer: {
-                  selectText: '选择',
-                  selectKeyAriaLabel: 'enter',
-                  navigateText: '切换',
-                  navigateUpKeyAriaLabel: '上方向键',
-                  navigateDownKeyAriaLabel: '下方向键',
-                  closeText: '关闭',
-                  closeKeyAriaLabel: 'esc',
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-    darkModeSwitchLabel: '外观',
-    sidebarMenuLabel: '菜单',
-    returnToTopLabel: '返回顶部',
-    langMenuLabel: '更改语言',
-    lastUpdatedText: '最近更新',
-    outlineTitle: '此页面上',
-    docFooter: {
-      next: '下一页',
-      prev: '上一页',
-    },
-  },
-}

docs/.vitepress/theme/TresLayout.vue

@@ -1,18 +0,0 @@
-<script setup>
-import Theme from 'vitepress/theme'
-import HomeSponsors from './components/HomeSponsors.vue'
-import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
-
-const { Layout } = Theme
-</script>
-
-<template>
-  <Layout>
-    <template #home-hero-image>
-      <LoveVueThreeJS />
-    </template>
-    <template #home-features-after>
-      <HomeSponsors />
-    </template>
-  </Layout>
-</template>

docs/.vitepress/theme/assets/blender-cube.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V156C0 158.209 1.79086 160 4 160H156C158.209 160 160 158.209 160 156V4C160 1.79086 158.209 0 156 0H4ZM29 129C26.7909 129 25 130.791 25 133C25 135.209 26.7909 137 29 137H132C134.209 137 136 135.209 136 133C136 130.791 134.209 129 132 129H29ZM59 80C59 89.3888 51.3888 97 42 97C32.6112 97 25 89.3888 25 80C25 70.6112 32.6112 63 42 63C51.3888 63 59 70.6112 59 80ZM119 97C128.389 97 136 89.3888 136 80C136 70.6112 128.389 63 119 63C109.611 63 102 70.6112 102 80C102 89.3888 109.611 97 119 97Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/cat.svg

@@ -1,5 +0,0 @@
-<svg width="173" height="186" viewBox="0 0 173 186" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 26C14.0589 26 6 34.0589 6 44V182C6 184.209 7.79086 186 10 186H148C157.941 186 166 177.941 166 168V44C166 34.0589 157.941 26 148 26H24ZM82.5448 148.077C84.0883 150.723 87.9115 150.723 89.455 148.077L96.4909 136.015C98.0464 133.349 96.1229 130 93.0358 130H78.9641C75.8769 130 73.9534 133.349 75.5089 136.015L82.5448 148.077ZM115.5 132.402C114.672 130.967 115.163 129.132 116.598 128.304L133.919 118.304C135.353 117.475 137.188 117.967 138.017 119.402C138.845 120.837 138.353 122.672 136.919 123.5L119.598 133.5C118.163 134.328 116.328 133.837 115.5 132.402ZM54.9185 155.696C56.3534 154.868 56.845 153.033 56.0166 151.598C55.1882 150.163 53.3534 149.672 51.9185 150.5L34.598 160.5C33.1631 161.328 32.6715 163.163 33.4999 164.598C34.3284 166.033 36.1631 166.525 37.598 165.696L54.9185 155.696ZM114.5 149.402C115.328 147.967 117.163 147.475 118.598 148.304L135.919 158.304C137.353 159.132 137.845 160.967 137.017 162.402C136.188 163.837 134.353 164.328 132.919 163.5L115.598 153.5C114.163 152.672 113.672 150.837 114.5 149.402ZM52.9185 135.696C54.3534 136.525 56.1882 136.033 57.0166 134.598C57.845 133.163 57.3534 131.328 55.9185 130.5L38.598 120.5C37.1631 119.672 35.3284 120.163 34.4999 121.598C33.6715 123.033 34.1631 124.868 35.598 125.696L52.9185 135.696ZM45 73C43.8954 73 43 73.8954 43 75V82V82C43 82.5002 43.0333 83.0025 43.0111 83.5022C43.0037 83.6672 43 83.8332 43 84C43 90.0751 47.9249 95 54 95C60.0751 95 65 90.0751 65 84V75C65 73.8954 64.1046 73 63 73H54H45ZM107 75C107 73.8954 107.895 73 109 73H118H127C128.105 73 129 73.8954 129 75V84C129 90.0751 124.075 95 118 95C111.925 95 107 90.0751 107 84C107 83.8332 107.004 83.6672 107.011 83.5022C107.033 83.0025 107 82.5002 107 82V82V75Z" fill="#FBB03B"/>
-<path d="M24.4378 10.5C27.1321 5.83334 33.8679 5.83333 36.5622 10.5L50.8516 35.25C53.5459 39.9167 50.178 45.75 44.7894 45.75H16.2106C10.822 45.75 7.4541 39.9167 10.1484 35.25L24.4378 10.5Z" fill="#FBB03B"/>
-<path d="M136.438 10.5C139.132 5.83334 145.868 5.83333 148.562 10.5L162.852 35.25C165.546 39.9167 162.178 45.75 156.789 45.75H128.211C122.822 45.75 119.454 39.9167 122.148 35.25L136.438 10.5Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/cross.svg

@@ -1,4 +0,0 @@
-<svg width="156" height="157" viewBox="0 0 156 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M135.188 21L21.0002 135.187" stroke="#4F4F4F" stroke-width="41" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M135.435 136.092L21.2473 21.9043" stroke="#4F4F4F" stroke-width="41" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

docs/.vitepress/theme/assets/cube.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="160" height="160" rx="4" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/face.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M80 160C124.183 160 160 124.183 160 80C160 35.8172 124.183 0 80 0C35.8172 0 0 35.8172 0 80C0 124.183 35.8172 160 80 160ZM94.8262 121C94.8262 123.209 93.0353 125 90.8262 125H69.174C66.9649 125 65.174 123.209 65.174 121V108.826V107.478H65.2344C65.9154 99.9217 72.2662 94 80.0001 94C87.734 94 94.0848 99.9217 94.7657 107.478H94.8262V108.826V121ZM100 75.5C100 73.0147 102.015 71 104.5 71H127.5C129.985 71 132 73.0147 132 75.5C132 77.9853 129.985 80 127.5 80H104.5C102.015 80 100 77.9853 100 75.5ZM44.5 87C52.5081 87 59 80.5081 59 72.5C59 64.4919 52.5081 58 44.5 58C36.4919 58 30 64.4919 30 72.5C30 80.5081 36.4919 87 44.5 87Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/heart.svg

@@ -1,3 +0,0 @@
-<svg width="166" height="153" viewBox="0 0 166 153" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9167 152.152L70.8938 141.207C28.1917 102.485 0 76.8638 0 45.6042C0 19.9829 20.0658 0 45.6042 0C60.0317 0 73.8788 6.71625 82.9167 17.2467C91.9546 6.71625 105.802 0 120.229 0C145.768 0 165.833 19.9829 165.833 45.6042C165.833 76.8638 137.642 102.485 94.9396 141.207L82.9167 152.152ZM69 65.5C69 71.299 64.299 76 58.5 76C52.701 76 48 71.299 48 65.5C48 59.701 52.701 55 58.5 55C64.299 55 69 59.701 69 65.5ZM108.5 76C114.299 76 119 71.299 119 65.5C119 59.701 114.299 55 108.5 55C102.701 55 98 59.701 98 65.5C98 71.299 102.701 76 108.5 76Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/play.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="192" viewBox="0 0 160 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M154.283 92.5706C156.873 94.1243 156.873 97.877 154.283 99.4306L6.05799 188.366C3.39189 189.965 1.05032e-06 188.045 1.01325e-06 184.936L-1.10784e-06 7.06538C-1.14492e-06 3.95621 3.39188 2.03576 6.05798 3.63542L154.283 92.5706Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/second-row copy.svg

@@ -1,128 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="107" height="1293" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e06443884b22">
-    <g id="square">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644388c4e0">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e06443897ed5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e0644389ad4a">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e0644389ad4a" d="M100 1204a4 4 0 0 0-4.001-4H11.001A4 4 0 0 0 7 1204v85a4 4 0 0 0 4.001 4h84.998a4 4 0 0 0 4.001-4v-85Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="lightning">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438a6859">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438a6859" d="m59.794 1050.84-26.61 48.82a1.49 1.49 0 0 0 .045 1.51c.142.23.342.42.582.55.24.13.511.2.786.2h12.316c.233 0 .464.05.675.14.212.1.4.24.55.41.305.34.435.81.351 1.26l-6.771 37.46c-.049.27-.022.55.078.8.099.26.269.49.49.66.455.36 1.062.45 1.601.24.346-.14.634-.39.812-.7l29.11-51.73c.382-.69.175-1.55-.477-1.99l-.64-.46a1.725 1.725 0 0 0-.96-.29l-13.198.27c-.235 0-.47-.05-.684-.14a1.46 1.46 0 0 1-.558-.41 1.488 1.488 0 0 1-.357-1.27l6.222-34.04c.048-.26.025-.53-.067-.79-.093-.25-.25-.47-.455-.65l-.356-.3a1.86 1.86 0 0 0-.634-.34 1.764 1.764 0 0 0-.723-.03c-.24.05-.467.14-.662.29a1.55 1.55 0 0 0-.466.53Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="wheel">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438a685b">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438aa039">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438b75df">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438b75df" d="m5.774 941.685 9.784.482a38.556 38.556 0 0 1 4.863-14.948 38.22 38.22 0 0 1 10.41-11.717l-5.345-8.278c-1.289-2.311-.621-5.247 1.766-6.594 2.385-1.3 5.201-.53 6.538 1.78l4.438 8.76a38.38 38.38 0 0 1 30.545 0l4.439-8.76c1.335-2.31 4.151-3.08 6.538-1.78 2.386 1.347 3.054 4.283 1.766 6.594l-5.345 8.278a38.204 38.204 0 0 1 10.409 11.717 38.54 38.54 0 0 1 4.863 14.948l9.783-.482c1.266 0 2.48.507 3.376 1.41a4.842 4.842 0 0 1 0 6.807 4.754 4.754 0 0 1-3.376 1.41l-9.783-.482a38.522 38.522 0 0 1-4.863 14.948 38.267 38.267 0 0 1-10.409 11.721l5.345 8.27c1.288 2.311.62 5.251-1.766 6.601-2.387 1.3-5.203.53-6.538-1.78l-4.439-8.761a38.41 38.41 0 0 1-15.273 3.17 38.409 38.409 0 0 1-15.272-3.17l-4.438 8.761c-1.337 2.31-4.153 3.08-6.538 1.78-2.387-1.35-3.055-4.29-1.766-6.601l5.345-8.27a38.259 38.259 0 0 1-10.41-11.721 38.54 38.54 0 0 1-4.863-14.948l-9.784.482a4.752 4.752 0 0 1-3.375-1.41 4.84 4.84 0 0 1 0-6.807 4.752 4.752 0 0 1 3.375-1.41Zm33.742 1.685c.622-2.936 2.196-5.535 4.44-7.509l-7.923-12.225a28.895 28.895 0 0 0-10.929 19.012l14.412.722ZM53.5 932.059c1.528 0 2.96.241 4.296.674l6.586-12.947A28.138 28.138 0 0 0 53.5 917.62c-3.866 0-7.541.77-10.881 2.166l6.586 12.947a13.86 13.86 0 0 1 4.295-.674Zm13.984 11.311 14.413-.722a28.891 28.891 0 0 0-10.929-19.012l-7.922 12.225c2.243 1.974 3.818 4.573 4.438 7.509Zm0 6.257c-.62 2.936-2.195 5.535-4.438 7.509l7.922 12.225a28.891 28.891 0 0 0 10.929-19.012l-14.413-.722ZM53.5 960.938a14.39 14.39 0 0 1-4.342-.674l-6.539 12.944a28.06 28.06 0 0 0 10.881 2.17c3.866 0 7.541-.77 10.882-2.17l-6.539-12.944a14.386 14.386 0 0 1-4.343.674Zm-13.984-11.311-14.412.722c1.05 7.701 5.058 14.487 10.929 19.012l7.923-12.225c-2.244-1.974-3.818-4.573-4.44-7.509Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="umbrella">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac38">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac39">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac3a">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438c0cc1">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438c0cc1" d="M86.379 766.938A46.14 46.14 0 0 0 58.08 753.54a1.686 1.686 0 0 1-1.429-1.167 3.28 3.28 0 0 0-6.302 0 1.68 1.68 0 0 1-1.429 1.167C25.166 755.891 7.049 775.848 7 799.72a3.4 3.4 0 0 0 1.504 2.879 3.317 3.317 0 0 0 4.166-.431c4.201-4.202 11.01-4.208 15.218-.013a3.312 3.312 0 0 0 4.692.031 12.99 12.99 0 0 1 16.916-1.218c.429.323.682.83.683 1.368v30.603c0 1.786-1.371 3.322-3.154 3.414a3.305 3.305 0 0 1-1.321-.203 3.31 3.31 0 0 1-1.899-1.805 3.33 3.33 0 0 1-.269-1.31 3.324 3.324 0 0 0-3.382-3.321c-1.868.033-3.3 1.683-3.259 3.549A9.978 9.978 0 0 0 46.728 843c5.581.07 10.093-4.553 10.093-10.133v-30.531c0-.538.253-1.045.684-1.368a12.991 12.991 0 0 1 16.897 1.2 3.323 3.323 0 0 0 4.695 0c4.208-4.204 11.025-4.204 15.233 0a3.322 3.322 0 0 0 4.056.5 3.41 3.41 0 0 0 1.614-2.95 46.207 46.207 0 0 0-13.621-32.78Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="zombie">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f12">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f13">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438cadb5">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438cadb5" d="M53.5 693c25.681 0 46.5-20.819 46.5-46.5S79.181 600 53.5 600 7 620.819 7 646.5 27.819 693 53.5 693Zm8.618-24.344a4 4 0 0 1-4 4h-9.235a4 4 0 0 1-4-4v-6.185h.035a8.618 8.618 0 0 1 17.164 0h.036v6.185Zm3.006-26.657a4.5 4.5 0 0 1 4.501-4.5h9.599a4.5 4.5 0 1 1 0 9.001h-9.599a4.5 4.5 0 0 1-4.501-4.501Zm-32.259 8.57a8.428 8.428 0 1 0 0-16.857 8.428 8.428 0 0 0 0 16.857Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="cross">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13d">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13e">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce140">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438ce140" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb1">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb2">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb3">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb3" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb4">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb5">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb6">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475e">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475f">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d475f" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d4760">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3d">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3e">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac3e" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac40">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac41">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="skull">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a4">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc0">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e1fc0" d="M81.4 374.401v13.949a4.651 4.651 0 0 1-4.65 4.65h-46.5a4.651 4.651 0 0 1-4.65-4.65v-13.949H11.65A4.651 4.651 0 0 1 7 369.75V346.5C7 320.819 27.818 300 53.5 300s46.5 20.819 46.5 46.5v23.25a4.652 4.652 0 0 1-4.65 4.651H81.4ZM32.575 355.8a6.966 6.966 0 0 0 4.932-2.043 6.972 6.972 0 0 0 0-9.863 6.972 6.972 0 0 0-4.932-2.044 6.976 6.976 0 0 0 0 13.95Zm41.85 0a6.983 6.983 0 0 0 6.445-4.305 6.983 6.983 0 0 0-1.513-7.601 6.975 6.975 0 1 0-4.932 11.906Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="triangle">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc2">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc3">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e5256">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e5256" d="M50.085 151.938c1.547-2.584 5.283-2.584 6.83 0l21.644 36.148 26.867 44.87c1.593 2.66-.319 6.044-3.415 6.044H4.989c-3.096 0-5.008-3.384-3.415-6.044l48.511-81.018Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="robot">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808a">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808b">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ec86f">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438ec86f" d="M11.001 0A4 4 0 0 0 7 4.001v84.998A4 4 0 0 0 11.001 93h84.998A4 4 0 0 0 100 88.999V4.001A4 4 0 0 0 95.999 0H11.001Zm14.53 71.63a4 4 0 0 0 0 8.001H82.05a4 4 0 0 0 0-8.001H25.531ZM41.293 46.5c0 5.457-4.423 9.881-9.881 9.881-5.457 0-9.881-4.424-9.881-9.881 0-5.458 4.424-9.881 9.881-9.881a9.88 9.88 0 0 1 9.881 9.881Zm34.876 9.881c5.457 0 9.881-4.424 9.881-9.881 0-5.458-4.424-9.881-9.881-9.881a9.88 9.88 0 0 0-9.881 9.881c0 5.457 4.423 9.881 9.881 9.881Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/second-row.svg

@@ -1,128 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="107" height="1293" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e06443884b22">
-    <g id="square">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644388c4e0">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e06443897ed5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e0644389ad4a">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e0644389ad4a" d="M100 1204a4 4 0 0 0-4.001-4H11.001A4 4 0 0 0 7 1204v85a4 4 0 0 0 4.001 4h84.998a4 4 0 0 0 4.001-4v-85Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="lightning">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e0644389d68d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438a6859">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438a6859" d="m59.794 1050.84-26.61 48.82a1.49 1.49 0 0 0 .045 1.51c.142.23.342.42.582.55.24.13.511.2.786.2h12.316c.233 0 .464.05.675.14.212.1.4.24.55.41.305.34.435.81.351 1.26l-6.771 37.46c-.049.27-.022.55.078.8.099.26.269.49.49.66.455.36 1.062.45 1.601.24.346-.14.634-.39.812-.7l29.11-51.73c.382-.69.175-1.55-.477-1.99l-.64-.46a1.725 1.725 0 0 0-.96-.29l-13.198.27c-.235 0-.47-.05-.684-.14a1.46 1.46 0 0 1-.558-.41 1.488 1.488 0 0 1-.357-1.27l6.222-34.04c.048-.26.025-.53-.067-.79-.093-.25-.25-.47-.455-.65l-.356-.3a1.86 1.86 0 0 0-.634-.34 1.764 1.764 0 0 0-.723-.03c-.24.05-.467.14-.662.29a1.55 1.55 0 0 0-.466.53Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="wheel">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438a685b">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438aa039">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438b75df">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438b75df" d="m5.774 941.685 9.784.482a38.556 38.556 0 0 1 4.863-14.948 38.22 38.22 0 0 1 10.41-11.717l-5.345-8.278c-1.289-2.311-.621-5.247 1.766-6.594 2.385-1.3 5.201-.53 6.538 1.78l4.438 8.76a38.38 38.38 0 0 1 30.545 0l4.439-8.76c1.335-2.31 4.151-3.08 6.538-1.78 2.386 1.347 3.054 4.283 1.766 6.594l-5.345 8.278a38.204 38.204 0 0 1 10.409 11.717 38.54 38.54 0 0 1 4.863 14.948l9.783-.482c1.266 0 2.48.507 3.376 1.41a4.842 4.842 0 0 1 0 6.807 4.754 4.754 0 0 1-3.376 1.41l-9.783-.482a38.522 38.522 0 0 1-4.863 14.948 38.267 38.267 0 0 1-10.409 11.721l5.345 8.27c1.288 2.311.62 5.251-1.766 6.601-2.387 1.3-5.203.53-6.538-1.78l-4.439-8.761a38.41 38.41 0 0 1-15.273 3.17 38.409 38.409 0 0 1-15.272-3.17l-4.438 8.761c-1.337 2.31-4.153 3.08-6.538 1.78-2.387-1.35-3.055-4.29-1.766-6.601l5.345-8.27a38.259 38.259 0 0 1-10.41-11.721 38.54 38.54 0 0 1-4.863-14.948l-9.784.482a4.752 4.752 0 0 1-3.375-1.41 4.84 4.84 0 0 1 0-6.807 4.752 4.752 0 0 1 3.375-1.41Zm33.742 1.685c.622-2.936 2.196-5.535 4.44-7.509l-7.923-12.225a28.895 28.895 0 0 0-10.929 19.012l14.412.722ZM53.5 932.059c1.528 0 2.96.241 4.296.674l6.586-12.947A28.138 28.138 0 0 0 53.5 917.62c-3.866 0-7.541.77-10.881 2.166l6.586 12.947a13.86 13.86 0 0 1 4.295-.674Zm13.984 11.311 14.413-.722a28.891 28.891 0 0 0-10.929-19.012l-7.922 12.225c2.243 1.974 3.818 4.573 4.438 7.509Zm0 6.257c-.62 2.936-2.195 5.535-4.438 7.509l7.922 12.225a28.891 28.891 0 0 0 10.929-19.012l-14.413-.722ZM53.5 960.938a14.39 14.39 0 0 1-4.342-.674l-6.539 12.944a28.06 28.06 0 0 0 10.881 2.17c3.866 0 7.541-.77 10.882-2.17l-6.539-12.944a14.386 14.386 0 0 1-4.343.674Zm-13.984-11.311-14.412.722c1.05 7.701 5.058 14.487 10.929 19.012l7.923-12.225c-2.244-1.974-3.818-4.573-4.44-7.509Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="umbrella">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac38">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac39">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438bac3a">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438c0cc1">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438c0cc1" d="M86.379 766.938A46.14 46.14 0 0 0 58.08 753.54a1.686 1.686 0 0 1-1.429-1.167 3.28 3.28 0 0 0-6.302 0 1.68 1.68 0 0 1-1.429 1.167C25.166 755.891 7.049 775.848 7 799.72a3.4 3.4 0 0 0 1.504 2.879 3.317 3.317 0 0 0 4.166-.431c4.201-4.202 11.01-4.208 15.218-.013a3.312 3.312 0 0 0 4.692.031 12.99 12.99 0 0 1 16.916-1.218c.429.323.682.83.683 1.368v30.603c0 1.786-1.371 3.322-3.154 3.414a3.305 3.305 0 0 1-1.321-.203 3.31 3.31 0 0 1-1.899-1.805 3.33 3.33 0 0 1-.269-1.31 3.324 3.324 0 0 0-3.382-3.321c-1.868.033-3.3 1.683-3.259 3.549A9.978 9.978 0 0 0 46.728 843c5.581.07 10.093-4.553 10.093-10.133v-30.531c0-.538.253-1.045.684-1.368a12.991 12.991 0 0 1 16.897 1.2 3.323 3.323 0 0 0 4.695 0c4.208-4.204 11.025-4.204 15.233 0a3.322 3.322 0 0 0 4.056.5 3.41 3.41 0 0 0 1.614-2.95 46.207 46.207 0 0 0-13.621-32.78Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="zombie">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f12">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438c7f13">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438cadb5">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438cadb5" d="M53.5 693c25.681 0 46.5-20.819 46.5-46.5S79.181 600 53.5 600 7 620.819 7 646.5 27.819 693 53.5 693Zm8.618-24.344a4 4 0 0 1-4 4h-9.235a4 4 0 0 1-4-4v-6.185h.035a8.618 8.618 0 0 1 17.164 0h.036v6.185Zm3.006-26.657a4.5 4.5 0 0 1 4.501-4.5h9.599a4.5 4.5 0 1 1 0 9.001h-9.599a4.5 4.5 0 0 1-4.501-4.501Zm-32.259 8.57a8.428 8.428 0 1 0 0-16.857 8.428 8.428 0 0 0 0 16.857Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="cross">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13d">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13e">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce13f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438ce140">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438ce140" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb1">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb2">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb3">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb3" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb4">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb5">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438d1bb6">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438d1bb6" d="m86.5 450-66 66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475c">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475d">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475e">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438d475f">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438d475f" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-        </g>
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438d4760">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3d">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3e">
-              <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac3e" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-            </g>
-          </g>
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac3f">
-            <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac40">
-              <g id="shape-cecb00c8-e6c7-8042-8001-e064438dac41">
-                <path id="fills-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero"/>
-                <path id="strokes-cecb00c8-e6c7-8042-8001-e064438dac41" d="m86.5 517-66-66" style="fill:none;fill-rule:nonzero;stroke:#4f4f4f;stroke-width:41px"/>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="skull">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a4">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438de3a5">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc0">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e1fc0" d="M81.4 374.401v13.949a4.651 4.651 0 0 1-4.65 4.65h-46.5a4.651 4.651 0 0 1-4.65-4.65v-13.949H11.65A4.651 4.651 0 0 1 7 369.75V346.5C7 320.819 27.818 300 53.5 300s46.5 20.819 46.5 46.5v23.25a4.652 4.652 0 0 1-4.65 4.651H81.4ZM32.575 355.8a6.966 6.966 0 0 0 4.932-2.043 6.972 6.972 0 0 0 0-9.863 6.972 6.972 0 0 0-4.932-2.044 6.976 6.976 0 0 0 0 13.95Zm41.85 0a6.983 6.983 0 0 0 6.445-4.305 6.983 6.983 0 0 0-1.513-7.601 6.975 6.975 0 1 0-4.932 11.906Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="triangle">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc2">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e1fc3">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438e5256">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438e5256" d="M50.085 151.938c1.547-2.584 5.283-2.584 6.83 0l21.644 36.148 26.867 44.87c1.593 2.66-.319 6.044-3.415 6.044H4.989c-3.096 0-5.008-3.384-3.415-6.044l48.511-81.018Z" style="fill:#4f4f4f;fill-rule:nonzero"/>
-          </g>
-        </g>
-      </g>
-    </g>
-    <g id="robot">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808a">
-        <g id="shape-cecb00c8-e6c7-8042-8001-e064438e808b">
-          <g id="shape-cecb00c8-e6c7-8042-8001-e064438ec86f">
-            <path id="fills-cecb00c8-e6c7-8042-8001-e064438ec86f" d="M11.001 0A4 4 0 0 0 7 4.001v84.998A4 4 0 0 0 11.001 93h84.998A4 4 0 0 0 100 88.999V4.001A4 4 0 0 0 95.999 0H11.001Zm14.53 71.63a4 4 0 0 0 0 8.001H82.05a4 4 0 0 0 0-8.001H25.531ZM41.293 46.5c0 5.457-4.423 9.881-9.881 9.881-5.457 0-9.881-4.424-9.881-9.881 0-5.458 4.424-9.881 9.881-9.881a9.88 9.88 0 0 1 9.881 9.881Zm34.876 9.881c5.457 0 9.881-4.424 9.881-9.881 0-5.458-4.424-9.881-9.881-9.881a9.88 9.88 0 0 0-9.881 9.881c0 5.457 4.423 9.881 9.881 9.881Z" style="fill:#4f4f4f"/>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/skull.svg

@@ -1,3 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M128 128V152C128 154.122 127.157 156.157 125.657 157.657C124.157 159.157 122.122 160 120 160H40C37.8783 160 35.8434 159.157 34.3431 157.657C32.8429 156.157 32 154.122 32 152V128H8C5.87827 128 3.84344 127.157 2.34315 125.657C0.842854 124.157 0 122.122 0 120V80C0 35.816 35.816 0 80 0C124.184 0 160 35.816 160 80V120C160 122.122 159.157 124.157 157.657 125.657C156.157 127.157 154.122 128 152 128H128ZM44 96C45.5759 96 47.1363 95.6896 48.5922 95.0866C50.0481 94.4835 51.371 93.5996 52.4853 92.4853C53.5996 91.371 54.4835 90.0481 55.0866 88.5922C55.6896 87.1363 56 85.5759 56 84C56 82.4241 55.6896 80.8637 55.0866 79.4078C54.4835 77.9519 53.5996 76.629 52.4853 75.5147C51.371 74.4004 50.0481 73.5165 48.5922 72.9134C47.1363 72.3104 45.5759 72 44 72C40.8174 72 37.7652 73.2643 35.5147 75.5147C33.2643 77.7652 32 80.8174 32 84C32 87.1826 33.2643 90.2348 35.5147 92.4853C37.7652 94.7357 40.8174 96 44 96V96ZM116 96C117.576 96 119.136 95.6896 120.592 95.0866C122.048 94.4835 123.371 93.5996 124.485 92.4853C125.6 91.371 126.483 90.0481 127.087 88.5922C127.69 87.1363 128 85.5759 128 84C128 82.4241 127.69 80.8637 127.087 79.4078C126.483 77.9519 125.6 76.629 124.485 75.5147C123.371 74.4004 122.048 73.5165 120.592 72.9134C119.136 72.3104 117.576 72 116 72C112.817 72 109.765 73.2643 107.515 75.5147C105.264 77.7652 104 80.8174 104 84C104 87.1826 105.264 90.2348 107.515 92.4853C109.765 94.7357 112.817 96 116 96V96Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/spark.svg

@@ -1,3 +0,0 @@
-<svg width="71" height="160" viewBox="0 0 71 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M46.0487 1.44933L0.31669 85.4277C0.0961505 85.8324 -0.0125389 86.2853 0.00115029 86.7425C0.0148395 87.1997 0.150442 87.6457 0.394826 88.0374C0.63921 88.4291 0.984097 88.7532 1.39609 88.9783C1.80809 89.2034 2.27323 89.3218 2.74649 89.3222H23.9111C24.3123 89.3218 24.7087 89.4064 25.0725 89.5698C25.4363 89.7333 25.7586 89.9718 26.0169 90.2685C26.2752 90.5652 26.4631 90.913 26.5675 91.2873C26.6719 91.6617 26.6903 92.0536 26.6213 92.4356L14.9835 156.888C14.8997 157.354 14.946 157.833 15.1177 158.276C15.2893 158.718 15.5801 159.109 15.9599 159.407C16.3397 159.704 16.7949 159.899 17.2785 159.97C17.762 160.041 18.2564 159.986 18.7107 159.811C19.3069 159.58 19.8009 159.155 20.107 158.61L70.1324 69.6054C70.4531 69.0353 70.5469 68.3715 70.396 67.7392C70.2451 67.1069 69.86 66.5498 69.3133 66.1731L68.2138 65.3921C67.7322 65.0625 67.1547 64.8895 66.5646 64.898L43.8828 65.3496C43.4778 65.3556 43.0765 65.275 42.7075 65.1136C42.3385 64.9522 42.011 64.714 41.7483 64.416C41.4857 64.118 41.2944 63.7676 41.1883 63.3898C41.0821 63.0121 41.0636 62.6163 41.1341 62.2308L51.8264 3.66488C51.9095 3.21417 51.8706 2.75035 51.7136 2.31841C51.5566 1.88648 51.2868 1.50108 50.9303 1.19962L50.3201 0.66831C50.006 0.399316 49.6324 0.203403 49.2278 0.0955845C48.8233 -0.0122335 48.3985 -0.0290945 47.9862 0.0463015C47.5739 0.121697 47.1849 0.287347 46.849 0.530547C46.5132 0.773746 46.2394 1.08804 46.0487 1.44933V1.44933Z" fill="#4F4F4F"/>
-</svg>

docs/.vitepress/theme/assets/third-row copy.svg

@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-cecb00c8-e6c7-8042-8001-e0554a46bb12" width="105.468" height="1892.988" fill="none" style="-webkit-print-color-adjust:exact" version="1.1">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e0554a46bb12" style="fill:#000">
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48036c">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a48036c" cx="52.734" cy="1846.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17794">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17795">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17795" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17795" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17796">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17796" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17796" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567f9fe93c">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567f9fe93c" d="M90.993 1544.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567b140126">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567b140126" fill-rule="evenodd" d="m52.734 1438.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562 0-14.891 11.662-26.504 26.504-26.504 8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74c">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74d">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74d" d="M17.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74e" d="M78.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74f">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74f" fill-rule="evenodd" d="M26.075 1208c-9.301 0-16.841 7.54-16.841 16.841v66.417a3.743 3.743 0 0 0 3.743 3.742h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab2" clip-path="url(#01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90)" style="fill:#000">
-      <defs>
-        <clipPath id="01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90" class="svg-def" transform="translate(-4.859 -50.74)">
-          <path fill="#fff" d="M11.1 1100.74h92.987v92.987H11.1z"/>
-        </clipPath>
-      </defs>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4b502b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4b502b" d="M85.61 1066.94a46.111 46.111 0 0 0-28.297-13.39 1.795 1.795 0 0 1-.889-.37 1.716 1.716 0 0 1-.539-.8 3.316 3.316 0 0 0-1.178-1.72 3.335 3.335 0 0 0-1.973-.66c-.712 0-1.404.24-1.973.66a3.316 3.316 0 0 0-1.178 1.72c-.098.31-.286.59-.539.8-.254.2-.563.33-.889.37a46.47 46.47 0 0 0-29.846 15.01 46.51 46.51 0 0 0-12.069 31.16 3.423 3.423 0 0 0 1.503 2.88c.639.41 1.401.6 2.16.52a3.375 3.375 0 0 0 2.006-.95 10.755 10.755 0 0 1 7.606-3.16c2.852 0 5.589 1.13 7.61 3.14.306.31.669.56 1.071.73.401.17.832.26 1.268.26.436.01.868-.08 1.272-.24.403-.17.771-.41 1.08-.72a13.053 13.053 0 0 1 8.231-3.75c3.104-.22 6.185.68 8.683 2.54.212.15.384.36.503.6.118.24.18.5.18.76v30.6c0 1.79-1.37 3.32-3.153 3.41-.449.03-.899-.04-1.321-.2-.423-.15-.809-.4-1.135-.71a3.34 3.34 0 0 1-.764-1.09 3.356 3.356 0 0 1-.269-1.31c0-.44-.088-.88-.258-1.29-.171-.4-.421-.77-.736-1.08a3.27 3.27 0 0 0-2.387-.95c-1.868.03-3.3 1.68-3.259 3.55a9.963 9.963 0 0 0 2.954 6.84 9.977 9.977 0 0 0 6.878 2.89c5.58.07 10.092-4.55 10.092-10.13v-30.53c0-.26.062-.52.18-.76.119-.24.291-.45.503-.6a12.964 12.964 0 0 1 16.895 1.2 3.33 3.33 0 0 0 4.695 0 10.778 10.778 0 0 1 7.616-3.16c2.856 0 5.595 1.14 7.615 3.16a3.33 3.33 0 0 0 1.942.94c.735.09 1.479-.06 2.114-.44.501-.31.913-.75 1.196-1.27.282-.51.426-1.1.417-1.68a46.206 46.206 0 0 0-13.618-32.78Z" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea14">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea14" d="M90.993 944.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab1">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4aeab1" fill-rule="evenodd" d="m52.734 838.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562C4.545 761.613 16.207 750 31.049 750c8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055d85aedd9">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4555">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4555" d="M17.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4ab72e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4ab72e" d="M78.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4554">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4554" fill-rule="evenodd" d="M26.075 608c-9.301 0-16.841 7.54-16.841 16.841v66.417A3.743 3.743 0 0 0 12.977 695h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a49a0ca">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a49a0ca" fill-rule="evenodd" d="M49.304 451.942c1.554-2.589 5.307-2.589 6.86 0l48.729 81.213c1.599 2.666-.321 6.058-3.43 6.058H4.006c-3.109 0-5.029-3.392-3.43-6.058l48.728-81.213Zm12.147 40.777a8.718 8.718 0 1 1-17.435 0 8.718 8.718 0 0 1 17.435 0Zm-22.084 21.76a2 2 0 0 1 2-2H63.52a2 2 0 0 1 2 2v8.205c0 .258-.049.504-.138.731.091.414.138.838.138 1.269 0 4.815-5.855 8.718-13.077 8.718-7.222 0-13.076-3.903-13.076-8.718 0-.431.047-.855.137-1.27a2.007 2.007 0 0 1-.137-.73v-8.205Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055877aa3c7">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a492a2b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a492a2b" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a492a2b" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a497e94">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a497e94" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a497e94" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48e83e">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a48e83e" d="m59.02 150.843-26.578 48.806a1.502 1.502 0 0 0 .045 1.516c.142.228.343.416.582.547.239.131.51.2.785.2h12.3c.233 0 .464.049.675.144.212.095.399.234.549.406.15.172.259.375.32.592.061.218.071.445.031.667l-6.763 37.459a1.49 1.49 0 0 0 .078.806c.099.257.268.484.489.657a1.634 1.634 0 0 0 1.599.235c.346-.134.633-.381.811-.698l29.074-51.727c.186-.331.241-.717.153-1.084a1.547 1.547 0 0 0-.629-.911l-.639-.454a1.661 1.661 0 0 0-.959-.287l-13.182.263a1.668 1.668 0 0 1-.683-.137 1.597 1.597 0 0 1-.557-.406 1.492 1.492 0 0 1-.357-1.27l6.214-34.037a1.488 1.488 0 0 0-.066-.782 1.55 1.55 0 0 0-.455-.651l-.355-.308a1.646 1.646 0 0 0-2.017-.08 1.558 1.558 0 0 0-.465.534Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea15">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea15" cx="52.734" cy="46.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/third-row.svg

@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-cecb00c8-e6c7-8042-8001-e0554a46bb12" width="105.468" height="1892.988" fill="none" style="-webkit-print-color-adjust:exact" version="1.1">
-  <g id="shape-cecb00c8-e6c7-8042-8001-e0554a46bb12" style="fill:#000">
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48036c">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a48036c" cx="52.734" cy="1846.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17794">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17795">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17795" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17795" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1670-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0568ca17796">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0568ca17796" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0568ca17796" stroke-linecap="round" stroke-linejoin="round" d="m77.734 1720-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567f9fe93c">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567f9fe93c" d="M90.993 1544.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0567b140126">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0567b140126" fill-rule="evenodd" d="m52.734 1438.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562 0-14.891 11.662-26.504 26.504-26.504 8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74c">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74d">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74d" d="M17.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74e" d="M78.109 1203.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e05675c7d74f">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e05675c7d74f" fill-rule="evenodd" d="M26.075 1208c-9.301 0-16.841 7.54-16.841 16.841v66.417a3.743 3.743 0 0 0 3.743 3.742h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab2" clip-path="url(#01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90)" style="fill:#000">
-      <defs>
-        <clipPath id="01eb2006-bdb3-80d7-8001-e05f4ced6213-clip0_330_90" class="svg-def" transform="translate(-4.859 -50.74)">
-          <path fill="#fff" d="M11.1 1100.74h92.987v92.987H11.1z"/>
-        </clipPath>
-      </defs>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4b502b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4b502b" d="M85.61 1066.94a46.111 46.111 0 0 0-28.297-13.39 1.795 1.795 0 0 1-.889-.37 1.716 1.716 0 0 1-.539-.8 3.316 3.316 0 0 0-1.178-1.72 3.335 3.335 0 0 0-1.973-.66c-.712 0-1.404.24-1.973.66a3.316 3.316 0 0 0-1.178 1.72c-.098.31-.286.59-.539.8-.254.2-.563.33-.889.37a46.47 46.47 0 0 0-29.846 15.01 46.51 46.51 0 0 0-12.069 31.16 3.423 3.423 0 0 0 1.503 2.88c.639.41 1.401.6 2.16.52a3.375 3.375 0 0 0 2.006-.95 10.755 10.755 0 0 1 7.606-3.16c2.852 0 5.589 1.13 7.61 3.14.306.31.669.56 1.071.73.401.17.832.26 1.268.26.436.01.868-.08 1.272-.24.403-.17.771-.41 1.08-.72a13.053 13.053 0 0 1 8.231-3.75c3.104-.22 6.185.68 8.683 2.54.212.15.384.36.503.6.118.24.18.5.18.76v30.6c0 1.79-1.37 3.32-3.153 3.41-.449.03-.899-.04-1.321-.2-.423-.15-.809-.4-1.135-.71a3.34 3.34 0 0 1-.764-1.09 3.356 3.356 0 0 1-.269-1.31c0-.44-.088-.88-.258-1.29-.171-.4-.421-.77-.736-1.08a3.27 3.27 0 0 0-2.387-.95c-1.868.03-3.3 1.68-3.259 3.55a9.963 9.963 0 0 0 2.954 6.84 9.977 9.977 0 0 0 6.878 2.89c5.58.07 10.092-4.55 10.092-10.13v-30.53c0-.26.062-.52.18-.76.119-.24.291-.45.503-.6a12.964 12.964 0 0 1 16.895 1.2 3.33 3.33 0 0 0 4.695 0 10.778 10.778 0 0 1 7.616-3.16c2.856 0 5.595 1.14 7.615 3.16a3.33 3.33 0 0 0 1.942.94c.735.09 1.479-.06 2.114-.44.501-.31.913-.75 1.196-1.27.282-.51.426-1.1.417-1.68a46.206 46.206 0 0 0-13.618-32.78Z" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea14">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea14" d="M90.993 944.41c2.322 1.4 2.322 4.78 0 6.179l-72.826 43.892c-2.391 1.441-5.433-.288-5.433-3.09v-87.783c0-2.8 3.042-4.53 5.433-3.089l72.826 43.891Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4aeab1">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4aeab1" fill-rule="evenodd" d="m52.734 838.427-6.987-6.361c-24.818-22.505-41.202-37.395-41.202-55.562C4.545 761.613 16.207 750 31.049 750c8.385 0 16.433 3.903 21.685 10.023 5.253-6.12 13.3-10.023 21.685-10.023 14.842 0 26.504 11.613 26.504 26.504 0 18.167-16.384 33.057-41.201 55.562l-6.988 6.361Zm-8.088-50.36a6.102 6.102 0 1 1-12.204 0 6.102 6.102 0 0 1 12.204 0Zm22.957 6.102a6.102 6.102 0 1 0 0-12.204 6.102 6.102 0 0 0 0 12.204Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055d85aedd9">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4555">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4555" d="M17.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H19.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4ab72e">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4ab72e" d="M78.109 603.216c2.5-4.288 8.751-4.288 11.251 0l2.994 5.135c2.501 4.289-.625 9.649-5.625 9.649H80.74c-5.001 0-8.126-5.36-5.626-9.649l2.995-5.135Z" style="fill:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a4a4554">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a4a4554" fill-rule="evenodd" d="M26.075 608c-9.301 0-16.841 7.54-16.841 16.841v66.417A3.743 3.743 0 0 0 12.977 695h66.416c9.301 0 16.841-7.54 16.841-16.841v-53.318c0-9.301-7.54-16.841-16.841-16.841H26.075Zm23.426 64.058c1.445 2.476 5.022 2.476 6.466 0l1.096-1.881c1.456-2.494-.344-5.627-3.232-5.627h-2.194c-2.888 0-4.688 3.133-3.232 5.627l1.096 1.881Zm18.686-7.22a2.807 2.807 0 0 1 1.027-3.834l7.382-4.263a2.808 2.808 0 0 1 2.807 4.863l-7.382 4.261a2.806 2.806 0 0 1-3.834-1.027Zm-32.196 16.308a2.806 2.806 0 1 0-2.807-4.862l-7.382 4.263a2.807 2.807 0 1 0 2.807 4.861l7.382-4.262Zm32.828-7.064a2.806 2.806 0 0 1 3.834-1.028l7.382 4.262a2.807 2.807 0 0 1-2.807 4.862l-7.382-4.262a2.807 2.807 0 0 1-1.027-3.834Zm-36.267-4.987a2.807 2.807 0 1 0 2.807-4.861l-7.382-4.262a2.807 2.807 0 0 0-2.806 4.861l7.381 4.262Zm-1.328-35.539a1.87 1.87 0 0 0-1.871 1.871v1.455c0 .777.048 1.567.008 2.342a5.981 5.981 0 1 0 11.95.091c-.007-.186.004-.375.004-.562v-3.326a1.87 1.87 0 0 0-1.871-1.871h-8.22Zm32.929 1.871a1.87 1.87 0 0 1 1.871-1.871h8.22a1.87 1.87 0 0 1 1.871 1.871v3.326c0 .187-.011.376-.004.562a5.981 5.981 0 1 1-11.95-.091c.04-.775-.008-1.565-.008-2.342v-1.455Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a49a0ca">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a49a0ca" fill-rule="evenodd" d="M49.304 451.942c1.554-2.589 5.307-2.589 6.86 0l48.729 81.213c1.599 2.666-.321 6.058-3.43 6.058H4.006c-3.109 0-5.029-3.392-3.43-6.058l48.728-81.213Zm12.147 40.777a8.718 8.718 0 1 1-17.435 0 8.718 8.718 0 0 1 17.435 0Zm-22.084 21.76a2 2 0 0 1 2-2H63.52a2 2 0 0 1 2 2v8.205c0 .258-.049.504-.138.731.091.414.138.838.138 1.269 0 4.815-5.855 8.718-13.077 8.718-7.222 0-13.076-3.903-13.076-8.718 0-.431.047-.855.137-1.27a2.007 2.007 0 0 1-.137-.73v-8.205Z" clip-rule="evenodd" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e055877aa3c7">
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a492a2b">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a492a2b" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a492a2b" stroke-linecap="round" stroke-linejoin="round" d="m77.734 320-50 50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-      <g id="shape-cecb00c8-e6c7-8042-8001-e0554a497e94">
-        <path id="fills-cecb00c8-e6c7-8042-8001-e0554a497e94" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" style="fill:none"/>
-        <path id="strokes-cecb00c8-e6c7-8042-8001-e0554a497e94" stroke-linecap="round" stroke-linejoin="round" d="m77.734 370-50-50" class="stroke-shape" style="fill:none;stroke-width:41;stroke:#fbb03b"/>
-      </g>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a48e83e">
-      <path id="fills-cecb00c8-e6c7-8042-8001-e0554a48e83e" d="m59.02 150.843-26.578 48.806a1.502 1.502 0 0 0 .045 1.516c.142.228.343.416.582.547.239.131.51.2.785.2h12.3c.233 0 .464.049.675.144.212.095.399.234.549.406.15.172.259.375.32.592.061.218.071.445.031.667l-6.763 37.459a1.49 1.49 0 0 0 .078.806c.099.257.268.484.489.657a1.634 1.634 0 0 0 1.599.235c.346-.134.633-.381.811-.698l29.074-51.727c.186-.331.241-.717.153-1.084a1.547 1.547 0 0 0-.629-.911l-.639-.454a1.661 1.661 0 0 0-.959-.287l-13.182.263a1.668 1.668 0 0 1-.683-.137 1.597 1.597 0 0 1-.557-.406 1.492 1.492 0 0 1-.357-1.27l6.214-34.037a1.488 1.488 0 0 0-.066-.782 1.55 1.55 0 0 0-.455-.651l-.355-.308a1.646 1.646 0 0 0-2.017-.08 1.558 1.558 0 0 0-.465.534Z" style="fill:#fbb03b"/>
-    </g>
-    <g id="shape-cecb00c8-e6c7-8042-8001-e0554a47ea15">
-      <circle id="fills-cecb00c8-e6c7-8042-8001-e0554a47ea15" cx="52.734" cy="46.494" r="46.494" style="fill:#fbb03b"/>
-    </g>
-  </g>
-</svg>

docs/.vitepress/theme/assets/triangle copy.svg

@@ -1,3 +0,0 @@
-<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.5737 5.69079C54.1285 3.10866 57.8722 3.10866 59.4271 5.6908L108.349 86.9366C109.955 89.6026 108.035 93 104.923 93H7.07816C3.96616 93 2.04612 89.6026 3.65144 86.9366L52.5737 5.69079Z" fill="#82DBC5"/>
-</svg>

docs/.vitepress/theme/assets/triangle.svg

@@ -1,3 +0,0 @@
-<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.5737 5.69079C54.1285 3.10866 57.8722 3.10866 59.4271 5.6908L108.349 86.9366C109.955 89.6026 108.035 93 104.923 93H7.07816C3.96616 93 2.04612 89.6026 3.65144 86.9366L52.5737 5.69079Z" fill="#82DBC5"/>
-</svg>

docs/.vitepress/theme/assets/trianglle-face.svg

@@ -1,3 +0,0 @@
-<svg width="186" height="157" viewBox="0 0 186 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M89.5114 1.94202C91.0651 -0.647335 94.8178 -0.647343 96.3714 1.94201L185.307 150.167C186.906 152.833 184.986 156.225 181.877 156.225H4.00618C0.896997 156.225 -1.02345 152.833 0.576207 150.167L89.5114 1.94202ZM107.941 76.2254C107.941 84.5097 101.225 91.2254 92.9408 91.2254C84.6565 91.2254 77.9408 84.5097 77.9408 76.2254C77.9408 67.9411 84.6565 61.2254 92.9408 61.2254C101.225 61.2254 107.941 67.9411 107.941 76.2254ZM69.9408 112.226C69.9408 111.121 70.8362 110.226 71.9408 110.226H112.941C114.045 110.226 114.941 111.121 114.941 112.226V129.226C114.941 129.439 114.907 129.644 114.846 129.837C114.909 130.294 114.941 130.757 114.941 131.226C114.941 139.51 104.867 146.226 92.4408 146.226C80.0144 146.226 69.9408 139.51 69.9408 131.226C69.9408 130.757 69.973 130.294 70.0359 129.837C69.9742 129.644 69.9408 129.439 69.9408 129.226V112.226Z" fill="#FBB03B"/>
-</svg>

docs/.vitepress/theme/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

docs/.vitepress/theme/components/BlenderCube.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-import { useTresContext } from '@tresjs/core'
-
-const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
-const model = nodes.Cube
-
-model.position.set(0, 1, 0)
-
-const state = useTresContext()
-
-state.renderer.invalidate()
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>

docs/.vitepress/theme/components/Cookbook.vue

@@ -1,41 +0,0 @@
-<script setup>
-import { useData } from 'vitepress'
-import { computed } from 'vue'
-import { data as recipes } from '../recipes.data.ts'
-
-const { lang } = useData()
-
-const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang === lang.value.split('-')[0]))
-</script>
-
-<template>
-  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 -mx-4 pt-8">
-    <li
-      v-for="recipe of filteredRecipes"
-      :key="recipe.title"
-      class="list-none important-m-0"
-    >
-      <a
-        :href="recipe.url"
-      >
-        <img
-          :src="recipe.thumbnail"
-          :alt="recipe.title"
-          class="aspect-video object-cover rounded-lg"
-        />
-
-        <h3>
-          {{ recipe.title }}
-          <span
-            v-for="n in recipe.difficulty"
-            :key="n"
-            aria-label="chili"
-            role="img"
-            class="text-sm"
-          >🌶️</span>
-
-        </h3></a>
-      <p>{{ recipe.excerpt }}</p>
-    </li>
-  </ul>
-</template>

docs/.vitepress/theme/components/DonutExample.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[3, 3, 3]"
-      :fov="45"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-    <TresMesh>
-      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-      <TresMeshBasicMaterial color="orange" />
-    </TresMesh>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  url: string
-}>()
-</script>
-
-<template>
-  <iframe
-    frameborder="0"
-    class="w-full aspect-video border-inset-0 b-1 b-gray-500 border-opacity-50 rounded"
-    src="https://playground.tresjs.org/experiments/tres-donut/"
-  ></iframe>
-</template>

docs/.vitepress/theme/components/ExtendExample.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
-
-const styles = {
-  width: '100%',
-  height: '550px',
-  border: '1px solid #e2e2e2',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}
-
-const { camera, renderer } = useTresContext()
-</script>
-
-<template>
-  <ClientOnly>
-    <TresCanvas
-      shadows
-      clear-color="#fff"
-      :style="styles"
-    >
-      <TresPerspectiveCamera :position="[0, 2, 4]" />
-      <TresScene>
-        <TresOrbitControls
-          v-if="renderer"
-          :args="[camera, renderer?.domElement]"
-        />
-
-        <TresDirectionalLight
-          :position="[0, 2, 4]"
-          :intensity="2"
-          cast-shadow
-        />
-        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-          <TresMeshToonMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
-    </TresCanvas>
-  </ClientOnly>
-</template>

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
-const gl = {
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :position="[11, 11, 11]"
-      :fov="45"
-      :aspect="1"
-      :near="0.1"
-      :far="1000"
-      :look-at="[0, 0, 0]"
-    />
-    <OrbitControls />
-    <TresMesh
-      :position="[-2, 6, 0]"
-      :rotation="[0, Math.PI, 0]"
-      cast-shadow
-    >
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, 4, 0]"
-      cast-shadow
-    >
-      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-      <TresMeshToonMaterial color="#4F4F4F" />
-    </TresMesh>
-    <TresMesh
-      :position="[2, 2, 0]"
-      cast-shadow
-    >
-      <TresSphereGeometry />
-      <TresMeshToonMaterial color="#FBB03B" />
-    </TresMesh>
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-      cast-shadow
-    />
-    <TresMesh
-      :rotation="[-Math.PI / 2, 0, 0]"
-      receive-shadow
-    >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshToonMaterial color="#D3FC8A" />
-    </TresMesh>
-    <TresAmbientLight :intensity="0.75" />
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="2"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-/* import { OrbitControls } from '@tresjs/cientos' */
-
-const styles = {
-  width: '100%',
-  height: '550px',
-  border: '1px solid #e2e2e2',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <TresCanvas
-      shadows
-      clear-color="#fff"
-      :style="styles"
-    >
-      <TresPerspectiveCamera :position="[0, 2, 4]" />
-      <OrbitControls />
-      <TresDirectionalLight
-        :position="[0, 2, 4]"
-        :intensity="2"
-        cast-shadow
-      />
-      <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-        <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-    </TresCanvas>
-  </ClientOnly>
-</template>

docs/.vitepress/theme/components/GraphPane.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import { useRafFn } from '@vueuse/core'
-import { ref } from 'vue'
-import { useState } from '../composables/state'
-
-const width = 160
-const height = 40
-const strokeWidth = 2
-const updateInterval = 100 // Update interval in milliseconds
-const topOffset = 0 // Offset from the top
-
-const points = ref('')
-const frameTimes = ref([])
-const maxFrames = ref(width / strokeWidth)
-
-let lastUpdateTime = performance.now()
-
-const { renderingTimes } = useState()
-
-useRafFn(({ timestamp }) => {
-  if (timestamp - lastUpdateTime >= updateInterval) {
-    lastUpdateTime = timestamp
-
-    frameTimes.value.push(renderingTimes?.value)
-    renderingTimes.value = 0
-
-    if (frameTimes.value.length > maxFrames.value) {
-      frameTimes.value.shift()
-    }
-
-    points.value = frameTimes.value
-      .map(
-        (value, index) =>
-          `${index * strokeWidth},${
-            height + topOffset - strokeWidth / 2 - (value * (height + topOffset - strokeWidth)) / 2
-          }`,
-      )
-      .join(' ')
-  }
-})
-</script>
-
-<template>
-  <div
-    class="absolute
-      right-2
-      top-2
-      flex
-      px-4
-      py-1
-      justify-between
-      gap-4
-      items-center
-      mb-2
-      z-10
-      bg-white
-      dark:bg-dark
-      shadow-xl
-      rounded
-      border-4
-      border-solid
-      bg-primary
-      border-primary
-      pointer-events-none
-      overflow-hidden"
-  >
-    <label class="text-secondary text-xs w-1/3">Rendering Activity</label>
-
-    <div
-      class="
-        bg-gray-100
-        dark:bg-gray-600
-        relative
-        w-2/3
-        p-1
-        rounded
-        text-right
-        text-xs
-        focus:border-gray-200
-        outline-none
-        border-none
-        font-sans
-      "
-    >
-      <svg
-        :width="width"
-        :height="height"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-      >
-        <polyline
-          :points="points"
-          stroke="lightgray"
-          :stroke-width="strokeWidth"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  </div>
-</template>

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { VPHomeSponsors } from 'vitepress/theme'
-
-/* const { data } = useSponsor() */
-</script>
-
-<template>
-  <VPHomeSponsors
-    message="TresJS is free and open source, made possible by wonderful sponsors."
-    :data="[]"
-  />
-  <div class="action">
-    <a
-      class="sponsor"
-      href="https://github.com/sponsors/tresjs"
-      target="_blank"
-      rel="noreferrer"
-    >
-      Become a sponsor
-    </a>
-  </div>
-  <div class="action">
-    <p class="message">Consider supporting our friends</p>
-  </div>
-  <ul class="action flex flex-wrap w-full sm:w-2/3 md:1/3 mx-auto">
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/vitejs"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Vite <i class="i-logos-vitejs ml-2"></i>
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/patak-dev"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Patak <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/583075?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/antfu"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Anthony Fu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/posva"
-        target="_blank"
-        rel="noreferrer"
-      >
-        posva <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/664177?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/johnsoncodehk"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Johnson Chu <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/16279759?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/CodyJasonBennett"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Cody Bennett <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23324155?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/danielroe "
-        target="_blank"
-        rel="noreferrer"
-      >
-        Daniel Roe <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="" />
-      </a>
-    </li>
-    <li>
-      <a
-        class="sponsor"
-        href="https://github.com/sponsors/nuxt"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Nuxt <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23360933?s=160&v=4" alt="" />
-      </a>
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-.action {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  padding-top: 4rem;
-}
-
-.sponsor {
-  /* .VPButton */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  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/LocalOrbitControls.vue

@@ -1,316 +0,0 @@
-<script lang="ts" setup>
-import type { TresVector3 } from '@tresjs/core'
-import type { Camera } from 'three'
-import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
-import { useEventListener } from '@vueuse/core'
-import { OrbitControls } from 'three-stdlib'
-import { onMounted, onUnmounted, shallowRef, unref } from 'vue'
-
-export interface OrbitControlsProps {
-  /**
-   * Whether to make this the default controls.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   */
-  makeDefault?: boolean
-  /**
-   * The camera to control.
-   *
-   * @type {Camera}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
-   */
-  camera?: Camera
-  /**
-   * The dom element to listen to.
-   *
-   * @type {HTMLElement}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
-   */
-  domElement?: HTMLElement
-  /**
-   * The target to orbit around.
-   *
-   * @type {TresVector3}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
-   */
-  target?: TresVector3
-  /**
-   * Whether to enable damping (inertia)
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
-   */
-  enableDamping?: boolean
-  /**
-   * The damping inertia used if `.enableDamping` is set to true
-   *
-   * @default 0.05
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
-   */
-  dampingFactor?: number
-  /**
-   * Set to true to automatically rotate around the target.
-   *
-   * @default false
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
-   */
-  autoRotate?: boolean
-  /**
-   * How fast to rotate around the target if `.autoRotate` is true.
-   *
-   * @default 2
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
-   */
-  autoRotateSpeed?: number
-  /**
-   * Whether to enable panning.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
-   */
-  enablePan?: boolean
-  /**
-   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
-   *
-   * @default 7.0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
-   */
-  keyPanSpeed?: number
-  /**
-   * This object contains references to the keycodes for controlling camera panning.
-   * Default is the 4 arrow keys.
-   *
-   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
-   * @type Record<string, string>
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
-   */
-  keys?: Record<string, string>
-  /**
-   * How far you can orbit horizontally, upper limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ). Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
-   */
-  maxAzimuthAngle?: number
-  /**
-   * How far you can orbit horizontally, lower limit.
-   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-   * with ( max - min < 2 PI ).
-   * Default is - Infinity.
-   *
-   * @default -Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
-   */
-  minAzimuthAngle?: number
-  /**
-   * How far you can orbit vertically, upper limit.
-   * Range is 0 to Math.PI radians, and default is Math.PI.
-   *
-   * @default Math.PI
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
-   */
-  maxPolarAngle?: number
-  /**
-   * How far you can orbit vertically, lower limit.
-   * Range is 0 to Math.PI radians, and default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
-   */
-  minPolarAngle?: number
-  /**
-   * The minimum distance of the camera to the target.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
-   */
-  minDistance?: number
-  /**
-   * The maximum distance of the camera to the target.
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
-   */
-  maxDistance?: number
-  /**
-   * The minimum field of view angle, in radians.
-   * Default is 0.
-   *
-   * @default 0
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
-   */
-  minZoom?: number
-  /**
-   * The maximum field of view angle, in radians.
-   * ( OrthographicCamera only ).
-   * Default is Infinity.
-   *
-   * @default Infinity
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
-   */
-  maxZoom?: number
-  touches?: {
-    ONE?: number
-    TWO?: number
-  }
-  /**
-   * Whether to enable zooming.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
-   */
-  enableZoom?: boolean
-  /**
-   * How fast to zoom in and out. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
-   */
-  zoomSpeed?: number
-  /**
-   * Whether to enable rotating.
-   *
-   * @default true
-   * @type {boolean}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
-   */
-  enableRotate?: boolean
-  /**
-   * How fast to rotate around the target. Default is 1.
-   *
-   * @default 1
-   * @type {number}
-   * @memberof OrbitControlsProps
-   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
-   */
-  rotateSpeed?: number
-}
-
-// TODO: remove disable once eslint is updated to support vue 3.3
-
-const {
-  autoRotate = false,
-  autoRotateSpeed = 2,
-  enableDamping = false,
-  dampingFactor = 0.05,
-  enablePan = true,
-  keyPanSpeed = 7,
-  maxAzimuthAngle = Number.POSITIVE_INFINITY,
-  minAzimuthAngle = Number.NEGATIVE_INFINITY,
-  maxPolarAngle = Math.PI,
-  minPolarAngle = 0,
-  minDistance = 0,
-  maxDistance = Number.POSITIVE_INFINITY,
-  minZoom = 0,
-  maxZoom = Number.POSITIVE_INFINITY,
-  enableZoom = true,
-  zoomSpeed = 1,
-  enableRotate = true,
-  rotateSpeed = 1,
-  target = [0, 0, 0],
-} = defineProps<OrbitControlsProps>()
-
-const emit = defineEmits(['change', 'start', 'end'])
-
-const { renderer, camera: activeCamera } = useTresContext()
-
-const controls = shallowRef<OrbitControls | null>(null)
-
-extend({ OrbitControls })
-
-function addEventListeners() {
-  useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
-  useEventListener(controls.value as any, 'start', () => emit('start', controls.value))
-  useEventListener(controls.value as any, 'end', () => emit('end', controls.value))
-}
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (controls.value && (enableDamping || autoRotate)) {
-    controls.value.update()
-  }
-})
-
-onMounted(() => {
-  addEventListeners()
-})
-
-onUnmounted(() => {
-  if (controls.value) {
-    controls.value.dispose()
-  }
-})
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="activeCamera && renderer"
-    ref="controls"
-    :target="target"
-    :auto-rotate="autoRotate"
-    :auto-rotate-speed="autoRotateSpeed"
-    :enable-damping="enableDamping"
-    :damping-factor="dampingFactor"
-    :enable-pan="enablePan"
-    :key-pan-speed="keyPanSpeed"
-    :keys="keys"
-    :max-azimuth-angle="maxAzimuthAngle"
-    :min-azimuth-angle="minAzimuthAngle"
-    :max-polar-angle="maxPolarAngle"
-    :min-polar-angle="minPolarAngle"
-    :min-distance="minDistance"
-    :max-distance="maxDistance"
-    :min-zoom="minZoom"
-    :max-zoom="maxZoom"
-    :touches="touches"
-    :enable-zoom="enableZoom"
-    :zoom-speed="zoomSpeed"
-    :enable-rotate="enableRotate"
-    :rotate-speed="rotateSpeed"
-    :args="[unref(activeCamera) || camera, renderer?.domElement || domElement]"
-  />
-</template>

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-/// <reference types="vite-svg-loader" />
-import { gsap } from 'gsap'
-import { onMounted, shallowRef } from 'vue'
-import SecondRow from '../assets/second-row.svg'
-import ThirdRow from '../assets/third-row.svg'
-import Triangle from '../assets/triangle.svg'
-
-const triangleRef = shallowRef()
-const secondRowRef = shallowRef()
-const thirdRowRef = shallowRef()
-
-const tl2r = gsap.timeline()
-const tl3r = gsap.timeline()
-
-const heightOfSingleSvg = 150
-
-async function restartAnimation() {
-  gsap.to(secondRowRef.value.$el, {
-    duration: 1,
-    y: 0,
-    ease: 'elastic.out(0.7, 0.2)',
-  })
-  await gsap.to(thirdRowRef.value.$el, {
-    delay: 0.65,
-    duration: 1,
-    y: 0,
-    ease: 'steps(4)',
-  })
-
-  tl2r.restart()
-  tl3r.restart()
-}
-
-onMounted(() => {
-  tl2r.to(secondRowRef.value.$el, {
-    delay: 1,
-    duration: 2,
-    y: -(8 * heightOfSingleSvg),
-    ease: 'elastic.easeOut',
-  })
-  tl3r.to(thirdRowRef.value.$el, {
-    delay: 1.25,
-    duration: 2,
-    y: -(12 * heightOfSingleSvg),
-    ease: 'power1.out',
-  })
-})
-</script>
-
-<template>
-  <div
-    class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75"
-    @click="restartAnimation"
-  >
-    <div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
-      <Triangle ref="triangleRef" />
-      <SecondRow ref="secondRowRef" />
-      <ThirdRow ref="thirdRowRef" />
-    </div>
-  </div>
-</template>

docs/.vitepress/theme/components/OnDemandRendering.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import BlenderCube from './BlenderCube.vue'
-import { TresLeches, useControls } from '@tresjs/leches'
-import RenderingLogger from './RenderingLogger.vue'
-
-const renderTimes = ref(0)
-
-useControls({
-  renderTimes: {
-    value: renderTimes,
-    type: 'graph',
-    label: 'Render Times (ms)',
-    onUpdate: () => {
-      renderTimes.value = 0
-    },
-  },
-})
-
-function onRender() {
-  renderTimes.value = 1
-}
-</script>
-
-<template>
-  <TresLeches />
-  <TresCanvas
-    render-mode="on-demand"
-    clear-color="#82DBC5"
-    @render="onRender"
-  >
-    <TresPerspectiveCamera
-      :position="[5, 5, 5]"
-      :look-at="[0, 0, 0]"
-    />
-    <Suspense>
-      <BlenderCube />
-    </Suspense>
-    <TresGridHelper />
-    <RenderingLogger />
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight
-      :position="[0, 8, 4]"
-      :intensity="0.7"
-    />
-  </TresCanvas>
-</template>

docs/.vitepress/theme/components/RenderingLogger.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { useTresContext } from '@tresjs/core'
-import { onMounted } from 'vue'
-
-/* const { renderingTimes } = useState() */
-
-const state = useTresContext()
-
-function manualInvalidate() {
-  state.invalidate()
-}
-
-onMounted(() => {
-  manualInvalidate()
-})
-</script>
-
-<template>
-  <OrbitControls
-    @change="manualInvalidate"
-  />
-</template>

docs/.vitepress/theme/components/SandboxDemo.vue

@@ -1,10 +0,0 @@
-<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"
-  ></iframe>
-</template>

docs/.vitepress/theme/components/StackBlitzEmbed.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { EmbedOptions } from '@stackblitz/sdk'
-import sdk from '@stackblitz/sdk'
-import { ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    projectId: string
-    options: EmbedOptions
-  }>(),
-  {
-    options: {
-      openFile: 'src/components/TheExperience.vue',
-      view: 'preview',
-      forceEmbedLayout: true,
-      hideExplorer: true,
-      hideNavigation: true,
-    },
-  },
-)
-
-const embed = ref(null)
-const isSnippetLoaded = ref(false)
-
-watch(
-  () => embed.value,
-  (value) => {
-    if (value) {
-      sdk.embedProjectId(value, props.projectId, props.options)
-    }
-  },
-)
-</script>
-
-<template>
-  <div
-    ref="embed"
-    class="stackblitz-embed"
-  >
-    <div
-      v-if="!isSnippetLoaded"
-      class="text-gray-500 text-2xl"
-    >
-      Loading...
-    </div>
-  </div>
-</template>
-
-<style>
-.stackblitz-embed {
-  margin: 2rem 0;
-  border-radius: 8px;
-  overflow: hidden;
-  border: none;
-  min-height: 500px;
-}
-</style>

docs/.vitepress/theme/composables/sponsor.ts

@@ -1,20 +0,0 @@
-import { onMounted, ref } 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/composables/state.ts

@@ -1,11 +0,0 @@
-import { reactive, toRefs } from 'vue'
-
-const state = reactive({
-  renderingTimes: 0,
-})
-export function useState() {
-  return {
-    ...toRefs(state),
-
-  }
-}

docs/.vitepress/theme/custom.css

@@ -1,107 +0,0 @@
-:root {
-  --vp-home-hero-name-color: #82dbc5;
-  --vp-c-brand: #82dbc5;
-  --vp-c-brand-1: #75c5b1;
-  --vp-c-dark: #1f1f1e;
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-dark);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
-  --vp-button-brand-hover-text: var(--vp-c-dark);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
-  --vp-button-brand-active-text: var(--vp-c-dark);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
-  --vp-button-alt-border: var(--vp-c-border);
-  --vp-button-alt-text: var(--vp-c-neutral);
-  --vp-button-alt-bg: var(--vp-c-mute);
-  --vp-button-alt-hover-border: var(--vp-c-border);
-  --vp-button-alt-hover-text: var(--vp-c-neutral);
-  --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
-  --vp-button-alt-active-border: var(--vp-c-border);
-  --vp-button-alt-active-text: var(--vp-c-neutral);
-  --vp-button-alt-active-bg: var(--vp-c-mute-darker);
-
-  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
-  --vp-button-sponsor-text: var(--vp-c-text-light-2);
-  --vp-button-sponsor-bg: transparent;
-  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-bg: transparent;
-  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-bg: transparent;
-}
-
-.VPSidebar .link.active span {
-  font-weight: bold;
-}
-
-.vp-doc a {
-  text-decoration: dashed;
-  font-weight: bold;
-}
-
-.VPButton.medium.brand {
-  color: var(--vp-button-brand-text);
-}
-.VPButton.medium.alt {
-  border-color: var(--vp-button-alt-border);
-  color: var(--vp-button-alt-text);
-  background-color: var(--vp-button-alt-bg);
-}
-
-.VPButton.medium.egghead-cta {
-  border-color: var(--vp-c-border);
-  position: relative;
-}
-
-.VPButton.medium.egghead-cta:hover {
-  border-color: var(--vp-c-border);
-  color: var(--vp-button-brand-text);
-  background-color: var(--vp-c-brand-light);
-}
-
-.VPButton.medium.egghead-cta::before {
-  content: url('/egghead-icon.png');
-  display: inline-block;
-  transform: translateY(0.1rem);
-  margin-right: 0.5rem;
-}
-
-.VPButton.medium.egghead-cta:hover::after {
-  animation: none;
-}
-.VPButton.medium.egghead-cta::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  /*  background-color: var( --vp-c-dark); */
-  border: 1px solid var(--vp-c-brand);
-  border-radius: 20px;
-  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
-  z-index: -1;
-}
-
-@keyframes ping {
-  15%,
-  to {
-    transform: scale(1.25, 2);
-    opacity: 0;
-  }
-}
-
-.VPHomeSponsors {
-  margin-bottom: 0px !important;
-}

docs/.vitepress/theme/index.ts

@@ -1,28 +0,0 @@
-import type { Theme } from 'vitepress'
-import VPTheme from 'vitepress/theme'
-
-import TresLayout from './TresLayout.vue'
-import './custom.css'
-
-import 'uno.css'
-import 'virtual:group-icons.css'
-
-/* const plausible = createPlausible({
-  init: {
-    trackLocalhost: false,
-  },
-  settings: {
-    enableAutoOutboundTracking: true,
-    enableAutoPageviews: true,
-  },
-  partytown: false,
-}) */
-
-export default {
-  ...VPTheme,
-
-  /* enhanceApp(ctx) {
-    ctx.app.use(plausible)
-  }, */
-  Layout: TresLayout,
-} satisfies Theme

docs/.vitepress/theme/recipes.data.ts

@@ -1,29 +0,0 @@
-import { createContentLoader } from 'vitepress'
-
-export interface Recipe {
-  title: string
-  url: string
-  excerpt: string | undefined
-  thumbnail?: string
-  difficulty?: number
-}
-
-declare const data: Recipe[]
-export { data }
-
-export default createContentLoader('/**/cookbook/*.md', {
-  excerpt: true,
-  transform(raw): Recipe[] {
-    return raw
-      .map(({ url, frontmatter, excerpt }) => ({
-        title: frontmatter.title,
-        url,
-        lang: url.split('/')[1].length === 2 ? url.split('/')[1] : 'en',
-        thumbnail: frontmatter.thumbnail,
-        difficulty: frontmatter.difficulty,
-        excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
-      }))
-      .filter(recipe => recipe.title)
-      .sort((a, b) => b.title - a.title)
-  },
-})

docs/_data/team.js

@@ -1,69 +0,0 @@
-export const core = [
-  {
-    avatar: 'https://www.github.com/alvarosabu.png',
-    name: 'Alvaro Sabu',
-    title: 'Creative Engineer | Content Creator',
-    org: 'TresJS',
-    orgLink: 'https://tresjs.org/',
-    desc: 'TresJS author, DevRel Engineer at @storyblok',
-    links: [
-      { icon: 'github', link: 'https://github.com/alvarosabu' },
-      { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/alvarosaburido.dev' },
-      { icon: 'youtube', link: 'https://www.youtube.com/channel/UC6D2KveNVcuuPqOKp0YWO3w' },
-    ],
-    sponsor: 'https://github.com/sponsors/alvarosabu',
-  },
-  {
-    avatar: 'https://github.com/garrlker.png',
-    name: 'Garrett Walker',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/garrlker' },
-      { icon: 'twitter', link: 'https://twitter.com/garrlker' },
-    ],
-  },
-  {
-    avatar: 'https://www.github.com/Tinoooo.png',
-    name: 'Tino Koch',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/Tinoooo' },
-      { icon: 'twitter', link: 'https://twitter.com/@ichbintino' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/iamtino.bsky.social' },
-    ],
-    sponsor: 'https://github.com/sponsors/Tinoooo',
-  },
-]
-export const maintainers = [
-  {
-    avatar: 'https://www.github.com/damienmontastier.png',
-    name: 'Damien Montastier',
-    title: 'Freelance Frontend Developer',
-    links: [
-      { icon: 'github', link: 'https://github.com/damienmontastier' },
-      { icon: 'twitter', link: 'https://twitter.com/dammontastier' },
-      { icon: 'bluesky', link: 'https://bsky.app/profile/dammontastier.bsky.social' },
-    ],
-  },
-]
-export const alumni = [
-  {
-    avatar: 'https://www.github.com/JaimeTorrealba.png',
-    name: 'Jaime Torrealba',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/JaimeTorrealba' },
-      { icon: 'twitter', link: 'https://twitter.com/jaimebboyjt' },
-    ],
-    sponsor: 'https://github.com/sponsors/JaimeTorrealba',
-  },
-  {
-    avatar: 'https://www.github.com/andretchen0.png',
-    name: 'Andretchen0',
-    title: 'Frontend Engineer',
-    links: [
-      { icon: 'github', link: 'https://github.com/andretchen0' },
-    ],
-  },
-]

docs/advanced/attach.md

@@ -1,190 +0,0 @@
-# `attach` 🖇
-
-Using the `attach` prop, you can tell Tres exactly where you want to insert a child into its parent.
-
-:::info
-
-The `attach` prop is not required for many common cases. For instance:
-
-* adding a single `<Material>` to a `<Mesh>`
-* adding a `<Geometry>` to a `<Mesh>`
-* adding one or more `<Mesh>`s to a parent `<Mesh>`
-
-:::
-
-## Background
-
-Tres tries to automatically determine where to insert a child tag into its parent. For example, in this code, Tres will:
-
-* automatically insert the geometry into `parent.geometry`
-* automatically insert the material into `parent.material`
-
-```vue
-<template>
-  <TresMesh name="parent">
-    <TresBoxGeometry />
-    <TresMeshNormalMaterial />
-  </TresMesh>
-</template>
-```
-
-## Problem
-
-Tres covers common cases, like above. But it doesn't cover every possible case.
-
-When Tres doesn't automatically choose the proper insertion location for a child, one solution is to fall back to procedural code in `<script>`.
-
-Here's how you might add multiple materials to a mesh using `<script>`:
-
-```vue
-<script setup lang="ts">
-import { MeshBasicMaterial } from 'three'
-import { onMounted, shallowRef } from 'vue'
-
-const meshRef = shallowRef()
-onMounted(() => {
-  meshRef.value.material = [
-    new MeshBasicMaterial({ color: 'red' }),
-    new MeshBasicMaterial({ color: 'orange' }),
-    new MeshBasicMaterial({ color: 'yellow' }),
-    new MeshBasicMaterial({ color: 'green' }),
-    new MeshBasicMaterial({ color: 'blue' }),
-    new MeshBasicMaterial({ color: 'purple' }),
-  ]
-})
-</script>
-
-<template>
-  <TresMesh ref="meshRef">
-    <TresBoxGeometry />
-  </TresMesh>
-</template>
-```
-
-But this workaround means:
-
-* your materials aren't managed by Tres
-* your code is imperative, not declarative
-* your code is non-reactive by default
-
-## Solution
-
-The `attach` prop lets you specify where an object will be added to the parent object using declarative code.
-
-## Usage
-
-Here's the example above, rewritten declaratively using `attach`:
-
-```vue
-<template>
-  <TresMesh>
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="red" attach="material-0" />
-    <TresMeshBasicMaterial color="orange" attach="material-1" />
-    <TresMeshBasicMaterial color="yellow" attach="material-2" />
-    <TresMeshBasicMaterial color="green" attach="material-3" />
-    <TresMeshBasicMaterial color="blue" attach="material-4" />
-    <TresMeshBasicMaterial color="purple" attach="material-5" />
-  </TresMesh>
-</template>
-```
-
-## "Pierced" `attach`
-
-You can deeply attach a child to a parent by "piercing" – i.e., using a kebab-case string.
-
-### Pseudocode
-
-First, here are a few simple pseudocode examples. This will attach `bar` at `foo.ab.cd`:
-
-```vue
-<foo>
-  <bar attach="ab-cd" />
-</foo>
-```
-
-This will attach `bar` at `foo.ab.cd.ef`:
-
-```vue
-<foo>
-  <bar attach="ab-cd-ef" />
-</foo>
-```
-
-### Usage
-
-As a concrete example, you can use "pierced" `attach` to add custom `BufferAttribute`s:
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-const positions = new Float32Array([-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0])
-</script>
-
-<template>
-  <TresCanvas clear-color="gray">
-    <TresMesh :scale="0.3333">
-      <TresBufferGeometry>
-        <TresBufferAttribute
-          attach="attributes-position"
-          :count="positions.length / 3"
-          :array="positions"
-          :itemSize="3"
-        />
-      </TresBufferGeometry>
-      <TresMeshBasicMaterial color="red" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## Arrays
-
-You can attach within arrays by using array indices in the `attach` string.
-
-### Usage
-
-For example, you can use array indices to attach `THREE` post-processing passes to the `THREE.EffectComposer.passes` array:
-
-```vue
-<script lang="ts" setup>
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
-import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass'
-import { UnrealBloomPass } from 'three-stdlib'
-import { extend, useLoop, useTres } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-extend({ EffectComposer, OutputPass, UnrealBloomPass, RenderPass })
-const { renderer, scene, camera, sizes } = useTres()
-const composer = shallowRef<EffectComposer>()
-
-useLoop().render(() => {
-  if (composer.value) {
-    composer.value!.render()
-  }
-})
-</script>
-
-<template>
-  <TresEffectComposer
-    ref="composer"
-    :args="[renderer.instance]"
-    :set-size="[sizes.width.value, sizes.height.value]"
-  >
-    <TresRenderPass
-      :args="[scene, camera]"
-      attach="passes-0"
-    />
-    <TresUnrealBloomPass
-      :args="[undefined, 0.5, 0.1, 0]"
-      attach="passes-1"
-    />
-    <TresOutputPass
-      attach="passes-2"
-      :set-size="[sizes.width.value, sizes.height.value]"
-    />
-  </TresEffectComposer>
-</template>
-```

docs/advanced/caveats.md

@@ -1,109 +0,0 @@
-# Caveats 😱
-
-Our aim is to provide a simple way of using ThreeJS in VueJS with the best developer experience possible. However, there are some caveats that you should be aware of.
-
-## ~~HMR and ThreeJS~~
-
-:::info
-
-This has been fixed in **TresJS** v1.7.0 🎉. You can now use HMR without reloading the page 🥹.
-
-:::
-
-Hot module replacement (HMR) is a feature that allows you to update your code without reloading the page. This is a great feature that makes development much faster. **TresJS** uses [Vite](https://vitejs.dev/). However, is really tricky to make it work correctly with ThreeJS.
-
-Why? Because Tres builds the scene in a declarative way. This means that it creates the instance and add it to the scene when the component is mounted. The complexity comes to know when to remove the instance from the scene and when to add it again.
-
-Although a minimal disposal workflow is implemented, it is not perfect. This means that sometimes you will have to reload the page to see the changes correctly, especially when you are referencing an instances using [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
-
-```vue
-<script setup lang="ts">
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-onLoop(({ _delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef" :scale="1" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-If you change the `color` attribute of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
-
-:::tip
-So as **rule of thumb** you should reload the page whenever you don't see your changes reflected.
-:::
-
-That being said we are working on a better solution for this 😁. If you have any idea on how to solve this, please let us know.
-
-You can follow the discussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
-
-## Reactivity
-
-We all love reactivity 💚. It is one of the most powerful features of VueJS. However, we need to be mindful of it when using ThreeJS.
-
-Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.
-
-Since we are rendering a scene and updating it in every frame, for example with a rate of 60FPS this means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update set object 60 times. This is not a good idea 😅 and will be detrimental for performance.
-
-Here is a benchmark of the difference between using a Proxy object and a plain object.
-
-<figure>
-  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
-  <figcaption>Fig.1 - Executions per second Plan Object vs Proxy. </figcaption>
-</figure>
-
-Source: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
-
-If you are forced to use reactivity, use [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
-
-Unlike `ref()`, the inner value of a shallow ref is stored and exposed as-is, and will not be made deeply reactive. Only the .value access is reactive. Source [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
-
-### Example
-
-❌ Incorrect
-
-```vue
-<script setup lang="ts">
-const position = reactive({ x: 0, y: 0, z: 0 })
-
-onLoop(({ _delta, elapsed }) => {
-  position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh :position="position" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-✅ Correct
-
-```vue
-<script setup lang="ts">
-const position = { x: 0, y: 0, z: 0 }
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-onLoop(({ _delta, elapsed }) => {
-  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef" :position="position" cast-shadow>
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```

docs/advanced/extending.md

@@ -1,35 +0,0 @@
-# Extend 🔌
-
-Tres offers bare bones functionality, but it's easy to add third-party elements and extend them into its internal catalogue.
-
-Most of 3D experience uses `OrbitControls` which is not part of the core library. You can add it to your project by importing it from the `three/addons/controls/OrbitControls` module.
-
-```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-```
-
-## Extending an element dynamically
-
-Or you can also add it dynamically in your components:
-
-```vue {2,3,4,7,13,15}
-<script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-
-// Add the element to the catalogue
-extend({ TextGeometry, OrbitControls })
-</script>
-
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    <TresMesh>
-      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-      <TresMeshMatcapMaterial :matcap="matcapTexture" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```

docs/advanced/performance.md

@@ -1,159 +0,0 @@
-# Scaling performance 🚀
-
-> Quick guide with tips to improve performance of your Tres.js application.
-
-We are running WebGL on the browser, which can be quite expensive and it will depend on how powerful the user's device is. To make 3D accessible to everyone, we need to make sure our applications are optimized to run also on low-end devices. This guide will provide some tips to improve the performance of your Tres.js application.
-
-## On-demand rendering <Badge type="tip" text="^4.0.0" />
-
-By default, Tres.js will render your scene on every frame. This is great for most applications, but if you are building a game or a complex application, you might want to control when the scene is rendered.
-
-Otherwise it might drain your device battery 🔋 🔜 🪫 and make your computer sound like an airplane 🛫.
-
-Ideally, you only want to **render the scene when necessary**, for example when the user interacts with the scene and the camera moves, or when objects in the scene are animated.
-
-You can do that by setting the `renderMode` prop to `on-demand` or `manual`:
-
-### Mode `on-demand`
-
-<ClientOnly>
-  <div style="position: relative; aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
-    <onDemandRendering />
-  </div>
-</ClientOnly>
-
-```vue
-<TresCanvas render-mode="on-demand">
-  <!-- Your scene goes here -->
-</TresCanvas>
-```
-
-#### Automatic Invalidation
-
-When using `render-mode="on-demand"`, Tres.js will automatically invalidate the current frame by observing component props and lifecycle hooks like `onMounted` and `onUnmounted`. It will also invalidate the frame when resizing the window or changing any prop from the `<TresCanvas>` component like `clearColor` or `antialias`.
-
-The code below updates TresMesh's position-x prop every second, triggering a new render.
-
-```vue
-<script setup>
-import { ref } from 'vue'
-
-const positionX = ref(0)
-
-setTimeout(() => {
-  positionX.value = 1
-}, 1000)
-</script>
-
-<template>
-  <TresCanvas render-mode="on-demand">
-    <TresMesh :position-x="positionX">
-      <TresBoxGeometry />
-      <TresMeshBasicMaterial color="teal" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-#### Manual Invalidation
-
-Since it is not really possible to observe all the possible changes in your application, you can also manually invalidate the frame by calling the `invalidate()` method from `renderer` provided by the [`useTresContext` composable](../api/composables.md#usetrescontext):
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import Scene from './Scene.vue'
-</script>
-
-<template>
-  <TresCanvas
-    render-mode="on-demand"
-  >
-    <Scene />
-  </TresCanvas>
-</template>
-```
-
-```vue [Scene.vue]
-<script setup>
-import { useTres } from '@tresjs/core'
-import { shallowRef, watch } from 'vue'
-
-const boxRef = shallowRef(null)
-const { invalidate } = useTres()
-
-watch(boxRef, () => {
-  if (boxRef.value?.position) {
-    boxRef.value.position.x = 1
-  }
-  invalidate()
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef">
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-:::
-
-### Mode `always`
-
-In this rendering mode, Tres will continously render the scene on every frame. This is the default mode and the easiest to use, but it's also the most resource expensive one.
-
-### Mode `manual`
-
-If you want to have full control of when the scene is rendered, you can set the `render-mode` prop to `manual`:
-
-```vue
-<TresCanvas render-mode="manual">
-  <!-- Your scene goes here -->
-</TresCanvas>
-```
-
-In this mode, Tres will not render the scene automatically. You will need to call the `advance()` method from `renderer` provided by the [`useTresContext` composable](../api/composables.md#usetrescontext) to render the scene:
-
-```vue
-<script setup>
-import { useTres } from '@tresjs/core'
-
-const { renderer } = useTres()
-
-renderer.advance()
-</script>
-```
-
-## Dispose resources `dispose()` <Badge type="tip" text="^4.0.0" />
-
-When you are done with a resource, like a texture, geometry, or material, you should dispose of it to free up memory. This is especially important when you are creating and destroying resources frequently, like in a game.
-
-TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the `dispose()` directly from the package:
-
-::: warning
-To avoid errors and unwanted sideeffects, resources created programatically with the use of `primitives` need to be manually disposed.
-:::
-
-```html {2,12}
-<script setup lang="ts">
-  import { dispose } from '@tresjs/core'
-  import { useGLTF } from '@tresjs/cientos'
-
-  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
-    draco: true,
-  })
-  const model = nodes.Cube
-
-  onUnmounted(() => {
-    dispose(model)
-  })
-</script>
-
-<template>
-  <primitive :object="model" />
-</template>
-```

docs/advanced/primitive.md

@@ -1,67 +0,0 @@
-# Primitives
-
-The `<primitive />` component is a versatile low-level component in TresJS that allows you to directly use any [three.js](https://threejs.org/) object within your Vue application without an abstraction. It acts as a bridge between Vue's reactivity system and THREE's scene graph.
-
-## Usage
-
-```html
-<script setup lang="ts">
-  // Import necessary three.js classes
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
-
-  // Create a box geometry and a basic material
-  const geometry = new BoxGeometry(1, 1, 1)
-  const material = new MeshBasicMaterial({ color: 0x00ff00 })
-
-  // Create a mesh with the geometry and material
-  const meshWithMaterial = new Mesh(geometry, material)
-</script>
-
-<template>
-  <primitive :object="meshWithMaterial" />
-</template>
-```
-
-## Props
-
-- `object`: This prop expects either a plain or a reactive three.js [Object3D](https://threejs.org/docs/index.html?q=Object#api/en/core/Object3D) (preferably a [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)) or any of its derived classes. It is the primary object that the `<primitive />` component will render. In the updated example, a `Mesh` object with an associated `Material` is passed to this prop.
-
-## Events
-
-The same pointer events available on the TresJS components are available on the `<primitive />` component. You can use these events to interact with the object in the scene. See the complete list of events [here](/api/events).
-
-```html
-<template>
-  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
-</template>
-```
-
-## Passing childrens via slots
-
-You can also pass children to the `<primitive />` component using slots. This is useful when you want to add additional objects to the scene that are not part of the main object.
-
-```html
-<template>
-  <primitive :object="meshWithOnlyGeometry">
-    <MeshBasicMaterial :color="0xff0000" />
-  </primitive>
-</template>
-```
-
-## Usage with Models
-
-The `<primitive />` component is especially useful for rendering complex objects like models loaded from external sources. The following example shows how to load a model from a GLTF file and render it using the `<primitive />` component.
-
-```html
-<script lang="ts" setup>
-  import { useGLTF } from '@tresjs/cientos'
-
-  const { nodes } = await useGLTF('/models/AkuAku.gltf')
-</script>
-
-<TresCanvas>
-  <Suspense>
-    <primitive :object="nodes.AkuAku" />
-  </Suspense>
-</TresCanvas>
-```

docs/api/composables.md

@@ -1,379 +0,0 @@
-# Composables
-
-Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) allows you to create reusable logic that can be shared across components. It also allows you to create custom hooks that can be used in your components.
-
-**TresJS** takes huge advantage of this API to create a set of composable functions that can be used to create animations, interact with the scene and more. It also allows you to create more complex scenes that might not be possible using just the Vue Components (Textures, Loaders, etc.).
-
-The core of **TresJS** uses these composables internally, so you would be using the same API that the core uses.
-
-## useTresContext
-This composable aims to provide access to the state model which contains multiple useful properties.
-
-```ts
-const { camera, renderer, camera, cameras } = useTresContext()
-```
-
-::: warning
-`useTresContext` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data.
-:::
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import SubComponent from './SubComponent.vue'
-</script>
-
-<template>
-  <TresCanvas
-    render-mode="manual"
-  >
-    <SubComponent />
-  </TresCanvas>
-</template>
-```
-
-```vue [SubComponent.vue]
-<script lang="ts" setup>
-import { useTresContext } from '@tresjs/core'
-
-const context = useTresContext()
-</script>
-```
-
-:::
-
-### Properties of context
-| Property | Description |
-| --- | --- |
-| **camera** | the currently active camera |
-| **cameras** | the cameras that exist in the scene |
-| **controls** | the controls of your scene |
-| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
-| **extend** | Extends the component catalogue. See [extending](/advanced/extending). |
-| **raycaster** | the global raycaster used for pointer events |
-| **registerCamera** | A method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
-| **renderer** | Contains the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) instance of your scene, a method the invalidate the render loop (only required if you set the `render-mode` prop to `on-demand`), a computed that indicates whether invalidating is possible and a method to advance the render loop (only required if you set the `render-mode` prop to `manual`). |
-| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
-| **setCameraActive** | a method to set a camera active |
-| **sizes** | contains width, height and aspect ratio of your canvas |
-| **loop** | the renderer loop |
-
-### useLoop <Badge text="v4.0.0" />
-
-This composable allows you to execute a callback on every rendered frame, similar to `useRenderLoop` but unique to each `TresCanvas` instance and with access to the [context](#usetrescontext).
-
-::: warning
-`useLoop` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data.
-:::
-
-#### Register update callbacks
-
-The user can register update callbacks (such as animations, fbo, etc) using the `onBeforeRender`
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import AnimatedBox from './AnimatedBox.vue'
-</script>
-
-<template>
-  <TresCanvas>
-    <AnimatedBox />
-  </TresCanvas>
-</template>
-```
-
-```vue [AnimatedBox.vue]
-<script setup>
-import { useLoop } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const boxRef = shallowRef()
-
-const { onBeforeRender } = useLoop()
-
-onBeforeRender(({ delta }) => {
-  boxRef.value.rotation.y += delta
-})
-</script>
-
-<template>
-  <TresMesh ref="boxRef">
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-:::
-
-Your callback function will be triggered just before a frame is rendered and it will be deregistered automatically when the component is destroyed.
-
-#### Take over the render loop
-
-You can take over the render call by using the `render` method.
-
-```ts
-const { render } = useLoop()
-
-render(({ renderer, scene, camera }) => {
-  renderer.instance.render(scene, camera)
-})
-```
-
-::: warning
-Consider that if you take over the render loop, you will need to manually render the scene and take care of features like the conditional rendering yourself.
-:::
-
-#### Register after render callbacks (ex physics calculations)
-
-You can also register callbacks which are invoked after rendring by using the `onAfterRender` method.
-
-```ts
-const { onAfterRender } = useLoop()
-
-onAfterRender(({ renderer }) => {
-  // Calculations
-})
-```
-
-#### Render priority
-
-Both useBeforeRender and useAfteRender provide an optional priority number. This number could be anything from `Number.NEGATIVE_INFINITY` to `Number.POSITIVE_INFINITY` being the 0 by default. The lower the number, the earlier the callback will be executed.
-
-```ts
-onBeforeRender(() => {
-  console.count('triggered first')
-}, -1)
-
-onBeforeRender(() => {
-  console.count('triggered second')
-}, 1)
-```
-
-#### Params of the callback
-
-All callbacks receive an object with the following properties:
-
-- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
-- `elapsed`: The elapsed time since the start of the render loop.
-- `clock`: The [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) instance.
-- `renderer`: The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene.
-- `scene`: The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) of your scene.
-- `camera`: The currently active camera.
-- `raycaster`: The global raycaster used for pointer events.
-- `controls`: The controls of your scene.
-- `invalidate`: A method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`.
-- `advance`: A method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`.
-
-#### Pausing and resuming the update loop
-
-You can use `pause` and `resume` methods:
-
-```ts
-const { onBeforeRender, pause, resume } = useLoop()
-
-onBeforeRender(({ elapsed }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-
-pause() // This will pause the loop
-resume() // This will resume the loop
-```
-
-#### Pausing and resuming the render
-
-You can use `pauseRender` and `resumeRender` methods:
-
-```ts
-const { pauseRender, resumeRender } = useLoop()
-
-onBeforeRender(({ elapse }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-
-pauseRender() // This will pause the renderer
-resumeRender() // This will resume the renderer
-```
-
-#### Unregistering callbacks
-
-You can unregister a callback by calling the method `off` returned by the `onBeforeRender` or `onAfterRender` method.
-
-```ts
-const { onBeforeRender } = useLoop()
-
-const { off } = onBeforeRender(({ elapsed }) => {
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
-```
-
-## useLoader
-
-The `useLoader` composable allows you to load assets using the [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). It returns a promise with loaded asset.
-
-```ts
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-
-const { scene } = await useLoader(GLTFLoader, 'path/to/asset.gltf')
-```
-
-Since the `useLoader` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component. See [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more information.
-
-```vue
-<template>
-  <Suspense>
-    <TheComponentUsingLoader />
-  </Suspense>
-</template>
-```
-
-### UseLoader as component
-
-You can also use `UseLoader` (with uppercase) as component like so:
-
-```vue
-<script setup lang="ts">
-import { UseLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-</script>
-
-<template>
-  <Suspense>
-    <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
-      <primitive :object="data.scene" />
-    </UseLoader>
-  </Suspense>
-</template>
-```
-
-### Props
-
-| Prop | type |
-| ---- | --- |
-| **loader** | `THREE.Loader` |
-| **url** | `String` |
-
-::: warning
-The `UseLoader` component needs to be wrapped in a `Suspense` component in order to work
-:::
-
-## useSeek <Badge text="deprecated" />
-
-::: danger
-This composable is deprecated as of version 5.0.0.
-:::
-
-The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports 4 functions which allow you to find child objects based on specific properties.
-
-```ts
-const { seek, seekByName, seekAll, seekAllByName } = useSeek()
-```
-
-The seek function accepts three parameters:
-
-- `parent`: A ThreeJS scene or Object3D.
-- `property`: The property to be used in the search condition.
-- `value`: The value of the property to match.
-
-The `seek` and `seekByName` function traverses the object and returns the child object with the specified property and value. If no child with the given property and value is found, it returns null and logs a warning.
-
-```ts
-const carRef = shallowRef(null)
-
-watch(carRef, ({ model }) => {
-  if (model) {
-    const car = model.children[0]
-
-    const body = seek(car, 'name', 'Octane_Octane_Body_0')
-    body.color.set(new Color('blue'))
-  }
-})
-```
-
-Similarly, the `seekAll` and `seekAllByName` functions return an array of child objects whose property includes the given value. If no matches are found, then they return an empty array and a warning is logged.
-
-```ts
-const character = shallowRef(null)
-
-watch(character, ({ model }) => {
-  if (model) {
-    const bones = seekAll(character, type, 'Bone')
-  }
-})
-```
-
-## useRenderLoop
-
-The `useRenderLoop` composable can be use for animations that don't require access to the [context](#usetrescontext). It allows you to register a callback that will be called on native refresh rate.
-
-::: warning
- Since v4.0.0, `useRenderLoop` is no longer used internally to control the rendering, if you want to use conditional rendering, multiple canvases or need access to state please `useLoop` instead. [Read why](#useloop)
-:::
-
-```ts
-const { onLoop, resume } = useRenderLoop()
-
-onLoop(({ delta, elapsed, clock }) => {
-  // I will run at every frame ~60FPS (depending of your monitor)
-})
-```
-
-::: warning
-Be mindful of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references.
-:::
-
-The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
-
-- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
-- `elapsed`: The elapsed time since the start of the render loop.
-
-This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution.
-
-### Before and after render
-
-You can also register a callback that will be called before and after the renderer updates the scene. This is useful if you add a profiler to measure the FPS for example.
-
-```ts
-const { onBeforeLoop, onAfterLoop } = useRenderLoop()
-
-onBeforeLoop(({ delta, elapsed }) => {
-  // I will run before the renderer updates the scene
-  fps.begin()
-})
-
-onAfterLoop(({ delta, elapsed }) => {
-  // I will run after the renderer updates the scene
-  fps.end()
-})
-```
-
-### Pause and resume
-
-You can pause and resume the render loop using the exposed `pause` and `resume` methods.
-
-```ts
-const { pause, resume } = useRenderLoop()
-
-// Pause the render loop
-pause()
-
-// Resume the render loop
-resume()
-```
-
-Also you can get the active state of the render loop using the `isActive` property.
-
-```ts
-const { resume, isActive } = useRenderLoop()
-
-console.log(isActive.value) // false
-
-resume()
-
-console.log(isActive.value) // true
-```

docs/api/events.md

@@ -1,67 +0,0 @@
-# Events
-
-**TresJS** components emit pointer events when they are interacted with. This is the case for the components that represent three.js classes that derive from [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (like meshes, groups,...).
-
-<StackBlitzEmbed project-id="tresjs-events" />
-
-## Pointer Events
-
-The following pointer events are available on `v3` and previous:
-
-- `click`
-- `pointer-move`
-- `pointer-enter`
-- `pointer-leave`
-
-From `v4.x` on, the following pointer events are been added to the list:
-
-- `context-menu` (right click)
-- `double-click`
-- `pointer-down`
-- `pointer-up`
-- `wheel`
-- `pointer-missed`
-
-```html
-<TresMesh
-  @click="(event) => console.log('click')"
-  @context-menu="(event) => console.log('context-menu (right click)')"
-  @double-click="(event) => console.log('double-click')"
-  @pointer-move="(event) => console.log('pointer-move')"
-  @pointer-enter="(event) => console.log('pointer-enter')"
-  @pointer-leave="(event) => console.log('pointer-leave')"
-  @pointer-down="(event) => console.log('pointer-down')"
-  @pointer-up="(event) => console.log('pointer-up')"
-  @wheel="(event) => console.log('wheel')"
-  @pointer-missed="(event) => console.log('pointer-missed')"
-/>
-```
-
-| <div style="width:160px">Event</div>            | fires when ...                                                                       | Event Handler Parameter Type(s)                                                                                                                                                                       |
-| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click            | the events pointerdown and pointerup fired on the same object one after the other    | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| contextMenu <Badge type="warning" text="4.0.0" />     | the user triggers a context menu, often by right-clicking                            | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-| double-click <Badge type="warning" text="4.0.0" />      | the user clicks the mouse button twice in quick succession on the same object        | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| wheel <Badge type="warning" text="4.0.0" />              | the mouse wheel or similar device is rotated                                         | [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent)                                                                                                                             |
-| pointer-down <Badge type="warning" text="4.0.0" />       | the pointer is pressed down over the object                                          | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-up <Badge type="warning" text="4.0.0" />        | the pointer is released over the object                                              | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-leave    | the pointer is leaves the object                                                     | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-| pointer-move     | the pointer is moving above the object                                               | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-missed <Badge type="warning" text="4.0.0" />    | the pointer interaction is attempted but misses the object                           | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
-
-## Event Propagation (Bubbling 🫧) <Badge type="warning" text="^4.0.0" />
-
-Propagation of events on 3D scenes works differently than in the DOM because objects can **occlude each other in 3D**. The `intersections` array contains all the objects that the raycaster intersects with, sorted by distance from the camera. The first object in the array is the closest one to the camera.
-
-When an event is triggered, the event is propagated to the closest object in the `intersections` array. If the event is not handled by the object, it will be propagated to the next object in the array.
-
-`event.stopPropagation()` can be used to stop the event from propagating to the next object in the array, stoping the event from bubbling up and reaching to farther objects (the oens behind the first one).
-
-```html
-<TresMesh
-  @pointer-down="(event) => {
-    console.log('pointer-down')
-    event.stopPropagation()
-  }"
-/>
-```

docs/api/instances-arguments-and-props.md

@@ -1,144 +0,0 @@
-# Instances
-
-The core idea of **Tres** is an _autogenerated catalogue_ of all the ThreeJS elements. This catalogue is generated from the ThreeJS source code, so it's always up to date.
-
-When using ThreeJS, you need to import the elements you want to use. For example, if you want to use a `PerspectiveCamera`, you need to import it from the `three` package:
-
-```js
-import { PerspectiveCamera } from 'three'
-
-const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-```
-
-With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in PascalCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-This means that you can use the same [documentation](https://threejs.org/docs/) as you would when using plain ThreeJS, but with the power of Vue.
-
-## Declaring objects
-
-If we follow this argument, you should be able to lay out an instance like this: ❌
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-But with **Tres** this is not needed, you can define properties declaratively like this: ✅
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-## Arguments
-
-Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
-
-- `fov` - Camera frustum vertical field of view.
-- `aspect` - Camera frustum aspect ratio.
-- `near` - Camera frustum near plane.
-- `far` - Camera frustum far plane.
-
-To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-This is the same as doing this:
-
-```ts
-const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
-```
-
-## Props
-
-You can also pass props to the component, for example, the `TresAmbientLight` has a `intensity` property, so you can pass it to the component like this:
-
-```html
-<TresAmbientLight :intensity="0.5" />
-```
-
-### Set
-
-All properties whose underlying object has a `.set()` method have a shortcut to receive the value as an array. For example, the `TresPerspectiveCamera` has a `position` property, which is a `Vector3` object, so you can pass it to the component like this:
-
-```html
-<TresPerspectiveCamera :position="[1, 2, 3]" />
-```
-
-To specify transformation properties such as position, rotation, and scale, a shorthand is available that allows you to directly indicate the axis you wish to set within the props. A similar shorthand is also available for color property.
-
-<!-- I changed color syntax from vue to html, because vue seems broken and does not color nested components -->
-```html
-<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
-  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
-</TresMesh>
-```
-
-::: warning
-When you set the rotation property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), it will use the 'XYZ' order by default.
-It is important to note that when setting the rotation property with the shorthand, the order in which you set the angles matters. For more information on this topic, please refer to  [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
-:::
-
-```vue
-<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
-
-<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
-
-<!-- Note that the order of the rotation properties matters, and swapping the order can result in different outcomes. -->
-```
-
-### Scalar
-
-Another shortcut you can use is pass a scalar value to a property that expects a `Vector3` object, using the same value for the rest of the Vector:
-
-```html
-<TresPerspectiveCamera :position="5" /> ✅
-```
-
-```html
-<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
-```
-
-### Colors
-
-You can pass colors to the components using the `color` prop, which accepts a string with the color name or a hex value:
-
-```html
-<TresAmbientLight color="teal" /> ✅
-```
-
-```html
-<TresAmbientLight color="#008080" /> ✅
-```
-
-### Methods
-
-Some underlying properties are actually methods, the `TresPerspectiveCamera` has a `lookAt` method inherit from [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), so you can pass it the coords to the component like this:
-
-```html
-<TresPerspectiveCamera :look-at="[1, 2, 3]" />
-```

docs/api/tres-canvas.md

@@ -1,105 +0,0 @@
-# TresCanvas
-
-The `TresCanvas` component is the main component of Tres. It's the one that creates the ThreeJS `WebGLRenderer`.
-
-```vue{2,5}
-<template>
-  <TresCanvas shadows :output-encoding="SRGBColorSpace">
-    <TresPerspectiveCamera />
-      <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-## Canvas size
-
-The `TresCanvas` component will use the parent element size as the canvas size. If you want to use the window size as the canvas size, you can set the `window-size` prop to `true`.
-
-```vue
-<template>
-  <TresCanvas window-size>
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-Or you can use CSS to set your canvas size.
-
-```css
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-}
-#canvas {
-  height: 100%;
-  width: 100%;
-}
-```
-
-## Presets
-
-Tres comes with a few presets for the `TresCanvas` component. You can use them by setting the `preset` prop.
-
-### Realistic
-
-The `realistic` preset makes it easy to setup the renderer for more realistic 3D scenes.
-
-```vue
-<template>
-  <TresCanvas preset="realistic">
-    <!-- Your scene goes here -->
-  </TresCanvas>
-</template>
-```
-
-It's equivalent to:
-
-```ts
-renderer.shadows = true
-renderer.physicallyCorrectLights = true
-renderer.outputColorSpace = SRGBColorSpace
-renderer.toneMapping = ACESFilmicToneMapping
-renderer.toneMappingExposure = 3
-renderer.shadowMap.enabled = true
-renderer.shadowMap.type = PCFSoftShadowMap
-```
-
-## Props
-
-| Prop | Description | Default |
-| ---- | ---- | --- |
-| **alpha** | Controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. | false |
-| **antialias** | Whether to perform antialiasing. | `true` |
-| **camera** | A manual camera to be used by the renderer. | |
-| **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
-| **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
-| **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
-| **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance)  | `always` |
-| **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
-| **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` |
-| **outputColorSpace** | Defines the output encoding | `LinearEncoding` |
-| **powerPreference** | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be `high-performance`, `low-power` or `default`. | `default` |
-| **precision** | Shader precision. Can be `highp`, `mediump` or `lowp`. | "highp" if supported by the device |
-| **premultipliedAlpha** | Whether the renderer will assume that colors have [premultiplied alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
-| **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` |
-| **shadows** | Enable shadows in the renderer | `false` |
-| **shadowMapType** | Set the shadow map type | `PCFSoftShadowMap` |
-| **stencil** | Whether the drawing buffer has a [stencil buffer](https://en.wikipedia.org/wiki/Stencil_buffer) of at least 8 bits. | `true` |
-| **toneMapping** | Defines the tone mapping exposure used by the renderer. | `ACESFilmicToneMapping` |
-| **toneMappingExposure** | Exposure level of tone mapping. | `1` |
-| **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
-| **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
-| **enableProvideBridge** | Enables the provide/inject bridge between Vue context and TresCanvas. | `true` |
-
-### Defaults
-
-Tres tries to be as little opinionated as possible. That's why it doesn't set almost any default value for the `TresCanvas` component. It uses the defaults from [three.js](https://threejs.org/). The only exception is the `antialias` prop. It's set to `true` by default.
-
-## Exposed public properties
-
-| Property | Description |
-| ---- | ---- |
-| context | see [useTresContext](composables#usetrescontext) |

docs/assets/css/main.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+
+@import "@nuxt/ui-pro";
+
+@theme static {
+  --font-display: 'Manrope', sans-serif;
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'Fira Code', monospace;
+  --breakpoint-3xl: 1920px;
+  --ui-pattern-fg: color-mix(in oklab,var(--ui-text)5%,transparent);
+  --ui-pattern-bg: repeating-linear-gradient(315deg,var(--ui-pattern-fg)0,var(--ui-pattern-fg)1px,transparent 0,transparent 50%);
+  --ui-header-height: 3rem;
+  /* Technical blueprint styles */
+  --ui-line-gap: 5px;
+  --ui-line-width: 1px;
+  --ui-line-offset: 172px;
+  --ui-line-color: var(--color-gray-200);
+
+  /* Teal Palette */
+  --color-teal-50: #f2fbf8;
+  --color-teal-100: #d3f4ea;
+  --color-teal-200: #a6e9d6;
+  --color-teal-300: #82dbc5;
+  --color-teal-400: #44bda2;
+  --color-teal-500: #2ba189;
+  --color-teal-600: #20816f;
+  --color-teal-700: #1d685b;
+  --color-teal-800: #1c534b;
+  --color-teal-900: #1b463f;
+  --color-teal-950: #0a2925;
+
+  /* Yellow/Brown Palette */
+  --color-yellow-50: #fff8eb;
+  --color-yellow-100: #feeac7;
+  --color-yellow-200: #fdd48a;
+  --color-yellow-300: #fbb03b;
+  --color-yellow-400: #fa9e25;
+  --color-yellow-500: #f47a0c;
+  --color-yellow-600: #b85607;
+  --color-yellow-700: #b3390a;
+  --color-yellow-800: #922b0e;
+  --color-yellow-900: #78250f;
+  --color-yellow-950: #451003;
+}
+
+.dark {
+  --ui-line-color: var(--color-gray-800);
+}
+
+.pattern-bg {
+  background-image: var(--ui-pattern-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
+

docs/components.d.ts

@@ -1,29 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
-    Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default']
-    DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
-    EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
-    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']
-    GraphPane: typeof import('./.vitepress/theme/components/GraphPane.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']
-    OnDemandRendering: typeof import('./.vitepress/theme/components/OnDemandRendering.vue')['default']
-    RenderingLogger: typeof import('./.vitepress/theme/components/RenderingLogger.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/components/AppHeaderLogo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex items-center">
+    <img src="/logo.svg" alt="Tres.js" class="h-3 mr-4" />
+    <a class="font-bold text-dark font-sans text-sm" href="/" title="Home">Tres<span class="text-primary-300">JS</span></a>
+  </div>
+</template>

docs/composables/use-graph.md

@@ -1,58 +0,0 @@
-# useGraph
-
-A composable that creates a named object/material collection from any `Object3D`
-
-## Usage
-
-```ts
-import { useGraph } from '@tresjs/core'
-
-const { nodes, materials, meshes } = useGraph(object3D)
-```
-
-## Return Value
-
-Returns a computed ref containing a `TresObjectMap` with the following structure:
-
-```ts
-interface TresObjectMap {
-  nodes: { [name: string]: Object3D }
-  materials: { [name: string]: Material }
-  meshes: { [name: string]: Mesh }
-}
-```
-
-## Why use useGraph?
-
-The `useGraph` composable is particularly useful when working with complex 3D models (like GLTF) because it:
-
-1. **Simplifies Access**: Provides direct access to objects by name instead of traversing the scene graph manually
-2. **Organizes Resources**: Automatically categorizes objects into nodes, materials, and meshes
-3. **Improves Performance**: Caches the graph structure in a computed ref, preventing unnecessary recalculations
-4. **Enables Easy Manipulation**: Makes it easy to find and modify specific parts of your 3D model
-
-## Example
-
-```vue
-<script setup lang="ts">
-import { useGraph, useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-
-const { state: model } = await useLoader(GLTFLoader, '/path/to/model.gltf')
-const graph = useGraph(computed(() => model.value?.scene))
-
-watch(graph, ({ nodes, materials }) => {
-  const carBody = nodes.carBody
-  const paintMaterial = materials.paint
-})
-</script>
-```
-
-## Implementation Details
-
-The composable uses an util function `buildGraph` internally to traverse the object hierarchy and create a map of:
-- All named objects in the `nodes` object
-- All unique materials in the `materials` object
-- All meshes in the `meshes` object
-
-This structure is particularly useful when working with models exported from 3D modeling software, as it maintains the naming conventions used in the original model.

docs/composables/use-loader.md

@@ -1,196 +0,0 @@
-# useLoader
-
-The `useLoader` composable provides a unified way to load external resources like models and textures in TresJS using any [Three.js loader](https://threejs.org/docs/#api/en/loaders/Loader). It handles loading states and properly manages resource disposal.
-
-## Basic Usage
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-
-const { state, isLoading } = useLoader(GLTFLoader, '/path/to/model.gltf')
-```
-
-For multiple models, you can create multiple loader instances:
-
-```ts
-const models = [
-  '/path/to/model1.gltf',
-  '/path/to/model2.gltf'
-].map(path => useLoader(GLTFLoader, path))
-```
-
-You can also use the `useLoader` composable to load textures:
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { Texture, TextureLoader } from 'three'
-
-const { state: texture } = useLoader(TextureLoader, '/path/to/texture.jpg', {
-  initialValue: new Texture(), // Provide an initial texture while loading
-})
-```
-
-## Features
-
-- 🔄 Reactive loading states
-- 🎯 Type-safe loader handling
-- 🧹 Automatic resource cleanup
-- 🔌 Extensible loader configuration
-- 🎮 Progress tracking support
-- 🎨 Initial value support for better UX
-
-## API
-
-### Type Parameters
-
-- `T extends TresObjectMap`: The type of the loaded resource (use `TresGLTF` for GLTF models)
-- `Shallow extends boolean = false`: Whether to use shallow reactive state
-
-### Arguments
-
-| Name | Type | Description |
-|------|------|-------------|
-| `Loader` | `LoaderProto<T>` | The Three.js loader constructor to use |
-| `path` | `MaybeRef<string>` | Path to the resource |
-| `options?` | `TresLoaderOptions<T, Shallow>` | Optional configuration |
-
-### Options
-
-```ts
-interface TresLoaderOptions<T extends TresObjectMap, Shallow extends boolean> {
-  manager?: LoadingManager
-  extensions?: (loader: TresLoader<T>) => void
-  initialValue?: T // Initial value to use while the resource is loading
-  asyncOptions?: UseAsyncStateOptions<Shallow, any | null>
-}
-```
-
-### Returns
-
-Returns a `UseLoaderReturn` object containing:
-- `state`: The loaded resource
-- `isLoading`: Whether the resource is currently loading
-- `error`: Any error that occurred during loading
-- `execute`: Function to reload the resource
-- `load`: Function to load a new resource from a given path
-- `progress`: Object containing loading progress information:
-  - `loaded`: Number of bytes loaded
-  - `total`: Total number of bytes to load
-  - `percentage`: Loading progress as a percentage (0-100)
-
-## Component Usage
-
-You can use the `UseLoader` component to load a resource and use it in your template directly.
-
-```vue
-<script setup lang="ts">
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-
-const url = 'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb'
-</script>
-
-<template>
-  <UseLoader v-slot="{ state }" :loader="GLTFLoader" :path="url">
-    <primitive v-if="state?.scene" :object="state.scene" />
-  </UseLoader>
-</template>
-```
-
-## Advanced Examples
-
-### Using a Loading Manager with Initial Value
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { LoadingManager } from 'three'
-import type { TresGLTF } from '@tresjs/core'
-
-const manager = new LoadingManager()
-manager.onProgress = (url, loaded, total) => {
-  console.log(`Loading file: ${url}. Loaded ${loaded} of ${total} files.`)
-}
-
-const { state } = useLoader<TresGLTF>(GLTFLoader, '/path/to/model.gltf', {
-  manager,
-})
-```
-
-### Loading Multiple Resources
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three'
-
-const models = [
-  '/path/to/model1.gltf',
-  '/path/to/model2.gltf'
-].map(path => useLoader(GLTFLoader, path))
-
-// Check if all models are loaded
-const allLoaded = computed(() =>
-  models.every(({ isLoading }) => !isLoading.value)
-)
-
-// Track loading progress
-const totalProgress = computed(() => {
-  const progress = models.reduce((acc, { progress }) => acc + progress.percentage, 0)
-  return progress / models.length
-})
-```
-
-## Best Practices
-
-1. **Resource Cleanup**: The composable automatically handles resource disposal when the component is unmounted.
-
-2. **Error Handling**: Always handle potential loading errors in production:
-```ts
-const { error, state } = useLoader(GLTFLoader, '/model.gltf')
-
-watch(error, (err) => {
-  if (err) { console.error('Failed to load model:', err) }
-})
-```
-
-3. **Loading States**: Use the `isLoading` state to show loading indicators:
-```vue
-<template>
-  <primitive v-if="!isLoading" :object="state.scene" />
-</template>
-```
-
-4. **Type Safety**: Always use proper types for better type inference:
-```ts
-// For GLTF models
-useLoader<GLTF>(GLTFLoader, '/model.gltf')
-
-// For textures
-useLoader<Texture>(TextureLoader, '/texture.jpg')
-```
-
-5. **Progress Tracking**: Use the built-in progress tracking to show loading progress:
-```ts
-const { progress } = useLoader(GLTFLoader, '/model.gltf')
-
-// Watch for progress updates
-watch(progress, ({ percentage }) => {
-  console.log(`Loading: ${percentage.toFixed(2)}%`)
-})
-```
-
-6. **Dynamic Loading**: Use the `load` method to change the loaded resource:
-```ts
-const { load, state } = useLoader(GLTFLoader, '/initial-model.gltf')
-
-// Later in your code, load a different model
-load('/new-model.gltf')
-```
-
-7. **Initial Values**: Provide initial values for better user experience while resources are loading (Useful to avoid having a null map and relying on v-if)
-```ts
-// For textures
-const { state: texture } = useLoader(TextureLoader, '/texture.jpg', {
-  initialValue: new Texture(), // Show a default texture while loading
-})
-```

docs/composables/use-tres.md

@@ -1,63 +0,0 @@
-# useTres
-
-The `useTres` composable provides access to a simplified version of the TresJS context. It is a wrapper around the `useTresContext` composable that provides a more convenient API for common use cases.
-
-## Usage
-
-```ts
-import { useTres } from '@tresjs/core'
-
-const { scene, renderer, camera, invalidate } = useTres()
-```
-
-:::warning
-`useTres` can be only be used inside a child component of a `TresCanvas` since this component acts as the provider for the context data.
-:::
-
-::: code-group
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import SubComponent from './SubComponent.vue'
-</script>
-
-<template>
-  <TresCanvas>
-    <SubComponent />
-  </TresCanvas>
-</template>
-```
-
-```vue [SubComponent.vue]
-<script lang="ts" setup>
-import { useTres } from '@tresjs/core'
-
-const { camera } = useTres()
-
-watchEffect(() => {
-  console.log(camera.value)
-})
-</script>
-```
-
-## Properties
-
-| Property | Description |
-| --- | --- |
-| **camera** | the currently active camera |
-| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
-| **renderer** | Contains the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer)  |
-| **sizes** | contains width, height and aspect ratio of your canvas |
-| **loop** | the renderer loop |
-| **controls** | the controls of your scene |
-| **raycaster** | the global raycaster used for pointer events |
-| **perf** | the performance monitor |
-| **extend** | Extends the component catalogue. See [extending](/advanced/extending). |
-
-## Methods
-
-| Method | Description |
-| --- | --- |
-| **invalidate** | Marks the scene as needing an update in the next frame. This is used in on-demand rendering mode to schedule a render. |
-| **advance** | Manually advances the render loop by one frame. This is particularly useful in manual rendering mode where you want explicit control over when frames are rendered. |

docs/content/index.md

@@ -0,0 +1,123 @@
+---
+seo:
+  title: Write beautiful docs with Markdown
+  description: Ship fast, flexible, and SEO-optimized documentation with beautiful
+    design out of the box. Docus brings together the best of the Nuxt ecosystem.
+    Powered by Nuxt UI Pro.
+---
+
+::u-page-hero
+#title
+Write beautiful docs with Markdown
+
+#description
+Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
+
+Docus brings the best of the Nuxt ecosystem into one CLI.
+
+#links
+  :::u-button
+  ---
+  color: neutral
+  size: xl
+  to: /getting-started/introduction
+  trailing-icon: i-lucide-arrow-right
+  ---
+  Get started
+  :::
+
+  :::u-button
+  ---
+  color: neutral
+  icon: simple-icons-github
+  size: xl
+  to: https://github.com/nuxt-ui-pro/docus
+  variant: outline
+  ---
+  Star on GitHub
+  :::
+::
+
+::u-page-section
+#title
+Shipped with many features
+
+#features
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://nuxt.com
+  ---
+  #title
+  Built with [Nuxt 3]{.text-primary}
+  
+  #description
+  Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://ui.nuxt.com/
+  ---
+  #title
+  Powered by [Nuxt UI Pro]{.text-primary}
+  
+  #description
+  Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://content.nuxt.com
+  ---
+  #title
+  Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
+  
+  #description
+  The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://nuxt.com/docs/guide/directory-structure/app-config
+  ---
+  #title
+  Customize with [Nuxt App Config]{.text-primary}
+  
+  #description
+  Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://content.nuxt.com/studio
+  ---
+  #title
+  Collaborate on [Nuxt Studio]{.text-primary}
+  
+  #description
+  Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-nuxt
+  target: _blank
+  to: https://ui.nuxt.com/components/content-search
+  ---
+  #title
+  Built-in navigation and [full-text search]{.text-primary}
+  
+  #description
+  Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.
+  :::
+::

docs/contribute/contributing.md

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { data } from './contribution.data.js'
-
-import { onMounted, ref } from 'vue'
-
-const content = ref('')
-
-onMounted(async () => {
-  content.value = data
-})
-</script>
-
-<div v-html="content" class="remote-markdown"></div>

docs/contribute/contribution.data.js

@@ -1,13 +0,0 @@
-import { createMarkdownRenderer } from 'vitepress'
-
-export default {
-
-  async load() {
-    const config = globalThis.VITEPRESS_CONFIG
-    const md = await createMarkdownRenderer(config.srcDir, config.markdown, config.site.base, config.logger)
-    // fetch remote data
-    const response = await fetch('https://raw.githubusercontent.com/Tresjs/.github/main/CONTRIBUTING.md')
-    const content = await response.text()
-    return md.render(content)
-  },
-}

docs/cookbook/advanced-animations.md

@@ -1,35 +0,0 @@
----
-title: Advanced Animations
-description: How to use GSAP to animate your scene
-author: dennissmuda
-thumbnail: /recipes/advanced-animations.png
-difficulty: 0
----
-
-# Advanced Animations
-
-In this guide, we are going to use GSAP to animate our scene instead of the `useRenderLoop` composable.
-
-<StackBlitzEmbed project-id="tresjs-advanced-animations" />
-
-## Use GSAP to trigger animations on 3D Objects
-
-We don't have to rely on `useRenderLoop` or TresJS to handle our animations. We could also leverage GSAP's `to` function for example:
-
-```ts
-import gsap from 'gsap'
-
-const objectRef = shallowRef(null)
-
-watchEffect(() => {
-  if (objectRef.value) {
-    gsap.to(objectRef.value.position, {
-      y: 2,
-    })
-  }
-})
-```
-
-GSAP is a very popular animation library and you can find a lot of help and resources online, including [these demos on codepen](https://codepen.io/GreenSock).
-
-Of course there are lots of alternatives out there, and you should feel free to reach for _your_ favorite animation library!

docs/cookbook/basic-animations.md

@@ -1,107 +0,0 @@
----
-title: Basic Animations
-description: How to use a the useRenderLoop composable to animate your objects.
-author: alvarosabu
-thumbnail: /recipes/animations.png
-difficulty: 0
----
-
-# Basic Animations
-
-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.
-
-<!--TODO: Update sandbox when v4 is out with useLoop -->
-
-<!-- <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" />
- -->
-
-## useLoop
-
-The `useLoop` composable is the core of TresJS updates, which includes: **animations**. It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate.
-
-To see a detailed explanation of how it works, please refer to the [useRenderLoop](/api/composables#useloop) documentation.
-
-```ts
-const { onBeforeRender } = useLoop()
-
-onBeforeRender(({ delta, elapsed }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
-})
-```
-
-## Getting the reference to the cube
-
-To animate the cube, we need to get a reference to it. We can do it by passing a [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) using `ref` prop to the `TresMesh` component. This will return the plain `THREE instance`.
-
-::: code-group
-
-```vue [Scene.vue]
-<script setup>
-import { shallowRef } from 'vue'
-
-const boxRef = shallowRef()
-</script>
-
-<template>
-  <TresMesh ref="boxRef">
-    <TresBoxGeometry />
-    <TresMeshBasicMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-```vue [App.vue]
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import Scene from './Scene.vue'
-</script>
-
-<template>
-  <TresCanvas>
-    <Scene />
-  </TresCanvas>
-</template>
-```
-:::
-
-## Animating the cube
-
-Now that we have a reference to the cube, we can animate it. We will use the `onBeforeRender` method to update the cube's rotation.
-
-```ts
-const { onBeforeRender } = useLoop()
-
-onBeforeRender(({ delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += delta
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-```
-
-You can also use the `delta` from the internal [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) or the `elapsed` to animate the cube.
-
-## But why not using reactivity?
-
-You might be wondering why we are not using reactivity to animate the cube. The answer is simple, performance.
-
-```ts
-// This is a bad idea ❌
-const boxRotation = ref([0, 0, 0])
-
-onBeforeRender(({ delta, elapsed }) => {
-  boxRotation.value[1] += delta
-  boxRotation.value[2] = elapsed * 0.2
-})
-```
-
-We can be tempted to use reactivity to animate the cube. But it would be a bad idea.
-The reason is that [Vue's reactivity is based on Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) and it's not designed to be used in a render loop that updates 60 or more times per second.
-
-The embedded page below shows the [benchmark of a proxy vs a regular object](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). As you can see, the proxy is 5 times slower than the regular object.
-
-<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
-
-You can read more about this in the [Caveats](../advanced/caveats.md#reactivity) section.

docs/cookbook/groups.md

@@ -1,40 +0,0 @@
----
-title: Groups
-description: Learn how to group multiple objects in the scene.
-author: alvarosabu
-thumbnail: /recipes/groups.png
-difficulty: 0
----
-
-# Group
-
-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).
-
-## Usage
-
-```vue{13,22}
-<script setup lang="ts">
-const groupRef = shallowRef()
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (groupRef.value) {
-    groupRef.value.rotation.y += 0.01
-  }
-})
-</script>
-<template>
-  <TresCanvas>
-    <TresGroup ref="groupRef" :position="[2,0,0]">
-      <TresMesh>
-        <TresBoxGeometry />
-        <TresMeshBasicMaterial color="red" />
-      </TresMesh>
-      <TresMesh>
-        <TresSphereGeometry />
-        <TresMeshBasicMaterial color="blue" />
-      </TresMesh>
-    </TresGroup>
-  </TresCanvas>
-</template>
-```

docs/cookbook/index.md

@@ -1,5 +0,0 @@
-# Cookbook 🍳🧑‍🍳
-
-Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.
-
-<Cookbook />

docs/cookbook/lights-shadows.md

@@ -1,182 +0,0 @@
----
-title: Lights and Shadows
-description: Learn how to add lights and shadows to your scene.
-author: alvarosabu
-thumbnail: /recipes/lights-and-shadows.png
-difficulty: 0
----
-
-# Light-shadows
-
-This guide will help you get started with simple light and shadows in TresJS.
-
-We will build a simple scene with three meshes and a plane but only two will have shadows.
-<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
-
-## Setting up the scene (optional)
-
-We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[check here to know how](/cookbook/orbit-controls).
-
-Let's put four objects in our scene, one will be the plane that receive shadows, two of them will cast shadows and the last one will not cast any shadow at all.
-
-I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simply because we can see the "soft shadow" easily.
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
-
-    <TresMesh
-      :position="[-2, 2, 0]"
-      :rotation="[0, Math.PI, 0]"
-    >
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, 0, 0]"
-    >
-      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-      <TresMeshToonMaterial color="#4F4F4F" />
-    </TresMesh>
-    <TresMesh
-      :position="[2, -2, 0]"
-    >
-      <TresSphereGeometry />
-      <TresMeshToonMaterial color="#FBB03B" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, -3, 0]"
-      :rotation="[-Math.PI / 2, 0, 0]"
-    >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshStandardMaterial color="#f7f7f7" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## Lights (explanation)
-
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs** so are all the light types, we just need to add the `Tres` prefix to use them.
-
-But not all lights can cast shadows, this definition comes directly from ThreeJs and makes sense, for example the purpose of an [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) is to iluminate everysingle side of your scene, so it makes no sense for it to cast shadows, on the contrary, a [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) immitating the sun can and should cast shadows.
-
-## Shadows (explanation)
-
-There are also many types of shadows, for example the "soft shadow" is generated automatially when an object receives more light from one side, but in summary a "ThreeJS default shadow" that is directed towards another surface needs to be cast by a mesh and another mesh needs to receive it. As we see in our example, the `Plane` is receiving a shadow but not casting it. Please note that not all materials can cast or receive shadows.
-
-Internally, ThreeJS automatically generates a new mesh with a [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) which gets updated in each frame, that is why if you apply animations, the shadow also is animated, but also why you have to use shadows carefully, because they could slow your performance down.
-
-::: warning
-The overuse of shadows in this way could drop your performance. However, there are ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
-:::
-
-## Enabling shadows
-
-We could divide this into three steps:
-
-### Activate shadows on the renderer
-
-```vue
-//...
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    shadows
-    window-size
-  />
-  //...
-</template>
-```
-### Set the light to cast shadows
-
-We can simply add the boolean `cast-shadow`, Vue understands this as a `prop` with a value of `true`.
-
-_The AmbientLight doesn't generate any type of shadow here_
-
-```vue
-//...
-
-<template>
-  <TresAmbientLight :intensity="1" />
-  <TresDirectionalLight
-    cast-shadow
-    :position="[0, 2, 0]"
-    :intensity="1"
-  />
-
-  //...
-</template>
-```
-### Set the objects to cast or receive shadows
-
-Similarly to the previous step, we set the mesh that we want to cast shadow (our sphere) with the `cast-shadow` prop, and set the object to receive shadow (our plane) with the `receive-shadow` prop.
-
-```vue
-//...
-
-<template>
-  <TresMesh
-    cast-shadow
-    :position="[2, -2, 0]"
-  >
-    <TresSphereGeometry />
-    <TresMeshToonMaterial color="#FBB03B" />
-  </TresMesh>
-  <TresMesh
-    receive-shadow
-    :position="[0, -3, 0]"
-    :rotation="[-Math.PI / 2, 0, 0]"
-  >
-    <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-    <TresMeshStandardMaterial color="#f7f7f7" />
-  </TresMesh>
-  //...
-</template>
-```
-
-Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/cookbook/basic-animations), and we add movement to our cube, you will see the shadow is animated as well. 🤩
-
-```vue
-<script setup>
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const boxRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-  }
-})
-</script>
-
-<template>
-  //...
-  <TresMesh
-    ref="boxRef"
-    cast-shadow
-    :position="[0, 0, 0]"
-  >
-    <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-    <TresMeshToonMaterial color="#4F4F4F" />
-  </TresMesh>
-  //...
-</template>
-```
-
-_Note that I intentionally did not apply `cast-shadow` to the `Cone` so it doesn't cast any shadow_

docs/cookbook/load-models.md

@@ -1,157 +0,0 @@
----
-title: Load Models
-description: Load 3D models into your Tres scenes.
-author: alvarosabu
-thumbnail: /recipes/gltf-model.png
-difficulty: 1
----
-
-# Load Models
-
-> All models used in this guide are from [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
-
-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.
-
-<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:
-
-## Using `useLoader`
-
-The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
-
-For a detailed explanation of how to use `useLoader`, check out the [useLoader](/api/composables#useloader) documentation.
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-
-const { state: model } = useLoader(GLTFLoader, '/models/AkuAku.gltf')
-```
-
-Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
-
-```html
-<primitive :object="model" />
-```
-
-> The `<primitive />` component is not a standalone component in the Tres source code. Instead, it's a part of the Tres core functionality. When you use `<primitive>`, it is translated to a `createElement` call, which creates the appropriate three.js object based on the provided "object" prop.
-
-Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
-
-## Using `useGLTF`
-
-A more convenient way of loading models is using the `useGLTF` composable available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { state: model } = useGLTF('/models/AkuAku.gltf')
-```
-
-Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
-
-```html
-<primitive :object="model.scene" />
-```
-
-An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { state } = await useGLTF('/models/AkuAku.gltf', { draco: true })
-```
-
-Alternatively you can easily select objects inside the model using the `nodes` property.
-
-::: code-group
-
-```vue [App.vue]
-<script setup lang="ts">
-import Model from './Model.vue'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Suspense>
-      <Model />
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-
-```vue [Model.vue]
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-
-const { state } = useGLTF('/models/AkuAku.gltf', { draco: true })
-</script>
-
-<template>
-  <primitive :object="state.nodes.AkuAku" />
-</template>
-```
-:::
-
-## Using `GLTFModel`
-
-The `GLTFModel` component is a wrapper around the `useGLTF` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha>
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <GLTFModel path="/models/AkuAku.gltf" draco />
-    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-  </TresCanvas>
-</template>
-```
-
-This particular approach is more straightforward but gives you less control over the model.
-
-## useFBX
-
-The `useFBX` composable is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
-
-```ts
-import { useFBX } from '@tresjs/cientos'
-
-const { state: model } = useFBX('/models/AkuAku.fbx')
-```
-
-Then is as straightforward as adding the scene to your scene:
-
-```html
-<primitive :object="model" />
-```
-
-## FBXModel
-
-The `FBXModel` component is a wrapper around the `useFBX` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar in usage to `GLTFModel`:
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, FBXModel } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha>
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <FBXModel path="/models/AkuAku.fbx" />
-    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-  </TresCanvas>
-</template>
-```

docs/cookbook/load-textures.md

@@ -1,104 +0,0 @@
----
-title: Load Textures
-description: Add texture maps to your TresJS objects.
-author: alvarosabu
-thumbnail: /recipes/load-textures.png
-difficulty: 1
----
-
-# Load Textures
-
-> All textures used in this example are from [ambientcg](https://ambientcg.com/).
-
-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.
-
-<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:
-
-::: warning
-Please note that in the examples below use top level `await`. Make sure to wrap such code with a Vue's [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component.
-:::
-
-## Using `useLoader`
-
-The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
-
-For a detailed explanation of how to use `useLoader`, check out the [useLoader](/api/composables#use-loader) documentation.
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { Texture, TextureLoader } from 'three'
-
-const { state: texture, isLoading } = useLoader(
-  TextureLoader,
-  '/Rock035_2K_Color.jpg',
-)
-```
-
-Then you can pass the texture to a material:
-
-::: code-group
-```vue [App.vue]
-<script setup lang="ts">
-import TexturedSphere from './TexturedSphere.vue'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-  >
-    <Suspense>
-      <TexturedSphere />
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-
-```vue [TexturedSphere.vue]
-<script setup lang="ts">
-import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three'
-
-const { state: texture, isLoading } = useLoader(
-  TextureLoader,
-  '/Rock035_2K_Color.jpg',
-  {
-    initialValue: new Texture(),
-  },
-)
-</script>
-
-<template>
-  <TresMesh>
-    <TresSphereGeometry :args="[1, 32, 32]" />
-    <TresMeshStandardMaterial :map="texture" />
-  </TresMesh>
-</template>
-```
-:::
-
-::: tip
-To avoid using v-if on the material, you can set a default texture as the initial value of the `state` property.
-:::
-
-## Using `useTexture`
-
-A more convenient way of loading textures is using the `useTexture` and `useTextures` composables from the `@tresjs/cientos` package.
-To learn more about `useTexture`, check out the [useTexture](https://cientos.tresjs.org/guide/loaders/useTexture) documentation.
-
-```ts
-import { useTexture } from '@tresjs/cientos'
-
-const { state: texture, isLoading } = useTexture('/Rock035_2K_Color.jpg')
-```
-Similar to the previous example, we can pass all the textures to a material via props:
-
-```html
-<TresMesh>
-  <TresSphereGeometry :args="[1,32,32]" />
-  <TresMeshStandardMaterial :map="texture" />
-</TresMesh>
-```

docs/cookbook/orbit-controls.md

@@ -1,130 +0,0 @@
----
-title: OrbitControls
-description: How to use OrbitControls to interact with the scene.
-author: alvarosabu
-thumbnail: /recipes/orbit-controls.png
-difficulty: 1
----
-
-# OrbitControls
-
-<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.
-
-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/OrbitControls` module.
-
-This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
-
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
-
-For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
-
-## Using OrbitControls
-
-To use `OrbitControls` you need to import it from the `three/addons/controls/OrbitControls` module.
-
-```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-```
-
-Then you need to extend the catalogue of components using the `extend` method.
-
-```js
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-
-extend({ OrbitControls })
-```
-
-Now you can use the `TresOrbitControls` component in your scene.
-
-::: code-group
-
-```vue [OrbitControls.vue]
-<template>
-  <TresOrbitControls
-    v-if="renderer"
-    :args="[camera, renderer?.domElement]"
-  />
-</template>
-```
-:::
-
-Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer. You need to pass those as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.
-
-::: warning
-`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Thats why we created a subcomponent called `OrbitControls.vue`. See more about [context](/api/composables#usetrescontext).
-:::
-
-```ts
-import { useTresContext } from '@tresjs/core'
-
-const { camera, renderer } = useTresContext()
-```
-
-So the final code would be something like this:
-
-::: code-group
-
-```vue [OrbitControls.vue]
-<script setup lang="ts">
-import { extend, useTresContext } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-
-extend({ OrbitControls })
-
-const { camera, renderer } = useTresContext()
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="renderer"
-    :args="[camera, renderer.instance.domElement]"
-  />
-</template>
-```
-
-```vue [App.vue] {3,12}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import OrbitControls from './OrbitControls.vue'
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <OrbitControls />
-    <TresGridHelper :args="[10, 10]" />
-  </TresCanvas>
-</template>
-```
-:::
-
-## OrbitControls from `cientos`
-
-Here is where the fancy part begins. ✨
-The `cientos` package provides a component called `<OrbitControls />` which is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
-
-The nicest part? You don't need to extend the catalog or pass any arguments.
-It just works. 💯
-
-```vue {3,12}
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```

docs/cookbook/shaders.md

@@ -1,174 +0,0 @@
-# Shaders
-
-This guide will help you get started with shaders in TresJS.
-
-We will build a simple scene with a blob. We will then animate the blob to softly distorted it.
-
-::: warning
-_Basic knowledge of how shaders work is necessary_
-:::
-
-<SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
-
-## Setting up the scene (optional)
-
-We import all the modules that we need. To make it more convenient we will import and use the orbit-controls from cientos,
-[look here to see how](/cookbook/orbit-controls).
-
-Now, let's put our camera in the `[11,11,11]` position.
-
-Lastly just to help us with the location, let's add a simple plane, rotated in the X axis, with `[10, 10]` units.
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-
-    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
-      <TresPlaneGeometry :args="[10, 10]" />
-      <TresMeshBasicMaterial color="#444" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## ShaderMaterial
-
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs**, so is the `ShaderMaterial`, we just need to add the `Tres` prefix to use it.
-
-For our blob, we could use a simple `SphereGeometry` adding some widthSegments and heightSegments to create a smooth effect, and put our blob 4 units in the Y positive axis
-
-```vue
-<TresMesh :position="[0, 4, 0]">
-  <TresSphereGeometry :args="[2, 32, 32]" />
-  <TresShaderMaterial />
-</TresMesh>
-```
-
-The `ShaderMaterial` accepts special properties, like `uniforms` `vertexShader` and `fragmentShader`, so we can create it in our script section and make the bind with our instance.
-
-For this example, our uniforms look like this:
-
-```ts
-import { Vector2 } from 'three'
-
-// ...
-const uniforms = {
-  uTime: { value: 0 },
-  uAmplitude: { value: new Vector2(0.1, 0.1) },
-  uFrequency: { value: new Vector2(20, 5) },
-}
-// ..
-```
-
-Our fragment shader looks like this:
-
-```ts
-// ...
-const fragmentShader = `
-precision mediump float;
-varying vec2 vUv;
-
-void main() {
-    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
-}
-`
-// ..
-```
-
-And lastly our vertexShader:
-
-```ts
-const vertexShader = `
-uniform vec2 uAmplitude;
-uniform vec2 uFrequency;
-uniform float uTime;
-
-varying vec2 vUv;
-
-void main() {
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
-    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
-
-    vec4 viewPosition = viewMatrix * modelPosition;
-    gl_Position = projectionMatrix * viewPosition;
-    vUv = uv;
-}
-`
-// ..
-```
-
-## Animating the blob
-
-Similar to what we learn in the [Basic animations](/cookbook/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const blobRef = shallowRef(null)
-// ...
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <TresMesh
-      ref="blobRef"
-      :position="[0, 4, 0]"
-    >
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
- Once we have got that, we could use the `onLoop` callback to animate our `uTime`.
-
- ```ts
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-
- // ...
- const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-   if (blobRef.value) {
-     blobRef.value.material.uniforms.uTime.value = elapsed
-   }
-})
- // ...
-```
-
-And that's it, we have our basic shader running smoothly. 🎉
-
-## Using GLSL vite-pluging (optional)
-
-_This step is completly optional and is out of the scope of the **TresJs** team_
-
-Defining our shader inline is not always the best idea, but if you're using [vite](https://vitejs.dev/) you can put your `GLSL` files in a different file just by using the [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (check out the link for the official documentation).
-
-And you could have a structure similar to this:
-
-```
-├── src/
-│   ├── myTresJsComponent.vue
-│   ├── shaders/
-│       ├── vertexShader.glsl
-│       ├── fragmentShader.glsl
-```

docs/cookbook/text-3d.md

@@ -1,233 +0,0 @@
----
-title: Text 3D
-description: Add 3D text with ease
-author: alvarosabu
-thumbnail: /recipes/text-3d.png
-difficulty: 1
----
-
-# Text3D
-
-[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.
-
-<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.
-
-This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
-
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
-
-For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
-
-## Using TextGeometry
-
-To use `TextGeometry` you need to import it from the `three/addons/geometries/TextGeometry` module.
-
-```js
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-```
-
-Then you need to extend the catalogue of components using the `extend` method.
-
-```js
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-
-extend({ TextGeometry })
-```
-
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) requires only one argument - the font. You can find an example below.
-
-```js
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
-
-const loader = new FontLoader()
-
-const font = await new Promise((resolve, reject) => {
-  try {
-    loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  catch (error) {
-    reject(console.error('cientos', error))
-  }
-})
-```
-
-Next you can use the `TresTextGeometry` component inside a TresMesh in your scene
-
-```vue
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-then as in the example you can pass an object with the desired configurations.
-
-```ts
-const fontOptions = {
-  size: 0.5,
-  height: 0.2,
-  curveSegments: 5,
-  bevelEnabled: true,
-  bevelThickness: 0.05,
-  bevelSize: 0.02,
-  bevelOffset: 0,
-  bevelSegments: 4,
-}
-```
-
-We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh.
-
-```html
-<script setup lang="ts">
-  const matcapTexture = await useTexture([
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png',
-  ])
-</script>
-
-<template>
-  <TresMesh>
-    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-    <TresMeshNormalMaterial :matcap="matcapTexture" />
-  </TresMesh>
-</template>
-```
-
-So the final code would look something like this:
-
-::: code-group
-
-```vue [App.vue]
-<script setup lang="ts">
-import MyText from './MyText.vue'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Suspense>
-      <MyText />
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-
-```vue [MyText.vue]
-<script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-import { FontLoader } from 'three/addons/loaders/FontLoader'
-import { useTexture } from '/@/composables'
-
-extend({ TextGeometry })
-
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
-
-const fontOptions = {
-  size: 0.5,
-  height: 0.2,
-  curveSegments: 5,
-  bevelEnabled: true,
-  bevelThickness: 0.05,
-  bevelSize: 0.02,
-  bevelOffset: 0,
-  bevelSegments: 4,
-}
-
-const loader = new FontLoader()
-
-const font = await new Promise((resolve, reject) => {
-  try {
-    loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  catch (error) {
-    reject(console.error('cientos', error))
-  }
-})
-
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
-</script>
-
-<template>
-  <TresMesh>
-    <TresTextGeometry
-      :args="['TresJS', { font, ...fontOptions }]"
-      center
-    />
-    <TresMeshNormalMaterial :matcap="matcapTexture" />
-  </TresMesh>
-</template>
-```
-
-:::
-
-We know this seems like a lot of work, but good news is, there is a much more simple way
-
-## Text3D from `cientos`
-
-The `cientos` package provides a component called `<Text3D />`, which is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
-
-The nicest part? You don't need to extend the catalog and just pass the font argument.
-It just works. 💯 (if not text is provided, the text will be TresJS)
-
-```vue
-<script setup lang="ts">
-import { Text3D } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <Suspense>
-      <Text3D :font="fontPath" />
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-
-We can pass the options as props
-
-```vue
-<Text3D :font="fontPath" :text="'my 3d text'" :size="0.8" />
-```
-
-in case the options are not provided, the default values will be:
-
-```
-size: 0.5,
-height: 0.2,
-curveSegments: 5,
-bevelEnabled: true,
-bevelThickness: 0.05,
-bevelSize: 0.02,
-bevelOffset: 0,
-bevelSegments: 4,
-```
-
-By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] and the text will start there but we can center it by just passing the flag "center"
-
-```vue
-<Text3D :font="fontPath" :text="'my 3d text'" center />
-```

docs/cookbook/tweakpane.md

@@ -1,59 +0,0 @@
----
-title: Tweakpane
-description: How to use tweakpane to control your scene
-author: alvarosabu
-thumbnail: /recipes/tweakpane.png
-difficulty: 0
----
-
-# Tweakpane
-
-To make it easier to control the parameters of your scene, you can use [Tweakpane](https://tweakpane.github.io/docs/). In this guide, we will show you how to use Tweakpane to control the parameters of your scene.
-
-<StackBlitzEmbed project-id="tweakpane" />
-
-## Installation
-
-First, you need to install Tweakpane:
-
-```bash
-pnpm add tweakpane
-```
-
-Additionally install type defs
-
-```bash
-$ pnpm add -D @tweakpane/core
-```
-
-## Usage
-
-In this example, we will create a simple scene with a cube and use Tweakpane to control background color and the cube material `wireframe` property.
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Pane } from 'tweakpane'
-
-import { ref } from 'vue'
-
-const state = reactive({
-  clearColor: '#c0ffee',
-  wireframe: false
-})
-
-const pane = new Pane()
-
-pane.addInput(state, 'clearColor')
-pane.addInput(state, 'wireframe')
-</script>
-
-<template>
-  <TresCanvas :clear-color="state.clearColor">
-    <TresMesh>
-      <TresBoxGeometry />
-      <TresMeshNormalMaterial :wireframe="state.wireframe" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```

docs/de/advanced/caveats.md

@@ -1,120 +0,0 @@
-# Warnhinweise 😱
-
-Unser Ziel ist es, eine einfache Möglichkeit zu bieten, Three.js in Vue.js mit der bestmöglichen Entwicklererfahrung zu nutzen. Es gibt jedoch einige Vorbehalte, derer du dir bewusst sein solltest.
-
-## ~~HMR und Three.js~~
-
-:::info
-
-Dies wurde in **TresJS** v1.7.0 🎉 behoben. Jetzt kannst du HMR nutzen, ohne die Seite neu laden zu müssen 🥹.
-
-:::
-
-Hot Module Replacement (HMR) ist eine Funktion, die es dir erlaubt, deinen Code zu aktualisieren, ohne die Seite neu zu laden. Dies ist eine großartige Funktion, die die Entwicklung viel schneller macht. **TresJS** verwendet [Vite](https://vitejs.dev/). Es ist jedoch wirklich kompliziert, dies korrekt mit Three.js zu bewerkstelligen.
-
-Warum? Weil Tres die Szene deklarativ aufbaut. Das bedeutet, dass es die Instanz erstellt und der Szene hinzufügt, wenn die Komponente gemountet wird. Die Komplexität liegt darin zu wissen, wann die Instanz aus der Szene entfernt und wann sie wieder hinzugefügt werden soll.
-
-Obwohl ein minimaler Aufräummechanismus implementiert wurde, ist er nicht perfekt. Das bedeutet, dass du manchmal die Seite neu laden musst, um die Änderungen korrekt zu sehen, insbesondere wenn du Instanzen über [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html) referenzierst.
-
-```vue
-<script setup lang="ts">
-const boxRef: Ref<TresInstance | null> = ref(null)
-
-onLoop(({ _delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-</script>
-
-<template>
-  <TresMesh
-    ref="boxRef"
-    :scale="1"
-    cast-shadow
-  >
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-Wenn du eine Änderung an der `color`-Property bei Instanzen der  `TresMeshStandardMaterial`-Komponente vornimmst, wirst du sehen, dass die Änderung angewendet wird, aber die Rotation  nicht mehr funktioniert. Dies liegt daran, dass die Instanz entfernt und neu erstellt wird.
-
-:::tip
-Als **Faustregel**, solltest du die Seite neu laden, wenn du die von dir vorgenommenen Änderungen nicht siehst.
-:::
-
-Wir arbeiten bereits an einer besseren Lösung dafür 😁. Wenn du eine Idee hast, wie man dies lösen könnte, lass es uns bitte wissen.
-
-Du kannst der Diskussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23) folgen.
-
-## Reaktivität
-
-Wir alle lieben Reaktivität 💚. Es ist eines der mächtigsten Features von Vue.js. Allerdings sollten wir vorsichtig sein, wenn wir Three.js verwenden.
-
-Die Reaktivität von Vue basiert auf [Proxies](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Dies ermöglicht es Vue 3, automatisch Änderungen an Datenobjekten zu verfolgen und die entsprechenden DOM-Elemente jedes Mal zu aktualisieren, wenn sich die Daten ändern.
-
-Da wir eine Szene rendern und sie bei jedem Frame (60FPS) aktualisieren, bedeutet das, dass wir die Szene 60 Mal pro Sekunde aktualisieren. Wenn das zu aktualisierende Objekt reaktiv ist, wird Vue versuchen, dieses Objekt so oft zu aktualisieren. Das ist keine gute Idee 😅 und wird sich negativ auf die Performance auswirken.
-
-Hier ist ein Benchmark, der den Unterschied zwischen der Verwendung eines Proxy-Objekts und eines einfachen Objekts zeigt.
-
-<figure>
-  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
-  <figcaption>Fig.1 - Ausführungen pro Sekunde: Objekt vs Proxy. </figcaption>
-</figure>
-
-Quelle: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
-
-Falls es wirklich notwendig ist, Reaktivität zu nutzen, verwende [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref).
-
-Im Gegensatz zu `ref()` wird der innere Wert eines shallow Ref gespeichert und so wie er ist exponiert. Nur der Zugriff auf `.value` ist reaktiv. Quelle: [Vue.js Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
-
-### Beispiel
-
-❌ Falsch
-
-```vue
-<script setup lang="ts">
-const position = reactive({ x: 0, y: 0, z: 0 })
-
-onLoop(({ _delta, elapsed }) => {
-  position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh
-    :position="position"
-    cast-shadow
-  >
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```
-
-✅ Richtig
-
-```vue
-<script setup lang="ts">
-const position = { x: 0, y: 0, z: 0 }
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-
-onLoop(({ _delta, elapsed }) => {
-  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
-})
-</script>
-
-<template>
-  <TresMesh
-    ref="boxRef"
-    :position="position"
-    cast-shadow
-  >
-    <TresBoxGeometry :args="[1, 1, 1]" />
-    <TresMeshStandardMaterial color="teal" />
-  </TresMesh>
-</template>
-```

docs/de/advanced/extending.md

@@ -1,44 +0,0 @@
-# Erweitern 🔌
-
-Tres bietet grundlegende Funktionalitäten, aber es ist einfach, Drittanbieterelemente hinzuzufügen und den internen Katalog zu erweitern.
-
-Die meisten 3D-Szenen nutzen `OrbitControls`, die allerdings nicht Teil der Hauptbibliothek sind. Um es zu deinem Projekt hinzufügen, kannst du es aus dem Modul `three/addons/controls/OrbitControls` importieren.
-
-```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-```
-
-## Ein Element dynamisch erweitern
-
-Oder du erweiterst den Katalog dynamisch innerhalb deiner Komponente:
-
-```vue {2,3,4,7,13,15}
-<script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-
-// Element dem Katalog hinzufügen
-extend({ TextGeometry, OrbitControls })
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
-    <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
-      <TresMeshMatcapMaterial :matcap="matcapTexture" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```

docs/de/advanced/primitive.md

@@ -1,47 +0,0 @@
-# Primitives
-
-Die `<primitive />`-Komponente ist eine vielseitige Low-Level-Komponente in TresJS, die es dir ermöglicht, ohne Abstraktion jedes Objekt von Three.js direkt in deiner Vue-Anwendung zu verwenden. Sie dient als Brücke zwischen dem Reaktivitätssystem von Vue und dem Szenengraph von Three.js.
-
-## Verwendung
-
-```html
-<script setup lang="ts">
-  // Importieren der notwendigen Klassen von three.js
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
-
-  // Geometry und Material erstellen
-  const geometry = new BoxGeometry(1, 1, 1)
-  const material = new MeshBasicMaterial({ color: 0x00ff00 })
-
-  // Mesh mit der Geometrie und dem Material erstellen
-  const meshWithMaterial = new Mesh(geometry, material)
-</script>
-
-<template>
-  <TresCanvas>
-    <primitive :object="meshWithMaterial" />
-  </TresCanvas>
-</template>
-```
-
-## Props
-
-`object`: Diese Property erwartet ein `Object3D`-Objekt von three.js oder eine seiner abgeleiteten Klassen. Es ist das Hauptobjekt, das die `<primitive />`-Komponente rendern wird. Im aktualisierten Beispiel wird ein `Mesh`-Objekt mit dem entsprechenden `Material` an diese Property übergeben.
-
-## Verwendung mit Modellen
-
-Die `<primitive />`-Komponente ist besonders nützlich, um komplexe Objekte wie Modelle, die aus externen Quellen geladen werden, zu rendern. Das folgende Beispiel zeigt, wie ein Modell aus einer GLTF-Datei geladen und mit der `<primitive />`-Komponente gerendert wird.
-
-```html
-<script lang="ts" setup>
-  import { useGLTF } from '@tresjs/cientos'
-
-  const { nodes } = await useGLTF('/models/AkuAku.gltf')
-</script>
-
-<TresCanvas>
-  <Suspense>
-    <primitive :object="nodes.AkuAku" />
-  </Suspense>
-</TresCanvas>
-```

docs/de/api/composables.md

@@ -1,236 +0,0 @@
-# Composables
-
-Die Composition API von Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) ermöglicht es dir, wiederverwendbare Logik und Hooks zu schreiben.
-
-**TresJS** nutzt diese API, um eine Reihe von zusammensetzbaren Funktionen bereitzustellen, die verwendet werden können um zum Beispiel Animationen zu erstellen oder mit der Szene zu interagieren. Sie ermöglicht dir auch, komplexere Szenen zu erstellen, die mit reinen Vue-Komponenten (Texturen, Loader usw.) eventuell nicht möglich wären.
-
-Der Kern von **TresJS** verwendet diese Composables auch intern, so dass du dieselbe API verwendest, die der Kern nutzt. Zum Beispiel verwenden Komponenten, die im internen Rendering-Loop aktualisiert werden müssen, das Composable `useRenderLoop`, um einen Callback zu registrieren, der bei jeder Aktualisierung der Szene durch den Renderer aufgerufen wird.
-
-## useRenderLoop
-
-Das Composable `useRenderLoop` ist der Kern der Animationen in **TresJS**. Es ermöglicht dir, einen Callback zu registrieren, der mit der nativen Bildwiederholrate aufgerufen wird. Dies ist das wichtigste Composable in **TresJS**.
-
-```ts
-const { onLoop, resume } = useRenderLoop()
-
-onLoop(({ delta, elapsed, clock, dt }) => {
-  // Wird jeden Frame ausgeführt (60 FPS, abhängig vom Monitor)
-})
-```
-
-::: warning
-Achte auf die Performance-Auswirkungen beim Verwenden dieses Composables, da es bei jedem Frame ausgeführt wird. Wenn du also viel Logik in deinem Callback hast, könnte dies die Performance deiner Anwendung beeinträchtigen. Insbesondere, wenn du State oder reaktive Referenzen veränderst.
-:::
-
-Der `onLoop`-Callback erhält ein Objekt mit den folgenden, auf der [Uhr von THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) basierenden Properties:
-
-- `delta`: Die verstrichene Zeit zwischen dem aktuellen Frame und dem letzten Frame. Dies ist die Zeit in Sekunden seit dem letzten Frame.
-- `elapsed`: Die verstrichene Zeit seit Beginn des Render-Loops.
-
-Dieses Composable basiert auf `useRafFn` von [vueuse](https://vueuse.org/core/useRafFn/). Danke an [@wheatjs](https://github.com/wheatjs) für diesen wundervollen Beitrag.
-
-### Vor und nach dem Rendern
-
-Es gibt jeweils zwei Callbacks die aufgerufen werden, vor und nachdem der Render die Szene aktualisiert. Dies ist nützlich, wenn du beispielsweise einen Profiler hinzufügst, um die FPS zu messen.
-
-```ts
-const { onBeforeLoop, onAfterLoop } = useRenderLoop()
-
-onBeforeLoop(({ delta, elapsed }) => {
-  // Wird ausgeführt bevor der Renderer die Szene aktualisiert
-  fps.begin()
-})
-
-onAfterLoop(({ delta, elapsed }) => {
-  // Wird ausgeführt nachdem der Renderer die Szene aktualisiert hat
-  fps.end()
-})
-```
-
-### Pausieren und Fortsetzen
-
-Du kannst den Rendering-Loop mit den Methoden `pause` und `resume` pausieren und fortsetzen.
-
-```ts
-const { pause, resume } = useRenderLoop()
-
-// Rendering-Loop pausieren
-pause()
-
-// Rendering-Loop fortsetzen
-resume()
-```
-
-Du kannst auch den aktiven Status des Rendering-Loops mit der Property `isActive` abfragen.
-
-```ts
-const { resume, isActive } = useRenderLoop()
-
-console.log(isActive) // false
-
-resume()
-
-console.log(isActive) // true
-```
-
-## useLoader
-
-Das Composable `useLoader` ermöglicht es dir, Ressourcen mit den [Loadern von THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models) zu laden. Es gibt ein Promise mit der geladenen Ressource zurück.
-
-```ts
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-
-const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
-```
-
-Da das Composable `useLoader` ein Promise zurückgibt, kannst du es mit `async/await` oder `then/catch` verwenden. Stelle sicher, dass du die Komponente im Template mit einer `Suspense`-Komponente umgibst. Siehe [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) für mehr Informationen.
-
-```vue{2,4}
-<template>
-  <Suspense>
-    <TheComponentUsingLoader />
-  </Suspense>
-</template>
-```
-
-## useTexture
-
-Das Composable `useTexture` ermöglicht es dir, Texturen mit dem [Texture Loader von THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader) zu laden. Es gibt ein Promise mit der/den geladenen Textur(en) zurück.
-
-```ts
-const texture = await useTexture(['path/to/texture.png'])
-```
-
-**useTexture** akzeptiert auch ein Objekt mit den folgenden Properties:
-
-- `map`: Eine Basistextur, die auf die Oberfläche eines Objekts angewendet wird
-- `displacementMap`: Eine Textur, die verwendet wird, um Beulen oder Einbuchtungen auf der Oberfläche des Objekts hinzuzufügen
-- `normalMap`: Eine Textur, die verwendet wird, um Oberflächendetails und Schattierungsvariationen am Objekt hinzuzufügen
-- `roughnessMap`: Eine Textur, die verwendet wird, um Rauheit oder ein mattes Finish auf der Oberfläche des Objekts hinzuzufügen
-- `metalnessMap`: Eine Textur, die verwendet wird, um einen metallischen Effekt auf der Oberfläche des Objekts hinzuzufügen
-- `aoMap`: Eine Textur, die verwendet wird, um Ambient Occlusion (Schattierung in Bereichen, wo Licht durch andere Objekte blockiert wird) am Objekt hinzuzufügen
-- `alphaMap`: Eine Textur, die verwendet wird, um Transparenz hinzuzufügen (der schwarze Teil wird als transparent gerendert). Um diese "Map" zu verwenden, ist es notwendig, :transparent="true" im Material zu setzen
-- `matcap`: Diese Textur kodiert die Farbe und Schattierung des Materials
-
-In diesem Fall gibt es ein Objekt mit den geladenen Texturen zurück.
-
-```ts
-const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
-  map: 'path/to/albedo.png',
-  displacementMap: 'path/to/height.png',
-  normalMap: 'path/to/normal.png',
-  roughnessMap: 'path/to/roughness.png',
-  metalnessMap: 'path/to/metalness.png',
-  aoMap: 'path/to/ambien-occlusion.png',
-  alphaMap: 'path/to/alpha.png',
-  matcap: 'path/to/matcap.png',
-})
-```
-
-Dann kannst du die Texturen an das Material binden.
-
-```vue
-<template>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry />
-      <TresMeshStandardMaterial
-        :map="map"
-        :displacement-map="displacementMap"
-        :normal-map="normalMap"
-        :roughness-map="roughnessMap"
-        :metalness-map="metalnessMap"
-        :ao-map="aoMap"
-        :alpha-map="alphaMap"
-      />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-Ähnlich wie das vorherige Composable gibt das `useTexture`-Composable ein Promise zurück, das du mit `async/await` oder `then/catch` verwenden kannst. Auch hier solltest du es im Template innerhalb einer `Suspense`-Komponente verwenden.
-
-## useSeek
-
-Das Composable `useSeek` bietet Hilfsmittel, um leicht durch komplexe Three.js-Szenen und Objektgrafiken zu navigieren. Es exportiert 4 Funktionen, die es dir ermöglichen, Objekte basierend auf spezifischen Properties zu finden.
-
-```ts
-const { seek, seekByName, seekAll, seekAllByName } = useSeek()
-```
-
-Die Funktion `seek` akzeptiert drei Parameter:
-
-- `parent`: Eine Three.js-Szene oder Object3D.
-- `property`: Die Property, die für die Suchbedingung verwendet wird.
-- `value`: Der Wert der Property, mit dem abgeglichen wird.
-
-Die Funktionen `seek` und `seekByName` durchsuchen das Objekt nach einem Kindobjekt mit den angegebenen Parametern. Wenn kein Kind mit der passenden Property und  Wert gefunden wird, geben sie `null` zurück und zeigen eine Warnung.
-
-```ts
-const carRef = ref(null)
-
-watch(carRef, ({ model }) => {
-  if (model) {
-    const car = model.children[0]
-
-    const body = seek(car, 'name', 'Octane_Octane_Body_0')
-    body.color.set(new Color('blue'))
-  }
-})
-```
-
-Ähnlich geben die Funktionen `seekAll` und `seekAllByName` ein Array von Kindobjekten zurück, deren Property den gegebenen Wert enthält. Wenn keine Übereinstimmungen gefunden werden, geben sie ein leeres Array zurück und zeigen eine Warnung.
-
-```ts
-const character = ref(null)
-
-watch(character, ({ model }) => {
-  if (model) {
-    const bones = seekAll(character, type, 'Bone')
-  }
-})
-```
-
-## useTresContext
-
-Dieses Composable bietet Zugriff auf den Kontext, der mehrere nützliche Properties enthält.
-
-```ts
-const { camera, renderer, camera, cameras } = useTresContext()
-```
-
-::: warning
-`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` als Anbieter der Kontextdaten fungiert. Verwende [den von TresCanvas bereitgestellten Kontext](tres-canvas#offentlich-exportierte-properties), wenn du in Komponenten darauf zugreifen musst, die über den TresCanvas hinausgehen.
-:::
-
-```vue
-<TresCanvas>
-  <MyModel />
-</TresCanvas>
-```
-
-```vue
-// MyModel.vue
-
-<script lang="ts" setup>
-import { useTresContext } from '@tresjs/core'
-
-const context = useTresContext()
-</script>
-```
-
-### Kontexteigenschaften
-
-| Eigenschaft | Beschreibung |
-| --- | --- |
-| **camera** | die aktuell aktive Kamera |
-| **cameras** | die Kameras, die in der Szene vorhanden sind |
-| **controls** | die Steuerungen deiner Szene |
-| **deregisterCamera** | eine Methode zum de-registrieren einer Kamera. Dies ist nur notwendig, wenn du eine Kamera manuell erstellst. Kameras im Template werden automatisch de-registriert. |
-| **extend** | Erweitert den Katalog der Komponenten. Siehe [Erweiterung](/de/advanced/extending) |
-| **raycaster** | der globale Raycaster, der für Zeigereignisse verwendet wird |
-| **registerCamera** | eine Methode zum Registrieren einer Kamera. Dies ist nur notwendig, wenn du eine Kamera manuell erstellst. Kameras im Template werden automatisch registriert. |
-| **renderer** | der [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) deiner Szene |
-| **scene** | die [Szene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
-| **setCameraActive** | eine Methode, um eine Kamera als aktiv zu setzen |
-| **sizes** | enthält die Breite, Höhe und das Seitenverhältnis deines Canvas |

docs/de/api/events.md

@@ -1,27 +0,0 @@
-# Events
-
-**TresJS**-Komponenten lösen Pointer-Events aus, wenn mit ihnen interagiert wird. Dies gilt für Komponenten, die von [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) abgeleitet sind (wie Meshes, Groups, ...).
-
-<StackBlitzEmbed project-id="tresjs-events" />
-
-## Pointer Events
-
-```html
-<TresMesh
-  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
-  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
-  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
-  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
-/>
-```
-
-| Event      | wird ausgelöst, wenn ...                                                         | Typ(en) des Eventhandler-Parameters                                                                                                                                |
-| ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... die Ereignisse pointerdown und pointerup nacheinander auf demselben Objekt ausgelöst werden | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
-| pointer-move  | ... der Zeiger sich über dem Objekt bewegt                                         | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
-| pointer-enter | ... der Zeiger in das Objekt eintritt                                              | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
-| pointer-leave | ... der Zeiger das Objekt verlässt                                                 | [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent)                                                                                          |
-
-Die zurückgegebene [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) beinhaltet das [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D), das das Ereignis ausgelöst hat. Du kannst darauf über `intersection.object` zugreifen.
-
-Standardmäßig werden Events von Objekten, die vor anderen Objekten mit Event-Handlern positioniert sind nicht blockiert. Dieses Verhalten kann aber mit der Eigenschaft `blocks-pointer-events` erreicht werden.

docs/de/api/instances-arguments-and-props.md

@@ -1,151 +0,0 @@
-# Instanzen
-
-Die Hauptidee von **Tres** ist ein _automatisch generierter Katalog_ aller Three.js-Elemente. Dieser Katalog wird aus dem Quellcode von Three.js generiert, sodass er immer auf dem neuesten Stand ist.
-
-Wenn du reines Three.js schreibst, musst du die Elemente, die du nutzen möchtest, explizit importieren. Zum Beispiel, wenn du eine `PerspectiveCamera` verwenden möchtest, musst du sie aus dem `three` Paket importieren:
-
-```js
-import { PerspectiveCamera } from 'three'
-
-const camera = new PerspectiveCamera(45, width / height, 1, 1000)
-```
-
-Mit **Tres** musst du nichts importieren, da **Tres** automatisch eine **Vue-Komponente basierend auf dem Three-Objekt, das du verwenden möchtest, im PascalCase mit einem Tres-Prefix** generiert. Zum Beispiel, wenn du eine `PerspectiveCamera` verwenden möchtest, kannst du die Komponente `<TresPerspectiveCamera />` nutzen.
-
-```vue{3}
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera />
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-Das bedeutet, dass du dieselbe [Dokumentation](https://threejs.org/docs/) nutzen kannst, die du beim Verwenden von Three.js verwenden würdest.
-
-## Objekte deklarieren
-
-Wenn wir diesem Argument folgen, solltest du in der Lage sein, eine Instanz auf diese Weise zu definieren: ❌
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera
-      visible
-      :position="new THREE.Vector3(1, 2, 3)"
-    />
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-Aber mit **Tres** ist das nicht notwendig, du kannst die Properties auf deklarative Weise wie folgt definieren: ✅
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera
-      visible
-      :position="[1, 2, 3]"
-    />
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-## Argumente
-
-Einige Three.js-Objekte haben Argumente. Zum Beispiel hat der Konstruktor `PerspectiveCamera` folgende Argumente:
-
-- `fov` - Vertikales Sichtfeld der Kamera.
-- `aspect` - Seitenverhältnis des Frustums der Kamera.
-- `near` - Vordere Clippingebene des Sichtbereichs.
-- `far` - Hintere Clippingebene des Sichtbereichs.
-
-Um diese Argumente an die Komponente `TresPerspectiveCamera` zu übergeben, kannst du die Property `args` verwenden:
-
-```vue
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-Dasselbe kann wie folgt geschrieben werden:
-
-```ts
-const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
-```
-
-# Props
-
-Du kannst auch Props an die Komponente übergeben. Zum Beispiel hat das `TresAmbientLight` eine Property `intensity`, die folgendermaßen übergeben werden können:
-
-```html
-<TresAmbientLight :intensity="0.5" />
-```
-
-### Werte Setzen
-
-Alle Properties, die in der zugrundeliegenden Klasse eine `.set()`-Methode haben, können via Prop als Array übergeben werden. Zum Beispiel hat die `TresPerspectiveCamera` eine Property `position`, die ein `Vector3`-Objekt ist. Du kannst ihren Wert so setzen:
-
-```html
-<TresPerspectiveCamera :position="[1, 2, 3]" />
-```
-
-Um Transformations-Properties wie Position, Rotation und Skalierung anzugeben, gibt es eine Kurzform, die es dir erlaubt, direkt die Achse anzugeben, die du innerhalb der Eigenschaften setzen möchtest. Eine ähnliche Kurzform ist auch für die Farb-Property verfügbar.
-
-<!-- Wir haben die Farbsyntax von Vue zu HTML geändert, da Vue verschachtelte Komponenten nicht einfärbt -->
-```html
-<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
-  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
-</TresMesh>
-```
-
-::: warning
-Wenn du die Rotations-Property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler) setzt, wird standardmäßig die Reihenfolge 'XYZ' verwendet.
-Falls die Kurzform verwendet wird, ist die Reihenfolge, in der die Winkel gesetzt werden wichtig. Für mehr Informationen zu diesem Thema, siehe [Eulerwinkel](https://de.wikipedia.org/wiki/Eulersche_Winkel).
-:::
-
-```vue
-<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
-
-<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
-
-<!-- Beachte, dass die Reihenfolge der Rotationseigenschaften wichtig ist
- und das Ändern der Reihenfolge zu unterschiedlichen Ergebnissen führen kann. -->
-```
-
-### Skalieren
-
-Ein weiteres Kürzel, das du verwenden kannst, ist das Übergeben eines Skalarwertes an eine Property, die ein `Vector3`-Objekt erwartet, indem du denselben Wert für den Rest des Vektors verwendest:
-
-```html
-<TresPerspectiveCamera :position="5" /> ✅
-```
-
-```html
-<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
-```
-
-### Farben
-
-Du kannst Farben an die Komponenten übergeben, indem du die Property `color` verwendest, die einen String mit dem Namen der Farbe oder einen Hex-Wert akzeptiert:
-
-```html
-<TresAmbientLight color="teal" /> ✅
-```
-
-```html
-<TresAmbientLight color="#008080" /> ✅
-```
-
-### Methoden
-
-Einige Properties sind eigentlich Methoden. Zum Beispiel die `TresPerspectiveCamera` hat eine Methode `lookAt`, die von [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt) geerbt ist. Das bedeutet dass du der Komponente die Koordination auf folgende Weise übergeben kannst:
-
-```html
-<TresPerspectiveCamera :look-at="[1, 2, 3]" />
-```

docs/de/api/tres-canvas.md

@@ -1,103 +0,0 @@
-# TresCanvas
-
-Die `TresCanvas` Komponente ist die Hauptkomponente von Tres, welche den `WebGLRenderer` erstellt.
-
-```vue{2,5}
-<template>
-  <TresCanvas shadows :output-encoding="SRGBColorSpace">
-    <TresPerspectiveCamera />
-      <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-## Größe des Canvas
-
-Die `TresCanvas`-Komponente verwendet die Größe des Elternelements als Leinwandgröße. Wenn du die Fenstergröße als Leinwandgröße verwenden möchtest, kannst du die Eigenschaft `window-size` auf `true` setzen.
-
-```vue
-<template>
-  <TresCanvas window-size>
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-Oder du setzt die canvas-size per CSS:
-
-```css
-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-}
-#canvas {
-  height: 100%;
-  width: 100%;
-}
-```
-
-## Presets
-
-Tres bietet einige Voreinstellungen für die `TresCanvas`-Komponente. Du kannst sie nutzen, indem du die Eigenschaft `preset` verwendest.
-
-### Realistic
-
-Das Voreinstellung `realistic` erleichtert die Konfiguration des Renderers für realistischere 3D-Szenen.
-
-```vue
-<template>
-  <TresCanvas preset="realistic">
-    <!-- Deine Szene -->
-  </TresCanvas>
-</template>
-```
-
-Ist equivalent zu:
-
-```ts
-renderer.shadows = true
-renderer.physicallyCorrectLights = true
-renderer.outputColorSpace = SRGBColorSpace
-renderer.toneMapping = ACESFilmicToneMapping
-renderer.toneMappingExposure = 3
-renderer.shadowMap.enabled = true
-renderer.shadowMap.type = PCFSoftShadowMap
-```
-
-## Props
-
-| Eigenschaft | Beschreibung | Standardwert |
-| ---- | ---- | --- |
-| **alpha** | Steuert den Standard-Alphawert. Wenn auf true gesetzt, ist der Wert 0. Andernfalls ist er 1. | `false` |
-| **antialias** | Gibt an, ob Antialiasing durchgeführt werden soll. | `true` |
-| **camera** | Eine manuelle Kamera, die vom Renderer verwendet wird. | |
-| **clearColor** | Die Farbe, die der Renderer verwendet, um die Leinwand zu löschen. | `#000000` |
-| **context** | Kann verwendet werden, um den Renderer an einen vorhandenen [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) anzuhängen. | |
-| **depth** | Gibt an, ob der Zeichenpuffer einen [Tiefenpuffer](https://en.wikipedia.org/wiki/Z-buffering) von mindestens 16 Bit hat. | `true` |
-| **failIfMajorPerformanceCaveat** | Gibt an, ob die Erstellung des Renderers fehlschlagen soll, wenn eine geringe Performance festgestellt wird. Siehe die [WebGL-Spezifikation](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) für weitere Details. | `false` |
-| **logarithmicDepthBuffer** | Gibt an, ob ein logarithmischer Tiefenpuffer verwendet werden soll. Dies kann notwendig sein, wenn in einer einzigen Szene enorme Skalendifferenzen gehandhabt werden müssen. Beachte, dass diese Einstellung gl_FragDepth verwendet, wenn verfügbar, was die Optimierung [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) deaktiviert und zu einer Performancesverminderung führen kann. | `false` |
-| **outputColorSpace** | Definiert die Ausgabekodierung. | `LinearEncoding` |
-| **powerPreference** | Gibt einen Hinweis an den Benutzeragenten, welche GPU-Konfiguration für diesen WebGL-Kontext geeignet ist. Kann "high-performance", "low-power" oder "default" sein. | `default` |
-| **precision** | Shader-Präzision. Kann "highp", "mediump" oder "lowp" sein. | "highp" wenn vom Gerät unterstützt |
-| **premultipliedAlpha** | Gibt an, ob der Renderer annimmt, dass die Farben [vormultipliziertes Alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha) haben. | `true` |
-| **preserveDrawingBuffer** | Gibt an, ob die Puffer erhalten bleiben sollen, bis sie manuell gelöscht oder überschrieben werden. | `false` |
-| **shadows** | Aktiviert Schatten im Renderer. | `false` |
-| **shadowMapType** | Legt den Typ der `shadowMap` fest. | `PCFSoftShadowMap` |
-| **stencil** | Gibt an, ob der Zeichenpuffer einen [Stencil-Puffer](https://en.wikipedia.org/wiki/Stencil_buffer) von mindestens 8 Bit hat. | `true` |
-| **toneMapping** | Definiert das Tone-Mapping-Verfahren, das vom Renderer verwendet wird. | `ACESFilmicToneMapping` |
-| **toneMappingExposure** | Belichtungslevel des Tone-Mappings. | `1` |
-| **useLegacyLights** | Gibt an, ob der Legacy-Beleuchtungsmodus verwendet werden soll oder nicht. | `true` |
-| **windowSize** | Gibt an, ob die Fenstergröße als Leinwandgröße oder die des Elternelements verwendet werden soll. | `false` |
-
-### Standardwerte
-
-Tres versucht so unvoreingenommen wie möglich zu sein. Deshalb setzt es fast keine Standardwerte für die `TresCanvas`-Komponente. Es verwendet die Standardwerte von [three.js](https://threejs.org/). Die einzige Ausnahme ist die Eigenschaft `antialias`, die standardmäßig auf `true` gesetzt ist.
-
-## Öffentlich exportierte Properties
-
-| Property | Beschreibung |
-| ---- | ---- |
-| context | siehe [useTresContext](composables#usetrescontext) |

docs/de/cookbook/advanced-animations.md

@@ -1,35 +0,0 @@
----
-title: Fortgeschrittene Animationen
-description: Wie man mit GSAP eine Szene animiert
-author: dennissmuda
-thumbnail: /recipes/animations.png
-difficulty: 0
----
-
-# Fortgeschrittene Animationen
-
-In diesem Rezept werden wir GSAP verwenden um unsere Szene zu animieren, statt des `useRenderLoop`-Composables.
-
-<StackBlitzEmbed project-id="tresjs-advanced-animations" />
-
-## 3D Objekte mit GSAP animieren
-
-Wir müssen nicht unbedingt `useRenderLoop` oder gar TresJS für unsere Animationen benutzen. Zum Beispiel könnten wir auch GSAP's `to`-Method verwenden:
-
-```ts
-import gsap from 'gsap'
-
-const objectRef = shallowRef(null)
-
-watchEffect(() => {
-  if (objectRef.value) {
-    gsap.to(objectRef.value.position, {
-      y: 2,
-    })
-  }
-})
-```
-
-GSAP ist schon seit vielen Jahren eine sehr beliebte Animations-Library im Web. Es gibt also unzählige Resourcen online wie zum Beispiel [diese Demos auf Codepen](https://codepen.io/GreenSock).
-
-Du kannst natürlich auch _deine_ Lieblingsbibliothek nutzen, an Animations-Bibliotheken mangelt es im Web nicht!

docs/de/cookbook/basic-animations.md

@@ -1,97 +0,0 @@
----
-title: Einfache Animationen
-description: Wie man das useRenderLoop Composable verwendet, um Objekte zu animieren.
-author: alvarosabu
-thumbnail: /recipes/animations.png
-difficulty: 0
----
-
-# Einfache Animationen
-
-Diese Anleitung wird dir helfen, mit grundlegenden Animationen in TresJS zu beginnen.
-
-Wir werden eine einfache Szene mit einem Würfel erstellen. Anschließend animieren wir den Würfel, sodass er sich um die Y- und Z-Achse dreht.
-
-<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
-
-Das Composable `useRenderLoop` ist das Herzstück von Animationen in TresJS. Es ermöglicht dir, eine Funktion zu registrieren, die jedes Mal ausgeführt wird, wenn der Renderer die Szene aktualisiert.
-
-Weitere Informationen zur Funktionsweise gibt es in der Dokumentation von [useRenderLoop](/de/api/composables#userenderloop).
-
-```ts
-const { onLoop } = useRenderLoop()
-
-onLoop(({ delta, elapsed }) => {
-  // wird bei jeder Bildaktualisierung ausgeführt (60FPS, abhängig vom Monitor
-})
-```
-
-## Eine Referenz zum Würfel bekommen
-
-Um den Würfel zu animieren, benötigen wir eine Referenz via eines [Template-Ref](https://vuejs.org/guide/essentials/template-refs.html). Dazu verwenden wir die `ref`-Eigenschaft an der `TresMesh`-Komponente damit wir Zugriff auf die THREE-Instanz bekommen.
-
-Um die Performance zu verbessern, verwenden wir ein [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity), zum Speichern der Referenz. Warum wir keine reguläre Referenz benutzen, kannst du [hier](../advanced/caveats.md#reactivity) nachlesen.
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
-</script>
-
-<template>
-  <TresCanvas>
-    <TresMesh
-      ref="boxRef"
-      :scale="1"
-    >
-      <TresBoxGeometry :args="[1, 1, 1]" />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## Den Würfel animieren
-
-Jetzt, wo wir eine Referenz zum Würfel haben, können wir ihn animieren. Wir werden den `onLoop`-Callback verwenden, um die Rotation des Würfels zu aktualisieren.
-
-```ts
-onLoop(({ delta, elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += delta
-    boxRef.value.rotation.z = elapsed * 0.2
-  }
-})
-```
-
-Du kannst auch das `delta` der [internen Uhr von THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) oder `elapsed` nutzen, um den Würfel zu animieren.
-
-## Aber warum nicht die Reaktivität nutzen?
-
-Du fragst dich vielleicht, warum wir keine Reaktivität nutzen, um den Würfel zu animieren. Die Antwort ist einfach: Performance.
-
-```vue
-// Das ist keine gute Idee ❌
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-
-const boxRotation = reactive([0, 0, 0])
-
-onLoop(({ delta, elapsed }) => {
-  boxRotation[1] += delta
-  boxRotation[2] = elapsed * 0.2
-})
-</script>
-```
-
-Als Vue Entwickler mag es intiuitiv scheinen, Reaktivität zu nutzen, um den Würfel zu animieren, aber das wäre eine schlechte Idee.
-Der Grund ist, dass [die Reaktivität von Vue auf Proxies basiert](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) und nicht dafür ausgelegt ist, in einem Render-Loop verwendet zu werden, der 60 oder mehr Mal pro Sekunde ausgeführt wird.
-
-Die unten eingebettete Seite zeigt den [Performancestest eines Proxy im Vergleich zu einem regulären Objekt](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Wie du sehen kannst, ist der Proxy 5 Mal langsamer als das reguläre Objekt.
-
-<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
-
-Mehr darüber kannst du im Abschnitt [Caveats](../advanced/caveats.md#reactivity) lesen.

docs/de/cookbook/groups.md

@@ -1,40 +0,0 @@
----
-title: Gruppen
-description: Erfahre, wie man mehrere Objekte in der Szene gruppieren kann.
-author: alvarosabu
-thumbnail: /recipes/groups.png
-difficulty: 0
----
-
-# Gruppen
-
-Eine `<TresGroup>` ist eine Instanz der Klasse [THREE.Group](https://threejs.org/docs/#api/en/objects/Group), die fast das Gleiche wie ein [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) ist. Sie ermöglicht es dir, **mehrere Objekte in der Szene zu gruppieren**, sodass sie gebündelt manipuliert werden können (Transformation, Rotation, etc...)."
-
-## Benutzung
-
-```vue{13,22}
-<script setup lang="ts">
-const groupRef = ref()
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (groupRef.value) {
-    groupRef.value.rotation.y += 0.01
-  }
-})
-</script>
-<template>
-  <TresCanvas>
-    <TresGroup ref="groupRef" :position="[2,0,0]">
-      <TresMesh>
-        <TresBoxGeometry />
-        <TresMeshBasicMaterial color="red" />
-      </TresMesh>
-      <TresMesh>
-        <TresSphereGeometry />
-        <TresMeshBasicMaterial color="blue" />
-      </TresMesh>
-    </TresGroup>
-  </TresCanvas>
-</template>
-```

docs/de/cookbook/index.md

@@ -1,5 +0,0 @@
-# Kochbuch (Cookbook) 🍳🧑‍🍳
-
-In diesem "Kochbuch" findest du erlesene Rezepte, um den Einstieg in die Grundlagen von Tres zu erleichtern. Jedes Rezept ist darauf ausgelegt, Kernkonzepte von Tres zu vermitteln und zu zeigen, wie die Anwendung aussieht.
-
-<Cookbook />

docs/de/cookbook/lights-shadows.md

@@ -1,184 +0,0 @@
----
-title: Licht und Schatten
-description: Erfahre, wie man Lichter und Schatten zu einer Szene hinzufügen kann.
-author: alvarosabu
-thumbnail: /recipes/lights-and-shadows.png
-difficulty: 0
----
-
-# Licht und Schatten
-
-Diese Anleitung wird dir helfen, mit einfachen Lichtern und Schatten in TresJS zu beginnen.
-
-Wir werden eine einfache Szene mit drei Meshes und einer Ebene erstellen, aber nur zwei der Meshes werden Schatten werfen.
-
-<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
-
-## Einrichten der Szene (optional)
-
-Wir importieren alle Module, die wir benötigen. Zusätzlich können wir Orbit-Controls von Cientos verwenden um unsere Szene besser zu beobachten, [siehe hier wie das geht](/de/cookbook/orbit-controls).
-
-Das erste Objekt unserer Szene wird die Ebene sein, die Schatten empfängt. Zwei weitere Objekte werden Schatten werfen und das letzte wird überhaupt keinen Schatten werfen.
-
-Wir verwenden das [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial), weil wir so den "weichen Schattierungseffekt" sehr leicht sehen können.
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
-
-    <TresMesh
-      :position="[-2, 2, 0]"
-      :rotation="[0, Math.PI, 0]"
-    >
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, 0, 0]"
-    >
-      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-      <TresMeshToonMaterial color="#4F4F4F" />
-    </TresMesh>
-    <TresMesh
-      :position="[2, -2, 0]"
-    >
-      <TresSphereGeometry />
-      <TresMeshToonMaterial color="#FBB03B" />
-    </TresMesh>
-    <TresMesh
-      :position="[0, -3, 0]"
-      :rotation="[-Math.PI / 2, 0, 0]"
-    >
-      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-      <TresMeshStandardMaterial color="#f7f7f7" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## Lichter (Erklärung)
-
-Wie du weißt, sind alle Teile von [three.js](https://threejs.org/) in **TresJS** verfügbar. Das gilt auch für alle Arten von Lichtern. Wir müssen nur das Präfix `Tres` hinzufügen, um sie als Vue-Komponente zu nutzen.
-
-Aber nicht alle Lichter können Schatten erzeugen! Zum Beispiel ist der Zweck eines [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) alle Seiten deiner Szene zu beleuchten, dabei sollen keine Schatten erzeugt werden. Im Gegensatz dazu kann und sollte ein [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper), das die Sonne imitiert, Schatten werfen.
-
-## Schatten (Erklärung)
-
-Es gibt verschiedene Arten von Schatten. Zum Beispiel wird der "weiche Schatten" automatisch erzeugt, wenn ein Objekt von einer Seite mehr Licht erhält. Ein "Standard Three.js Schatten" auf einer Oberfläche, muss von einem Mesh geworfen und von einem anderen Mesh empfangen werden. Wie wir in unserem Beispiel sehen, empfängt die `Ebene` einen Schatten, wirft aber keinen. Beachte, dass nicht alle Materialien Schatten werfen beziehungsweise empfangen können.
-
-Intern generiert Three.js automatisch ein neues Mesh mit einem [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial), das in jedem Frame aktualisiert wird. Somit werden Schatten automatisch mit animiert, wenn du Animationen verwendest. Das ist aber auch der Grund, warum du Schatten vorsichtig verwenden solltest, da sie die Performance beeinträchtigen können.
-
-::: warning
-Die übermäßige Verwendung von Schatten auf diese Weise kann die Performance beeinträchtigen. Es gibt jedoch Möglichkeiten, die Performance zu verbessern. Für weitere Informationen, siehe [dieses Video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
-:::
-
-## Schatten aktivieren
-
-Folgende drei Schritte brauchen wir.
-
-### Schatten im Renderer aktivieren
-
-```vue{6}
-//...
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    shadows
-    window-size
-  />
-  //...
-</template>
-```
-
-## Das Licht zum Werfen von Schatten konfigurieren
-
-Wir können einfach das Boolean `cast-shadow` hinzufügen. Vue interpretiert es als ein `prop` mit dem Wert `true`.
-
-_Umgebungslicht erzeugt hier keine Art von Schatten_
-
-```vue{6}
-//...
-
-<template>
-  <TresAmbientLight :intensity="1" />
-  <TresDirectionalLight
-    cast-shadow
-    :position="[0, 2, 0]"
-    :intensity="1"
-  />
-
-  //...
-</template>
-```
-
-### Objekte zum Werfen oder Empfangen von Schatten einstellen
-
-Ähnlich wie im vorherigen Schritt konfigurieren wir das Mesh, von dem wir möchten, dass es Schatten wirft (unsere Kugel), mit der Eigenschaft `cast-shadow`. Zusätzlich konfigurieren wir das Objekt, das Schatten empfangen soll (unsere Ebene), mit der Eigenschaft `receive-shadow`.
-
-```vue{5,12}
-//...
-
-<template>
-  <TresMesh
-    cast-shadow
-    :position="[2, -2, 0]"
-  >
-    <TresSphereGeometry />
-    <TresMeshToonMaterial color="#FBB03B" />
-  </TresMesh>
-  <TresMesh
-    receive-shadow
-    :position="[0, -3, 0]"
-    :rotation="[-Math.PI / 2, 0, 0]"
-  >
-    <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-    <TresMeshStandardMaterial color="#f7f7f7" />
-  </TresMesh>
-  //...
-</template>
-```
-
-Jetzt haben wir alle notwendigen Schritte, um Schatten zu unserer Szene hinzuzufügen abgeschlossen. Wenn wir nun das, was wir in [grundlegenden Animationen](/de/cookbook/basic-animations) gelernt haben, anwenden und unseren Würfel bewegen, wirst du sehen, dass der Schatten auch animiert wird 🤩
-
-```vue
-<script setup>
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const boxRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y += 0.01
-  }
-})
-</script>
-
-<template>
-  //...
-  <TresMesh
-    ref="boxRef"
-    cast-shadow
-    :position="[0, 0, 0]"
-  >
-    <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-    <TresMeshToonMaterial color="#4F4F4F" />
-  </TresMesh>
-  //...
-</template>
-```
-
-_Beachte, dass wir absichtlich `cast-shadow` nicht auf den `Cone` angewendet haben, damit er keinen Schatten wirft_

docs/de/cookbook/load-models.md

@@ -1,159 +0,0 @@
----
-title: Modelle laden
-description: Lade 3D-Modelle in deine Tres-Szenen.
-author: alvarosabu
-thumbnail: /recipes/gltf-model.png
-difficulty: 1
----
-
-# Modelle laden
-
-> Alle Modelle, die in dieser Anleitung verwendet werden, stammen von [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
-
-3D-Modelle sind in Hunderten von Dateiformaten verfügbar, jedes mit unterschiedlichen Zwecken, variierenden Eigenschaften und Komplexität.
-
-In dieser Anleitung konzentrieren wir uns auf das Laden von gLTF-Modellen (GL Transmission Format), dem häufigsten Format für 3D-Modelle im Web.
-
-<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==" />
-
-Es gibt verschiedene Möglichkeiten, Modelle in TresJS zu laden.
-
-::: warning
-Bitte beachte, dass wir in den vorherigen Beispielen das "top-level" `await` verwendet haben. Stelle sicher, dass du es mit einer [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense)-Komponente umgibst.
-:::
-
-## Verwendung von `useLoader`
-
-Das Composable `useLoader` ermöglicht es dir, jeden Typ von three.js-Loader und eine URL zum Laden der Ressource zu übergeben. Es gibt ein `Promise` mit der geladenen Ressource zurück.
-
-Eine detaillierte Erklärung, wie `useLoader` verwendet wird, findest du in der Dokumentation von [useLoader](/de/api/composables#useloader).
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
-
-const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
-```
-
-Dann kannst du die Szene des Modells in einer [`primitive`](/de/advanced/primitive)-Komponente von TresJS übergeben, um sie zu rendern:
-
-```html
-<primitive :object="scene" />
-```
-
-> Die Komponente `<primitive />` ist keine eigenständige Komponente im Quellcode von Tres. Stattdessen ist sie Teil der Kernfunktionalität von Tres. Wenn du `<primitive>` verwendest, wird dies zu einem Aufruf von `createElement`, der das entsprechende three.js-Objekt basierend auf der bereitgestellten "object"-Eigenschaft erstellt.
-
-Beachte im obigen Beispiel, dass wir die `Suspense`-Komponente verwenden, um die `TresCanvas`-Komponente zu umgeben. Dies liegt daran, dass `useLoader` eine `Promise` zurückgibt und wir warten müssen, bis sie erfüllt ist, bevor wir die Szene rendern können.
-
-## Verwendung von `useGLTF`
-
-Eine bequemere Möglichkeit, Modelle zu laden, ist die Verwendung des Composables `useGLTF`, das im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
-```
-
-Ein Vorteil der Verwendung von `useGLTF` ist, dass du eine `draco`-Eigenschaft übergeben kannst, um die [Draco-Kompression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) für das Modell zu aktivieren. Dies wird die Größe des Modells reduzieren und die Performance verbessern.
-
-```ts
-import { useGLTF } from '@tresjs/cientos'
-
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
-```
-
-Alternativ kannst du Objekte innerhalb des Modells leicht mit der Eigenschaft `nodes` auswählen.
-
-::: code-group
-
-```vue [App.vue]
-<script setup lang="ts">
-import Model from './Model.vue'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Suspense>
-      <Model />
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-
-```vue [Model.vue]
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-
-const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
-</script>
-
-<template>
-  <primitive :object="node.AkuAku" />
-</template>
-```
-:::
-
-## Verwendung von `GLTFModel`
-
-Die Komponente `GLTFModel` ist eine Hülle um `useGLTF`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, GLTFModel } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha>
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Suspense>
-      <GLTFModel path="/models/AkuAku.gltf" draco />
-    </Suspense>
-    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-  </TresCanvas>
-</template>
-```
-
-Dieser Ansatz ist zwar einfacher, bietet aber weniger Kontrolle über das Modell.
-
-## Verwendung von `useFBX`
-
-Das Composable `useFBX` ist im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar.
-
-```ts
-import { useFBX } from '@tresjs/cientos'
-
-const model = await useFBX('/models/AkuAku.fbx')
-```
-
-Dann muss man nur das dem primitive das model zuweisen:
-
-```html
-<primitive :object="model" />
-```
-
-## Verwendung von `FBXModel`
-
-Die Komponente `FBXModel` ist eine Hülle um `useFBX`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist. Ihre Verwendung ist ähnlich wie bei `GLTFModel`:
-
-```vue{2,9}
-<script setup lang="ts">
-import { OrbitControls, FBXModel } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha>
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-      <Suspense>
-        <FBXModel path="/models/AkuAku.fbx" />
-      </Suspense>
-      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-  </TresCanvas>
-</template>
-```

docs/de/cookbook/load-textures.md

@@ -1,85 +0,0 @@
----
-title: Texturen laden
-description: Füge Texture-Maps zu deinen TresJS-Objekten hinzu.
-author: alvarosabu
-thumbnail: /recipes/load-textures.png
-difficulty: 1
----
-
-# Texturen laden
-
-> Alle Texturen in diesem Beispiel stammen von [ambientcg](https://ambientcg.com/).
-
-Dreidimensionale (3D) Texturen sind Bilder, die mehrere Datenebenen enthalten, was es ihnen ermöglicht, Volumen zu repräsentieren oder dreidimensionale Strukturen zu simulieren. Diese Texturen werden häufig in 3D-Grafiken und visuellen Effekten verwendet, um den Realismus und die Komplexität von Szenen und Objekten zu erhöhen.
-
-<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==" />
-
-Es gibt zwei Möglichkeiten, 3D-Texturen in TresJS zu laden:
-
-## Verwendung von `useLoader`
-
-Das Composable `useLoader` ermöglicht es dir, einen three.js-Loader und eine URL zum Laden der Resource zu übergeben. Es gibt ein `Promise` mit der geladenen Resource zurück.
-
-Für eine detaillierte Erklärung, wie `useLoader` verwendet wird, siehe die Dokumentation von [useLoader](/de/api/composables#useloader).
-
-```ts
-import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three'
-
-const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
-```
-
-Dann kannst du die Textur einem Material zuweisen:
-
-```html
-<Suspense>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry :args="[1,32,32]" />
-      <TresMeshStandardMaterial :map="texture" />
-    </TresMesh>
-  </TresCanvas>
-</Suspense>
-```
-
-Beachte im obigen Beispiel, dass `TresCanvas` von einer `Suspense`-Komponente umgeben ist. Dies liegt daran, dass `useLoader` ein `Promise` zurückgibt und wir warten müssen, bis es erfüllt ist, bevor wir die Szene rendern können.
-
-## Verwendung von `useTexture`
-
-Eine bequemere Möglichkeit, Texturen zu laden, ist die Verwendung des Composables `useTexture`. Es akzeptiert sowohl ein Array von URLs als auch ein einzelnes Objekt mit den Pfaden der gemappten Texturen.
-
-Für mehr Informationen über `useTexture`, siehe die Dokumentation von [useTexture](/de/api/composables#usetexture).
-
-```ts
-import { useTexture } from '@tresjs/core'
-
-const pbrTexture = await useTexture({
-  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
-  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
-  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
-  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
-  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
-  matcap: '/textures/black-rock/myMatcapTexture.jpg',
-  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
-})
-```
-
-Wie im vorherigen Beispiel können wir alle Texturen über Props an ein Material übergeben:
-
-```html
-<Suspense>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry :args="[1,32,32]" />
-      <TresMeshStandardMaterial
-        :map="pbrTexture.map"
-        :displacementMap="pbrTexture.displacementMap"
-        :roughnessMap="pbrTexture.roughnessMap"
-        :normalMap="pbrTexture.normalMap"
-        :aoMap="pbrTexture.ambientOcclusionMap"
-      />
-    </TresMesh>
-  </TresCanvas>
-</Suspense>
-```

docs/de/cookbook/orbit-controls.md

@@ -1,129 +0,0 @@
----
-title: OrbitControls
-description: Wie man OrbitControls verwendet, um mit der Szene zu interagieren.
-author: alvarosabu
-thumbnail: /recipes/orbit-controls.png
-difficulty: 1
----
-
-# OrbitControls
-
-<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) ist ein Kamerasteuerungselement, das es dir ermöglicht, die Kamera frei um einen zentralen Punkt herum zu bewegen. Es ist eine großartige Möglichkeit, deine Szene zu erkunden.
-Allerdings sind [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) kein Teil des Cores von Three.js. Daher müsstest du es aus dem Modul `three/addons/controls/OrbitControls` importieren.
-
-**TresJS** erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig `TextGeometry` nicht Teil dieses Katalogs.
-
-Glücklicherweise bietet **TresJS** eine Möglichkeit, den Komponentenkatalog mit der `extend`-Methode zu erweitern.
-
-Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt [Erweitern](/de/advanced/extending.md).
-
-## Verwendung von OrbitControls
-
-Um `OrbitControls` zu verwenden, musst du sie aus dem Modul `three/addons/controls/OrbitControls` importieren.
-
-```js
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-```
-
-Danach musst du den Komponentenkatalog mit der `extend`-Methode erweitern.
-
-```js
-import { extend } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-
-extend({ OrbitControls })
-```
-
-Jetzt kannst du die Komponente `TresOrbitControls` in deiner Szene verwenden.
-
-::: code-group
-
-```vue [OrbitControls.vue]
-<template>
-  <TresOrbitControls
-    v-if="renderer"
-    :args="[camera, renderer?.domElement]"
-  />
-</template>
-```
-
-Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigen, musst du diese als Argumente übergeben. Du kannst das Composable [useTresContext](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.
-
-::: warning
-`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` die Kontext-Daten bereitstellt. Deshalb haben wir eine Unterkomponente namens `OrbitControls.vue` implementiert. Erfahre mehr über [context](/de/api/composables#usetrescontext).
-:::
-
-```ts
-import { useTres } from '@tresjs/core'
-
-const { camera, renderer } = useTres()
-```
-
-Dann würde der finale Code etwa so aussehen:
-
-::: code-group
-
-```vue [OrbitControls.vue]
-<script setup lang="ts">
-import { extend, useTresContext } from '@tresjs/core'
-import { OrbitControls } from 'three/addons/controls/OrbitControls'
-
-extend({ OrbitControls })
-
-const { camera, renderer } = useTresContext()
-</script>
-
-<template>
-  <TresOrbitControls
-    v-if="renderer"
-    :args="[camera, renderer?.domElement]"
-  />
-</template>
-```
-
-```vue [App.vue] {3,12}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import OrbitControls from './OrbitControls.vue'
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <OrbitControls />
-    <TresGridHelper :args="[10, 10]" />
-  </TresCanvas>
-</template>
-```
-
-:::
-
-## OrbitControls von `cientos`
-
-Jetzt wird es interessant. ✨
-Das Paket `cientos` bietet eine Komponente namens `<OrbitControls />`, die ein Wrapper für die `OrbitControls` aus dem Modul [`three-stdlib`](https://github.com/pmndrs/three-stdlib) ist.
-
-Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben.
-Es funktioniert einfach. 💯
-
-```vue {3,12}
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-</script>
-
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```

docs/de/cookbook/shaders.md

@@ -1,187 +0,0 @@
----
-title: Shaders
-description: Shaders bieten eine Welt voller Möglichkeiten.
-author: alvarosabu
-thumbnail: /recipes/shaders.png
-difficulty: 2
----
-
-# Shaders
-
-Diese Anleitung wird dir helfen, deine ersten Schritte mit Shadern in TresJS zu machen.
-
-Wir werden eine einfache Szene mit einem Blob erstellen. Anschließend animieren wir ihn, um ihn sanft zu verzerren.
-
-::: warning
-_Es sind Grundkenntnisse über Shader erforderlich_
-:::
-
-<SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
-
-## Einrichten der Szene (optional)
-
-Wir importieren alle Module, die wir benötigen. Zusätzlich können wir die Orbit-Controls von Cientos verwenden.  [Siehe hier, wie das geht](/de/cookbook/orbit-controls).
-
-Nun positionieren wir unsere Kamera an der Position `[11,11,11]`.
-
-Um uns bei der Positionierung zu helfen, fügen wir zum Schluß eine einfache Ebene  mit den Maßen `[10, 10]` hinzu, die um die X-Achse gedreht ist.
-
-```vue{12,14-17}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-
-    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
-      <TresPlaneGeometry :args="[10, 10]" />
-      <TresMeshBasicMaterial color="#444" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-## ShaderMaterial
-
-Wie du weißt, ist jede Instanz aus [ThreeJs](https://threejs.org/) in **TresJs** verfügbar, also können wir auch `ShaderMaterial` verwenden. Wir müssen lediglich das Präfix `Tres` hinzufügen, um es zu nutzen.
-
-Für unseren Blob können wir eine einfache `SphereGeometry` verwenden. Durch das Hinzufügen von `widthSegments` und `heightSegments` erzielen wir einen sanften Effekt. Wir platzieren unseren Blob 4 Einheiten entlang der positiven Y-Achse.
-
-```html
-<TresMesh :position="[0, 4, 0]">
-  <TresSphereGeometry :args="[2, 32, 32]" />
-  <TresShaderMaterial />
-</TresMesh>
-```
-
-Das `ShaderMaterial` akzeptiert spezielle Props wie `uniforms`, `vertexShader` und `fragmentShader`. Wir können diese Objekte in unserem Skriptbereich erstellen und später der Komponente übergeben.
-
-Für dieses Beispiel sehen unsere Uniforms so aus:
-
-```ts
-import { Vector2 } from 'three'
-
-// ...
-const uniforms = {
-  uTime: { value: 0 },
-  uAmplitude: { value: new Vector2(0.1, 0.1) },
-  uFrequency: { value: new Vector2(20, 5) },
-}
-// ..
-```
-
-Unser Fragment-Shader sieht so aus:
-
-```ts
-// ...
-const fragmentShader = `
-precision mediump float;
-varying vec2 vUv;
-
-void main() {
-    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
-}
-`
-// ..
-```
-
-Und schließlich unser `vertexShader`:
-
-```ts
-const vertexShader = `
-uniform vec2 uAmplitude;
-uniform vec2 uFrequency;
-uniform float uTime;
-
-varying vec2 vUv;
-
-void main() {
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
-    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
-
-    vec4 viewPosition = viewMatrix * modelPosition;
-    gl_Position = projectionMatrix * viewPosition;
-    vUv = uv;
-}
-`
-// ..
-```
-
-## Animieren des Blobs
-
-Ähnlich wie wir im Beispiel [Grundlegende Animationen](/de/cookbook/basic-animations) gelernt haben, beginnen wir, indem wir unseren Blob mit einer [Template-Ref](https://vuejs.org/guide/essentials/template-refs.html) referenzieren.
-<!-- TODO: Ich bin verwirrt - text und code stimmen nicht überein -->
-
-```vue
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-import { shallowRef } from 'vue'
-
-const blobRef = shallowRef(null)
-// ...
-</script>
-
-<template>
-  <TresCanvas
-    clear-color="#111"
-    window-size
-  >
-    <OrbitControls />
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <TresMesh
-      ref="blobRef"
-      :position="[0, 4, 0]"
-    >
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresShaderMaterial
-        :vertex-shader="vertexShader"
-        :fragment-shader="fragmentShader"
-        :uniforms="uniforms"
-      />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-Nun können wir den `onLoop`-Callback nutzen, um `uTime` zu animieren.
-
- ```ts
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-
- // ...
- const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-   if (blobRef.value) {
-     blobRef.value.material.uniforms.uTime.value = elapsed
-   }
-})
- // ...
-```
-
-Somit haben unseren ersten grundlegenden Shader zum Laufen gebracht!
-
-## Verwendung des GLSL vite-plugins (optional)
-
-_Dieser Schritt ist vollständig optional und liegt außerhalb des Scopes des **TresJs**-Teams_
-
-Wenn du nicht immer deine Shader inline definieren möchtest, kannst du [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) nutzen, um `GLSL`-Code in separate Dateien auszulagern.
-
-Dann könnte man den Code zum Beispiel so organisieren:
-
-```
-├── src/
-│   ├── myTresJsComponent.vue
-│   ├── shaders/
-│       ├── vertexShader.glsl
-│       ├── fragmentShader.glsl
-```

docs/de/cookbook/text-3d.md

@@ -1,207 +0,0 @@
----
-title: Text 3D
-description: Füge mühelos 3D-Text hinzu
-author: alvarosabu
-thumbnail: /recipes/text-3d.png
-difficulty: 1
----
-
-# Text laden
-
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) ist eine der Möglichkeiten, wie wir 3D-Text zu unserer Szene hinzufügen können.
-
-<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=="/>
-
-Allerdings ist es kein Teil des Kerns von Three.js. Daher müsstest du es aus dem Modul `three/addons/geometries/TextGeometry` importieren.
-
-**TresJS** erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig `TextGeometry` nicht Teil dieses Katalogs.
-
-Glücklicherweise bietet **TresJS** eine Möglichkeit, den Komponentenkatalog mit der `extend`-Methode zu erweitern.
-
-Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt [Erweitern](/de/advanced/extending.md).
-
-## Verwendung von TextGeometry
-
-Um `TextGeometry` zu verwenden, musst du es aus dem Modul `three/addons/geometries/TextGeometry` importieren.
-
-```js
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-```
-
-Danach musst du den Komponentenkatalog mit der `extend`-Methode erweitern.
-
-```js
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-
-extend({ TextGeometry })
-```
-
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) benötigt nur die Schriftart als Argument. Unten siehst du ein Beispiel.
-
-```js
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
-
-const loader = new FontLoader()
-
-const font = await new Promise((resolve, reject) => {
-  try {
-    loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  catch (error) {
-    reject(console.error('cientos', error))
-  }
-})
-```
-
-Jetzt kannst du die Komponente `TresTextGeometry` innerhalb eines TresMesh in deiner Szene verwenden.
-
-```vue
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-Dann kannst du, wie im Beispiel, ein Objekt mit den gewünschten Einstellungen übergeben.
-
-```ts
-const fontOptions = {
-  size: 0.5,
-  height: 0.2,
-  curveSegments: 5,
-  bevelEnabled: true,
-  bevelThickness: 0.05,
-  bevelSize: 0.02,
-  bevelOffset: 0,
-  bevelSegments: 4,
-}
-```
-
-Wir können auch eine matcapTexture übergeben, um feine Details hinzuzufügen, indem wir TresMeshNormalMaterial innerhalb von TresMesh verwenden.
-
-```ts
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
-```
-
-```html
-<TresMesh>
-  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-  <TresMeshNormalMaterial :matcap="matcapTexture" />
-</TresMesh>
-```
-
-Also würde der finale Code so aussehen:
-
-```vue
-<script setup lang="ts">
-import { extend } from '@tresjs/core'
-import { TextGeometry } from 'three/addons/geometries/TextGeometry'
-import { FontLoader } from 'three/addons/loaders/FontLoader'
-import { useTexture } from '/@/composables'
-
-extend({ TextGeometry })
-
-const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
-
-const fontOptions = {
-  size: 0.5,
-  height: 0.2,
-  curveSegments: 5,
-  bevelEnabled: true,
-  bevelThickness: 0.05,
-  bevelSize: 0.02,
-  bevelOffset: 0,
-  bevelSegments: 4,
-}
-
-const loader = new FontLoader()
-
-const font = await new Promise((resolve, reject) => {
-  try {
-    loader.load(fontPath, (font) => {
-      resolve(font)
-    })
-  }
-  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
-  >
-    <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
-      <TresMeshNormalMaterial :matcap="matcapTexture" />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-Das scheint viel Arbeit zu sein, aber es gibt eine einfachere Alternative.
-
-## TextGeometry von `cientos`
-
-Das Paket `cientos` bietet eine Komponente namens `<Text3D />`, die ein Wrapper für `TextGeometry` aus dem Modul [`three-stdlib`](https://github.com/pmndrs/three-stdlib) ist.
-
-Das Beste daran? Du musst den Katalog nicht erweitern, gib einfach das Schriftargument an.
-
-Es funktioniert einfach. 💯 (wenn kein Text angegeben wird, wird der Text TresJS sein)
-
-```vue
-<template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <Text3D :font="fontPath" />
-  </TresCanvas>
-</template>
-```
-
-Wir können die Optionen als Props übergeben
-
-```html
-<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
-```
-
-falls die Optionen nicht bereitgestellt werden, sind die Standardwerte:
-
-```js
-const fontOptions = {
-  size: 0.5,
-  height: 0.2,
-  curveSegments: 5,
-  bevelEnabled: true,
-  bevelThickness: 0.05,
-  bevelSize: 0.02,
-  bevelOffset: 0,
-  bevelSegments: 4,
-}
-```
-
-Der Text in Three.js beginnt standardmäßig an der Ausgangsposition des Meshs, also bei [0,0,0]. Um den Text zu zentrieren, können wir einfach das Flag "center" übergeben.
-
-```vue
-<Text3D :font="fontPath" :text="my 3d text" center />
-```

docs/de/debug/devtools.md

@@ -1,24 +0,0 @@
-# Entwicklungstools
-
-Das Debugging ist eines der größten Herausforderungen, bei dem Entwickeln von 3D-Erlebnissen im Browser. Das `<canvas>`-Element des Browsers ist eine Blackbox, und es ist schwierig nachzuvollziehen, was darin passiert. Die imperative Natur von [Three.js](https://threejs.org/) macht es schwierig zu debuggen. Um zu sehen, was passiert, muss man sich auf `console.log` oder auf Drittanbieter-Tools verlassen. Auch das Messen der Performance von Szenen gestaltet sich als äußerst schwer.
-
-![Entwickler Debugging 3D](/debug-3D.png)
-
-Eines unserer Ziele mit TresJS ist es, **die beste Entwicklererfahrung (DX)** beim Arbeiten mit 3D-Szenen im Browser zu bieten. Dank der deklarativen Natur des Ökosystems und der Vielfalt an Lösungen, die das Vue-Ökosystem bietet, wie Vue Devtools, Nuxt und Vite, können wir bessere Tools für Entwickler anbieten, um ihre Szenen zu debuggen.
-
-## Vorstellung der Entwicklerwerkzeuge
-
-Ab Version <Badge text="^3.7.0" />, führen wir die TresJS-Entwicklerwerkzeuge ein! Einen benutzerdefinierten Inspektor-Tab für die [offiziellen Chrome Developer Tools von Vue](https://devtools.vuejs.org/guide/installation.html), der es dir ermöglicht, deine TresJS-Szenen und -Komponenten zu inspizieren.
-
-![TresJS DevTools](/vue-chrome-devtools.png)
-
-### Funktionen
-
-- **Szeneninspektor**: Inspiziere die aktuelle Szene und ihre Komponenten mit einer Baumansicht ähnlich dem Komponenteninspektor von Vue Devtools.
-- **Speicherzuweisung**: Zeigt an, wie viel Speicher jede Komponente verwendet.
-- **Objektinspektor**: Inspiziere die Eigenschaften des in der Szene ausgewählten Objekts, einschließlich seiner Kinder.
-- **Konfigurierbare Eigenschaften**: Und ja, du kannst die Eigenschaften des ausgewählten Objekts bearbeiten und die Änderungen in Echtzeit sehen.
-
-![](/devtools-scene-inspector.png)
-
-Probiere die neuen Entwicklerwerkzeuge aus und gib uns Feedback! 🎉

docs/de/directives/v-distance-to.md

@@ -1,36 +0,0 @@
-# v-distance-to
-
-Hast du schon einmal versucht, die Distanz zwischen zwei Object3Ds zu berechnen?
-
-Mit der neuen Direktive `v-distance-to` ist es einfacher als je zuvor. Du musst nur das Zielobjekt für die Messung angeben und das Ergebnis wird in deiner Konsole erscheinen.
-
-Zusätzlich wird ein Pfeil zwischen den beiden Objekten erstellt.
-
-```vue{2,8,13}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphere1Ref"
-      :position="[-2, slider, 0]"
-      :scale="0.5"
-    />
-    <Sphere
-      v-distance-to="sphere1Ref"
-      :position="[2, 0, 0]"
-      :scale="0.5"
-    />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-Die Verwendung von `v-distance-to` ist reaktiv, sodass sie perfekt mit `@tres/leches` 🍰 funktioniert.
-
-::: warning
-`v-distance-to` wird kein bewegtes Objekt innerhalb des RenderLoops messen.
-:::