docs: add spanish translation, first part

docs/.vitepress/config.ts

@@ -1,154 +0,0 @@
-import { defineConfig } from 'vitepress'
-import { resolve } from 'pathe'
-
-export default 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',
-    },
-    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: 'Renderer', link: '/api/renderer' },
-          {
-            text: 'Instances, arguments and props',
-            link: '/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/api/events',
-          },
-        ],
-      },
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Orbit Controls', link: '/examples/orbit-controls' },
-          { text: 'Basic Animations', link: '/examples/basic-animations' },
-          { text: 'Groups', link: '/examples/groups' },
-          { text: 'Load Textures', link: '/examples/load-textures' },
-          { text: 'Load Models', link: '/examples/load-models' },
-          { text: 'Load Text', link: '/examples/text-3d' },
-        ],
-      },
-      {
-        text: 'Advanced',
-
-        items: [
-          { text: 'Extending', link: '/advanced/extending' },
-          {
-            text: 'Caveats',
-            link: '/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Ecosystem',
-        items: [
-          {
-            text: `Cientos 💛`,
-            link: 'https://cientos.tresjs.org/',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/renderer' },
-      /*       { 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://playground.tresjs.org/'
-          },
-          {
-            text: 'Ecosystem',
-            items: [
-              {
-                text: `Cientos 💛`,
-                link: 'https://cientos.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },  
-    ],
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/tresjs/tres' },
-      { icon: 'twitter', link: 'https://twitter.com/tresjs_dev' },
-      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
-    ],
-  },
-  vite: {
-    optimizeDeps: {
-      exclude: ['vitepress'],
-      include: ['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',
-      },
-    },
-  },
-})

docs/.vitepress/config/en.ts

@@ -0,0 +1,95 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        sidebar: [
+            {
+                text: 'Guide',
+                items: [
+                    // This shows `/guide/index.md` page.
+                    { text: 'Introduction', link: '/en/guide/' },
+                    { text: 'Getting Started', link: '/en/guide/getting-started' },
+                    { text: 'Your first Scene', link: '/en/guide/your-first-scene' },
+                    { text: 'Nuxt', link: '/en/guide/nuxt' },
+                    { text: 'Troubleshooting', link: '/en/guide/troubleshooting' },
+                    { text: 'Migrate from v1', link: '/en/guide/migration-guide' },
+                ],
+            },
+            {
+                text: 'API',
+                items: [
+                    { text: 'Renderer', link: '/en/api/renderer' },
+                    {
+                        text: 'Instances, arguments and props',
+                        link: '/en/api/instances-arguments-and-props',
+                    },
+                    {
+                        text: 'Composables',
+                        link: '/en/api/composables',
+                    },
+                    {
+                        text: 'Events',
+                        link: '/en/api/events',
+                    },
+                ],
+            },
+            {
+                text: 'Examples',
+                items: [
+                    { text: 'Orbit Controls', link: '/en/examples/orbit-controls' },
+                    { text: 'Basic Animations', link: '/en/examples/basic-animations' },
+                    { text: 'Groups', link: '/en/examples/groups' },
+                    { text: 'Load Textures', link: '/en/examples/load-textures' },
+                    { text: 'Load Models', link: '/en/examples/load-models' },
+                    { text: 'Load Text', link: '/en/examples/text-3d' },
+                ],
+            },
+            {
+                text: 'Advanced',
+
+                items: [
+                    { text: 'Extending', link: '/en/advanced/extending' },
+                    {
+                        text: 'Caveats',
+                        link: '/en/advanced/caveats',
+                    },
+                ],
+            },
+            {
+                text: 'Ecosystem',
+                items: [
+                    {
+                        text: `Cientos 💛`,
+                        link: 'https://cientos.tresjs.org/',
+                    },
+                ],
+            },
+        ],
+        nav: [
+            { text: 'Guide', link: '/guide/' },
+            { text: 'API', link: '/api/renderer' },
+            /*       { 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://playground.tresjs.org/'
+                    },
+                    {
+                        text: 'Ecosystem',
+                        items: [
+                            {
+                                text: `Cientos 💛`,
+                                link: 'https://cientos.tresjs.org/',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+}

docs/.vitepress/config/es.ts

@@ -0,0 +1,95 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        sidebar: [
+            {
+                text: 'Guide',
+                items: [
+                    // This shows `/guide/index.md` page.
+                    { text: 'Introduction', link: '/es/guide/' },
+                    { text: 'Getting Started', link: '/es/guide/getting-started' },
+                    { text: 'Your first Scene', link: '/es/guide/your-first-scene' },
+                    { text: 'Nuxt', link: '/es/guide/nuxt' },
+                    { text: 'Troubleshooting', link: '/es/guide/troubleshooting' },
+                    { text: 'Migrate from v1', link: '/es/guide/migration-guide' },
+                ],
+            },
+            {
+                text: 'API',
+                items: [
+                    { text: 'Renderer', link: '/es/api/renderer' },
+                    {
+                        text: 'Instances, arguments and props',
+                        link: '/es/api/instances-arguments-and-props',
+                    },
+                    {
+                        text: 'Composables',
+                        link: '/es/api/composables',
+                    },
+                    {
+                        text: 'Events',
+                        link: '/es/api/events',
+                    },
+                ],
+            },
+            {
+                text: 'Examples',
+                items: [
+                    { text: 'Orbit Controls', link: '/es/examples/orbit-controls' },
+                    { text: 'Basic Animations', link: '/es/examples/basic-animations' },
+                    { text: 'Groups', link: '/es/examples/groups' },
+                    { text: 'Load Textures', link: '/es/examples/load-textures' },
+                    { text: 'Load Models', link: '/es/examples/load-models' },
+                    { text: 'Load Text', link: '/es/examples/text-3d' },
+                ],
+            },
+            {
+                text: 'Advanced',
+
+                items: [
+                    { text: 'Extending', link: '/es/advanced/extending' },
+                    {
+                        text: 'Caveats',
+                        link: '/es/advanced/caveats',
+                    },
+                ],
+            },
+            {
+                text: 'Ecosystem',
+                items: [
+                    {
+                        text: `Cientos 💛`,
+                        link: 'https://cientos.tresjs.org/',
+                    },
+                ],
+            },
+        ],
+        nav: [
+            { text: 'Guide', link: '/guide/' },
+            { text: 'API', link: '/api/renderer' },
+            /*       { 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://playground.tresjs.org/'
+                    },
+                    {
+                        text: 'Ecosystem',
+                        items: [
+                            {
+                                text: `Cientos 💛`,
+                                link: 'https://cientos.tresjs.org/',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+}

docs/.vitepress/config/index.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vitepress'
+
+import { sharedConfig } from './shared'
+import { enConfig } from './en'
+import { esConfig } from './es'
+// import { zhConfig } from './zh'
+
+export default defineConfig({
+    ...sharedConfig,
+
+    locales: {
+        root: {
+            label: 'English',
+            lang: 'en-US',
+            link: '/',
+            ...enConfig,
+        },
+        es: {
+            label: 'Spanish',
+            lang: 'es',
+            link: '/es/',
+            ...esConfig,
+        },
+        // zh: {
+        //   label: '简体中文',
+        //   lang: 'zh-CN',
+        //   link: '/zh/',
+        //   ...zhConfig,
+        // },
+    },
+})

docs/.vitepress/config/shared.ts

@@ -0,0 +1,63 @@
+import { defineConfig } from 'vitepress'
+import { resolve } from 'pathe'
+
+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',
+        socialLinks: [
+            { icon: 'github', link: 'https://github.com/tresjs/tres' },
+            { icon: 'twitter', link: 'https://twitter.com/tresjs_dev' },
+            { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
+        ],
+    },
+    vite: {
+        optimizeDeps: {
+            exclude: ['vitepress'],
+            include: ['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',
+            },
+        },
+    },
+})

docs/components.d.ts

@@ -3,9 +3,11 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
     EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']

docs/es/advanced/caveats.md

@@ -0,0 +1,108 @@
+# Caveats 😱
+
+Nuestro intención es proveer una forma simple a usar ThreeJS en VueJS con la mejor experiencia posible por el desarrollador. Sin embargo, necesitas ser consiente de algunos advertencias.
+
+## ~~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) es una herramienta que te permite actualizar tu código sin recargar la página. Es una gran herramienta con que desarrollo está mucho más rápido.
+**TresJS** usa [Vite](https://vitejs.dev/). Sin embargo, que funciona correctamente con ThreeJS es difícil.
+
+Por qué? por causa de TresJs construye la escena en una forma declarativa. Eso significa que crea la instancia y la añade a la escena cuando el componente se monta. La complexidad es en conocer cuando hay que remover la instancia de la escena y cuando añadirla otra vez.
+
+Aunque se implementa un flujo de trabajo de eliminación mínima, no es perfecto. Eso significa que algunas veces necesitarás recargar la página para correctamente ver los cambios, especialmente cuando estás haciendo referencia a una instancia que usa [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
+
+```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>
+```
+
+Si haces un cambio en el `color` del componente `TresMeshStandardMaterial`, verás que el cambio se aplica pero ahora la rotación no está funcionando. Eso es porque la instancia es eliminada y construida otra vez.
+
+:::tip
+Como una **regla de oro** debes recargar la página cada vez que no ves los cambios que lo has hecho.
+:::
+
+Dicho eso, por eso estamos trabajando en una solución mejor 😁. Si tienes cualquier idea como resolver eso, por favor, coméntanos.
+
+Puedes seguir la conversación en [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
+
+## Reactivity
+
+Todos nosotros amamos reactivad 💚. Es uno de las funcionas más poderoso de VueJS. Sin embargo, de lo necesitamos ser consciente cuando usamos ThreeJS.
+
+Al base de la reactivad Vue es [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). se permita VueJS a monitorizar cambio a los objetos de datos automáticamente y actualizar los elementos DOM que corresponde cada vez que los datos cambian.
+
+Dado que estamos renderizando una escena y actualizándola en cada frame (60FPS), lo significa que estamos actualizando la escena 60 veces cada segundo. Si el objeto para ser actualizado es reactivo, Vue intentará actualizar el objeto está número de veces. eso no es un buen idea 😅 y estará dañino para rendimiento.
+
+Aquí es un benchmark de la diferencia entre usar un objeto Proxy y un objeto simple.
+
+<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>
+
+Fuente: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Si hay que usar reactivad, usa [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+A diferencia de `ref()`, el valor interior de un shallow ref se guardado y revelado tal cual, y no será profundamente reactivo. Solo el .value acceso es reactivo. Fuente [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/es/advanced/extending.md

@@ -0,0 +1,33 @@
+# Extend 🔌
+
+TresJs se ofrece funcionalidad esencial, pero es fácil añadir elementos externos y extenderles en tu catálogo interno.
+
+Muchas de las experiencias 3D usa `OrbitControls` que no es una parte de la biblioteca core en Threejs. Puedes añadirlo importando lo directamente desde `three/addons/controls/OrbitControls`
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Extender un elemento de forma dinámica
+
+```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/es/api/composables.md

@@ -0,0 +1,211 @@
+# Composables
+
+Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) te permite crear lógica reutilizable que se puede compartir entre los componentes. También te permite crear hooks personalizados que puede ser usado en tus componentes.
+
+**TresJS** aprovecha mucho está API para crear un grupo de funciones composables que se pueden usar para crear animaciones, interactuar con la escena y más. También te permite crear escenas más complejas que podrían no ser posible solo usando los componentes de Vue (Textures, Loaders, etc.).
+
+El core de **TresJS** usa estos composables internalmente, entonces estarías usando el mismo API que usa el core. Por ejemplo, componentes que se necesitan actualizar en el render loop internal usa el composable `useRenderLoop` para registrar un callback que se llamará cada vez el renderer actualiza la escena.
+
+## useRenderLoop
+
+El composable `useRenderLoop` es el core de los animaciones de **TresJS**. Te permite registrar un callback que se llamará en el ritmo nativo de actualizar. Esto es el composable más importante de **TresJS**.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+onLoop(({ delta, elapsed, clock, dt }) => {
+  // Me ejecutaré cada frame ~ 60FPS (dependiendo de tu equipo)
+})
+```
+
+::: warning
+Está consciente de la implicación sobre el rendimiento de usar est composable. Se funcionará a cada frame, entonces si tienes mucha lógica en tu callback, podría impactar el rendimiento de tu app. Especialmente si estás actualizando los estados reactivos o las referencias.
+:::
+
+El callback `onLoop` recibe un objeto con las propiedades siguientes en base del [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
+
+- `delta`: El delta tiempo entre el frame actual y frame final. Esto es el tiempo en segundos desde el frame ultimo.
+- `elapsed`: El tiempo transcurrido desde cuando comenzó el render loop.
+
+Este composable se base en `useRafFn` de [vueuse](https://vueuse.org/core/useRafFn/). Gracias a [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) por la contribución increíble.
+
+### Antes y después render
+
+También puedes registrar un callback que se llamará antes y después el renderer actualiza la escena. Eso es útil si añades un profiler para medir el FPS por ejemplo.
+
+```ts
+const { onBeforeLoop, onAfterLoop } = useRenderLoop()
+
+onBeforeLoop(({ delta, elapsed }) => {
+  // Me ejecutaré antes que el renderer actualize la escena
+  fps.begin()
+})
+
+onAfterLoop(({ delta, elapsed }) => {
+  // Me ejecutaré después que el renderer actualize la escena
+  fps.end()
+})
+```
+
+### Pausar y continuar
+
+Puedes pausar y continuar el render loop usando los metodos expuestos de `pause` y `resume`.
+
+```ts
+const { pause, resume } = useRenderLoop()
+
+// Pausar el render loop
+pause()
+
+// Continuar el render loop
+resume()
+```
+
+También puedes conseguir el estado activo del render loop usando la propiedad `isActive`.
+
+```ts
+const { resume, isActive } = useRenderLoop()
+
+console.log(isActive) // false
+
+resume()
+
+console.log(isActive) // true
+```
+
+## useLoader
+
+El composable `useLoader` te permite cargar recursos usando el [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Se desvuelve una promesa con el recurso cargado.
+
+```ts
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+```
+
+Desde el composable `useLoader` se desvuelve una promesa, puedes usarlo con un `async/await` o `then/catch`. Si estás usándolo en un componente, te aseguras de que es 'wrapped' con un componente `Suspense`. Ve [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) para más información.
+
+```vue
+<template>
+  <Suspense>
+    <TheComponentUsingLoader />
+  </Suspense>
+</template>
+```
+
+## useTexture
+
+El composable `useTexture` te permite cargar texturas usando el [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). Se desvuelve una promesa con uno o más texturas cargadas.
+
+```ts
+const texture = await useTexture(['path/to/texture.png'])
+```
+
+También **useTexture** se acepta un objeto con las propiedades siguientes:
+
+- `map`:Una textura básica que se aplica al superficie de un objeto.
+- `displacementMap`: Una textura que se usa para añadir protuberancias o abolladuras al superficie del objeto.
+- `normalMap`: Una textura que se usa para añadir detalles superficiales y variaciones de tonalidad al objeto.
+- `roughnessMap`: Una textura que se usa para añadir rugosidad o una terminación mate al superficie del objeto.
+- `metalnessMap`: Una textura que se usa para añadir un efecto metálico al superficie del objeto.
+- `aoMap`: Una textura que se usa para añadir oclusión ambiental (tonalidad en zonas donde la luz se bloquea por otros objetos) al objeto.
+- `alphaMap`: Una textura que se usa para agregar transparencia (Lo negro renderiza como transparente, o translucido) es necesario configurar :trasparent="true" en el material para que esta textura funciona
+- `matcap`: Esta textura codifica el color y la sombra del material
+
+En este caso, se desvuelve un objeto con las texturas cargadas.
+
+```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',
+})
+```
+
+Puedes hacer la conexión de las texturas al material, así.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial
+        :map="map"
+        :displacementMap="displacementMap"
+        :normalMap="normalMap"
+        :roughnessMap="roughnessMap"
+        :metalnessMap="metalnessMap"
+        :aoMap="aoMap"
+        :alphaMap="alphaMap"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Similar al composable anterior, el composable `useTexture` desvuelve una promesa puedes usarlo con `async/await` o `then/catch`. Si estás usándolo con un componente, te aseguras de que es 'wrapped' con un componente `Suspense`.
+
+## useSeek
+
+El composable `useSeek` provee de utilidades para navegar y buscar entre escenas complejas de Threejs. Exporta dos funciones `seek` y `seekByName` que permite encontrar a un objeto hijo, basado en los parámetros proporcionados
+
+```ts
+const { seek, seekbyName } = useSeek()
+```
+
+la funcion seek acepta tres parámetros:
+
+- `parent`: Una escena de Threejs o un objeto3D
+- `property`: Una propiedad para ser usada como condición de búsqueda.
+- `value`: El valor a buscar.
+
+Ambas funciones recorren el objeto y regresan el objeto con las criterios seleccionados. De lo contrario retornará un valor null y logs en warning en la consola
+
+```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'))
+  }
+})
+```
+
+## useTres
+
+Este composable intenta proveer acceso al modelo estado que se contiene el renderer por defacto, la cámara, la escena, y otras propiedades útiles.
+
+```ts
+const { state } = useTres()
+
+console.log(state.camera) // THREE.PerspectiveCamera
+console.log(state.renderer) // THREE.WebGLRenderer
+```
+
+::: warning
+Este composable solo puede ser usado dentro el contexto de `TresCanvas` (dentro de sub-componentes) debido a que el TresCanvas actúa como provider
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTres } from '@tresjs/core'
+
+const { state } = useTres()
+</script>
+```

docs/es/api/events.md

@@ -0,0 +1,25 @@
+# Events
+
+Los componentes de **TresJS** emiten eventos when cuando el pointer interactúa con ellos. Esto se aplica para componentes que deriven de [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (como meshes, grupos,...).
+
+<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)"
+/>
+```
+
+| Eventos       | Se ejecutan cuando ...                                                                         | Controlador de evento(s)                                                                                                                                                                              |
+| ------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... Los eventos de pointerdown y pointerup se ejecutan en el mismo objeto uno despues del otro | [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-move  | ... El puntero se mueve sobre el objeto                                                        | [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-enter | ... El puntero entra al objeto                                                                 | [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 | ... El puntero sale al objeto                                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
+
+La [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) Incluye el [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) que inicia el evento. Puedes acceder a el a traves de `intersection.object`.

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

@@ -0,0 +1,143 @@
+# Instancias
+
+El idea principal de **Tres** es un \_catálogo auto-generado_de todos los elementos de ThreeJS. Este catálogo se genera del código fuente de ThreeJS, entonces siempre está actualizado.
+
+Cuando usas ThreeJS, necesitas importar los elementos que quieres usar. Por ejemplo, si quieres usar un `PerspectiveCamera`, necesitas importarlo de paquete `three`:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+Con **Tres** no necesitas importar nada, eso es porque **Tres**genera automáticamente un **Componente de Vue en base del Three Objeto quieres usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar un `PerspectiveCamera` usarías el componente `<TresPerspectiveCamera />` .
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Se significa que puedes usar la misma [documentación](https://threejs.org/docs/) que usaría como cuando usas ThreeJS puro, pero con el poder de Vue.
+
+## Declarar objetos
+
+Si continuamos con este argumento, podrías usar una instancia así: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Pero con **Tres** no es necesario, puedes definer propiedades de forma declarativa así: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Arguments
+
+Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los argumentos siguientes:
+
+- `fov` - Cámara tronco vertical campo de visión.
+- `aspect` - Cámara tronco relación de aspecto.
+- `near` - Cámara tronco plano cerco.
+- `far` - Cámara tronco far plano extremo.
+
+Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar el `args` prop:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Es el mismo de haciendo esto:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+## Props
+
+También puedes pasar props al componente, por ejemplo, el `TresAmbientLight` tiene una propiedad `intensity`, entonces puedes pasarla al componente así:
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Set
+
+Todas las propiedades cuales objeto subyacente tiene un método `.set()` tienen un atajo para recibir el valor como un matriz. Por ejemplo, el `TresPerspectiveCamera` tiene una propiedad `position`, lo cual es un objeto `Vector3`, entonces puedes pasarla al componente así:
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+Para especificar transformaciones de las propiedades como la posición, la rotación y escalar, un atajo esta disponible, que te permite modificar directamente el eje que deseas, un atajo similar también sucede con los colores
+
+```html
+<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
+  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
+</TresMesh>
+```
+
+::: warning
+Cuando usas la propiedad rotation en threejs [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), usará por defecto el orden 'XYZ'.
+Es importante saber que cuando configuras la rotación con los atajos, el orden importa, para mas información acerca de este tema, por favor leer [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" />
+
+<!-- Nota que el orden de la rotación importa, y cambiar el orden puede resultar en resultados diferentes. -->
+```
+
+### Scalar
+
+Otro atajo puedes usar es pasar un valor escalar a una propiedad que espera un objeto `Vector3`, usando el mismo valor por el resto del vector:
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Colors
+
+Puedes pasar colores a los componentes usando el `color` prop, que acepta un string con el nombre del color o un valor hex:
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Methods
+
+En realidad, algunas propiedades subyacente son métodos, el `TresPerspectiveCamera` tiene un `lookAt` método heredado de [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), entonces le puedes pasar los coordinados al componente así:
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/es/api/renderer.md

@@ -0,0 +1,90 @@
+# Renderer
+
+El componente `Renderer` es el componente principal de Tres. Es eso que crea ThreeJS `WebGLRenderer` y defina tu escena de Tres.
+
+```vue{2,5}
+<template>
+  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+    <TresPerspectiveCamera />
+      <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Canvas size
+
+El componente `Renderer` usará el tamaño del componente su padre. Si deseas usar el total del tamaño disponible del viewport, puedes usar la propiedad `window-size`
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Tu escena va aquí -->
+  </TresCanvas>
+</template>
+```
+
+O puedes usar CSS para configurar el tamaño de tu app
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+## Presets
+
+Tresjs viene con algunas configuraciones listas para ti, y que puedes usar en el renderer. Puedes usarlas configurando el prop `preset`
+
+### Realistic
+
+El `realistic` preset configura tu renderer para escenas mas realistas en 3D.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Es equivalente a:
+
+```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                        | Descripción                                                                                                                                                     | Defacto            |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| **shadows**                 | Habilitar sombres en el Renderer                                                                                                                                | `false`            |
+| **shadowMapType**           | Poner el tipo del mapa de sombre                                                                                                                                | `PCFSoftShadowMap` |
+| **physicallyCorrectLights** | Si usará el modo de luz que es físicamente correcto. Ve [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).                       | `false`            |
+| **outputEncoding**          | Definer el output encoding                                                                                                                                      | `LinearEncoding`   |
+| **toneMapping**             | Definer la exposición de mapping tone usado por renderer.                                                                                                       | `NoToneMapping`    |
+| **context**                 | Se puede usar eso para pegar el renderer al [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) que ya existe.           |                    |
+| **powerPreference**         | Provee una pista al agente usuario que indica que configuración de GPU es apto para este contexto WebGL. Puede ser "high-performance", "low-power" o "default". | `default`          |
+| **preserveDrawingBuffer**   | Si preserva los buffers hasta que se despeja manualmente o son sobrescribió.                                                                                    | `false`            |
+| **clearColor**              | El color que el renderer usará para despejar el canvas.                                                                                                         | `#000000`          |
+| **windowSize**              | Si usa el tamaño de la ventana como el tamaño del canvas o el elemento padre.                                                                                   | `false`            |
+| **disableRender**           | Deshabilitar el render con requestAnimationFrame API, util para PostProcessing                                                                                  | `false`            |
+| **camera**                  | Una camara configurable de forma manual para el renderer.                                                                                                       |                    |
+
+## Propiedades por defecto
+
+Tres intenta ser el menos tendencioso que es posible. Eso es porque no se pega casi nada valor de defacto para el componente `Renderer`. Necesitas pegar los props que quieres usar. La sola excepción es el `antialias` prop. Se pega a `true` por defacto.

docs/es/examples/basic-animations.md

@@ -0,0 +1,81 @@
+# Animaciones Básicas
+
+Esta guía te ayudará a empezar con animación básica en TresJS.
+
+Vamos a construir una escena sencilla con un cubo simple. Pués animarmos el cubo para girar de ejes Y y Z.
+
+<StackBlitzEmbed projectId="tresjs-basic-animations" />
+
+## useRenderLoop
+
+El `useRenderLoop` composable es el core de TresJS animaciones. Te permites registrar un callback que se llamará cada vez el renderer actualiza la escena con el ritmo de actualizar del navegador.
+
+Para ver una explanación en detalle de como funciona, por favor consulta al [useRenderLoop](/api/composables#userenderloop) documentación.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+resume()
+onLoop(({ _delta, elapsed }) => {
+  // Operará a cada frame ~ 60FPS (depende de tu pantalla)
+})
+```
+
+## Traer la referencia al cubo
+
+Para animar el cubo, necesitamos traer una referencia. Podemos hacer eso al pasar un [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) usando `ref` prop al `TresMesh` componente. Eso volverá el THREE instance.
+
+Para mejorar el rendimiento, usaremos un [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) to store la referencia en lugar de un Ref regular. Ve porque [aquí](../advanced/caveats.md#reactivity)
+
+```vue
+<script setup lang="ts">
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+</script>
+
+<template>
+  <TresMesh ref="boxRef" :scale="1" cast-shadow>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial v-bind="pbrTexture" />
+  </TresMesh>
+</template>
+```
+
+## Animar el cubo
+
+Ahora que tenemos una referecia al cubo, podemos animarlo. Usaremos el `onLoop` callback para actualizar la rotación del cubo.
+
+```ts
+onLoop(({ _delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+```
+
+También puedes usar el `delta` de la internal [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) o el `elapsed` para animar el cubo.
+
+## ¿Pero porque no usar la reactividad de vue?
+
+la respuesta es simple, rendimiento
+
+```vue
+// This is a bad idea ❌
+<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>
+```
+
+Podríamos sentirnos tentados a usar la reactividad de vue para animar el cubo. Pero eso sería una mala idea, esta es la razón [Vue's reactivity is based on Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue). Los proxies no estan diseñados para ser usados en el renderloop que se actualiza cada 60 frames por segundo o mas
+
+Adjuntamos los benchmark sobre este caso [benchmark of a proxy vs a regular object](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Como puedes ver los proxies son 5 veces mas lentos que objetos normales
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+Puedes leer a detalle aquí [Caveats](../advanced/caveats.md#reactivity).

docs/es/examples/groups.md

@@ -0,0 +1,34 @@
+# Group
+
+Un `<TresGroup>` es una instancia de la clase [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) que es casi igual a un [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) pero te permite **juntar objectos múltiples en la escena** para que pueden ser manipulados como una unidad singular (transformación, rotación, etc).
+
+<StackBlitzEmbed projectId="tresjs-groups" />
+
+## Ejemplo
+
+```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/es/examples/load-models.md

@@ -0,0 +1,137 @@
+# Importar y usar modelos
+
+> Todos los modelos usado en esta guía son de [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c)
+
+Los modelos 3D son disponible en cientos de formatos de archivo, cada uno con propósitos diferentes, características distintos, y complexidad variable.
+
+En esta guía, vamos a enfocarnos en cargando glTF (GL Transmission Format) modelos, que son el formato más común de modelos 3D en el web.
+
+<StackBlitzEmbed projectId="tresjs-gltf-load-model" />
+
+Hay algunas maneras para cargar modelos en TresJS:
+
+## usando `useLoader`
+
+Para cargar el recurso, el `useLoader` composable te permite pasar cualquier tipo de Three.js cargador y un URL. Devuelve un `Promise` con el recurso cargado.
+
+Por una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
+```
+
+Entonces, puedes pasar la escena de modelo a un componente `primitive`:
+
+```html{3}
+<TresCanvas>
+  <Suspense>
+    <primitive :object="scene" />
+  </Suspense>
+</TresCanvas>
+```
+
+> 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.
+
+Nota que en el ejemplo arriba que usamos el componente `Suspense` para 'wrap' el componente `TresCanvas`. Eso es por `useLoader` devuelve un `Promise` y necesitamos esperarlo resolver antes de renderizar la escena.
+
+## Usando `useGLTF`
+
+Una manera más conveniente de cargar modelos es usando el `useGLTF` composable disponible de [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) paquete.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
+```
+
+Una ventaja de usar `useGLTF`es que puedes pasar un `draco` prop para habilitar [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) por el modelo. Eso reducirá el tamaño del modelo y mejorar el rendimiento.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+Alternativamente puedes facilmente seleccionas los objetos dentro de tu modelo usando la propiedad `nodes`
+
+```vue
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <primitive :object="nodes.MyModel" />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Usando `GLTFModel`
+
+El componente `GLTFModel` es un 'wrapper' alrededor de `useGLTF` que es disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+
+```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>
+```
+
+Esta estrategia en particular es más directo pero te da menos control sobre el modelo.
+
+## useFBX
+
+El composable `useFBX` es disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+const model = await useFBX('/models/AkuAku.fbx')
+```
+
+Entonces, es tan directo como añadir el modelo a tu escena:
+
+```html{3}
+<TresCanvas shadows alpha>
+  <Suspense>
+    <primitive :object="model.scene" />
+  </Suspense>
+</TresCanvas>
+```
+
+## FBXModel
+
+El componente `FBXModel` es un 'wrapper' alrededor de `useFBX` que es disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Tiene uso similar al `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/es/examples/load-textures.md

@@ -0,0 +1,78 @@
+# Importar y usar Textures
+
+> Todas las texturas usada en este ejemplo son de [ambientcg](https://ambientcg.com/).
+
+Texturas tridimensionales (3D) son imágenes que contener capas múltiples de datos, permitiéndoles a representar volumen o simular estructuras tridimensionales. Estas texturas se usan frecuentemente en gráficas 3D y efectos para mejorar el realismo y complexidad de escenas y objetos.
+
+<StackBlitzEmbed projectId="tresjs-load-textures" />
+
+Hay dos maneras de cargar texturas 3D en TresJS:
+
+## Usando `useLoader`
+
+Para cargar el recurso, el `useLoader` composable te permite pasar cualquier tipo de Three.js cargador y un URL. Devuelve un `Promise` con el recurso cargado.
+
+Por una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three/examples/jsm/loaders/TextureLoader'
+
+const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+```
+
+Entonces, puedes pasar la textura al material:
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresScene>
+      <TresMesh>
+        <TresSphereGeometry :args="[1,32,32]" />
+        <TresMeshStandardMaterial :map="texture" />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</Suspense>
+```
+
+Nota que en el ejemplo arriba que usamos el componente `Suspense` para 'wrap' el componente `TresCanvas`. Eso es por `useLoader` devuelve un `Promise` y necesitamos esperarlo resolver antes de renderizar la escena.
+
+## Usando `useTexture`
+
+Una manera más conveniente de cargar texturas es usar el composable `useTexture`. Se acepta un matrix de URLs o un objeto singular con las rutas de textura mapeados.
+
+Para aprender más de `useTexture`, ve la documentación de [useTexture](/api/composables#use-texture).
+
+```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',
+  ambientOcclusion: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
+})
+```
+
+De la manera del ejemplo anterior, podemos pasar todas las texturas a un material via props:
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresScene>
+      <TresMesh>
+        <TresSphereGeometry :args="[1,32,32]" />
+        <TresMeshStandardMaterial
+          :map="pbrTexture.map"
+          :displacementMap="pbrTexture.displacementMap"
+          :roughnessMap="pbrTexture.roughnessMap"
+          :normalMap="pbrTexture.normalMap"
+          :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
+        />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</Suspense>
+```

docs/es/examples/orbit-controls.md

@@ -0,0 +1,87 @@
+# OrbitControls
+
+<StackBlitzEmbed projectId="tresjs-orbit-controls" />
+
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) es una camera controller que te permite orbitar alrededor de una target. Es una forma buena para explorar tu escena.
+
+Sin embargo, no es parte del core de ThreeJS. Entonces, para usarlo, necesitarías importarlo del modulo `three/examples/jsm/controls/OrbitControls`.
+
+Eso crea una problema porque **TresJS** automáticamente crea un catálogo del core de Three para que puedes usarlos como componentes.
+
+Afortunadamente, **TresJS** provee una forma a extender el catálogo de componentes. Puedes hacerlo por usar el `extend` método usando el [useCatalogue](/api/composables#usecatalog) composable.
+
+Para más información sobre como extender tu catálogo TresJS catalog, hacer referencía a la sección [extending](/advanced/extending.md).
+
+## Usando OrbitControls
+
+Para usar `OrbitControls` necesitas importarlo del modulo `three/examples/jsm/controls/OrbitControls`.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+Entonces, necesitas extender el catálogo de componentes usando el método `extend` del [useCatalogue](/api/composables#usecatalog) composable.
+
+```js
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+```
+
+Ahora, puedes usar el componente `TresOrbitControls` en tu escena.
+
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+  </TresCanvas>
+</template>
+```
+
+Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y el renderer, necesitas pasarlas como argumentos.
+
+puedes usar el [useThree](/api/composables#usethree) composable para conseguir la cámara y el renderer.
+
+```ts
+import { useThree } from '@tresjs/core'
+
+const { state } = useTres()
+```
+
+Entonces, el código final estaría algo así:
+
+```vue
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+
+const { state } = useThree()
+</script>
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+  </TresCanvas>
+</template>
+```
+
+## OrbitControls usando `cientos`
+
+Aquí es donde el parte elevado empiece. ✨  
+El `cientos` package provee un componente se llama `<OrbitControls />` lo que es un wrapper del `OrbitControls` del modulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+
+¿El parte más agradable? No necesitas extender el catálogo o pasar ningun argumento.  
+Ya funciona. 💯
+
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/es/examples/text-3d.md

@@ -0,0 +1,179 @@
+# Text3D
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) es uno de los maneras que podemos añadir texto en 3D en nuestras escenas.
+
+<StackBlitzEmbed projectId="tresjs-text3d-cientos" />
+
+Sin embargo, no es parte del core de ThreeJS. Entonces, para usarlo, necesitarías importarlo del modulo `three/examples/jsm/controls/TextGeometry`.
+
+Eso crea un problema porque automáticamente **TresJS** crea un catálogo del core de Three para que puedes usarlos como componentes.
+
+Afortunadamente, **TresJS** provee una manera para extender el catálogo del componentes. Puedes hacerlo usando el método `extend` usando el composable [useCatalogue](/api/composables#usecatalog).
+
+Para más información sobre come extender tu catálogo TresJS, hacer referencia a la sección [extending](/advanced/extending.md).
+
+## Usando TextGeometry
+
+Para usar `TextGeometry` necesitas importarlo del modulo `three/examples/jsm/geometries/TextGeometry`.
+
+```js
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+```
+
+Después, necesitas extender el catálogo de componentes usando el método `extend` del composable [useCatalogue](/api/composables#usecatalog).
+
+```js
+import { useCatalogue } from '@tresjs/core'
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+
+const { extend } = useCatalogue()
+
+extend({ TextGeometry: TextGeometry })
+```
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) tiene solo un argumento necesario: el font. Puedes ver un ejemplo debajo.
+
+```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))
+  }
+})
+```
+
+Ahora, puedes usar el componente `TresTextGeometry` dentro de un TresMesh en tu escena.
+
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresScene>
+      <TresMesh>
+        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</template>
+```
+
+Como en el ejemplo, puedes pasar un objeto con las configuraciones deseadas.
+
+```ts
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+```
+
+También podemos pasar un matcapTexture para añadir los detalles finales, usando el TresMeshNormalMaterial dentro del TresMesh
+
+```ts
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+
+  <TresMesh>
+    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    <TresMeshNormalMaterial :matcap="matcapTexture" />
+  </TresMesh>
+```
+
+Entonces, el código final estaría algo como eso:
+
+```vue
+<script setup lang="ts">
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
+import { useCatalogue, useTexture } from '/@/core'
+const { extend } = useCatalogue()
+
+extend({ TextGeometry: 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>
+```
+
+Yo sé que parece mucho trabajo, pero hay buena noticia, hay una manera mucho más simple.
+
+## TextGeometry from `cientos`
+
+El paquete `cientos` provee un componente se llama `<Text3D />` que es un wrapper del `TextGeometry` del modulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+
+El parte más amable? No necesitas extender el catálogo. Solo pasa el argumento del font. Ya funciona. 💯 (Si no hay texto provisto, el texto será 'TresJS')
+
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresScene>
+      <Text3D :font="fontPath" />
+    </TresScene>
+  </TresCanvas>
+</template>
+```
+
+Podemos pasar las opciones como props
+
+```html
+<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
+```
+
+En el caso que las opciones no son provisto, los valores por defecto son:
+
+```js
+size: 0.5,
+height: 0.2,
+curveSegments: 5,
+bevelEnabled: true,
+bevelThickness: 0.05,
+bevelSize: 0.02,
+bevelOffset: 0,
+bevelSegments: 4,
+```
+
+Por defecto, texto en ThreeJS empece al mesh posición inicial, entonces es [0,0,0]. El texto empece allá, pero podemos centrarlo por simple pasar la bandera "center"
+
+```js
+<Text3D :font="fontPath" :text="my 3d text" center  />
+```

docs/es/guide/getting-started.md

@@ -0,0 +1,92 @@
+# Installation
+
+Learn how to install TresJS
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/core
+```
+
+```bash [npm]
+npm install three @tresjs/core
+```
+
+```bash [yarn]
+yarn add three @tresjs/core
+```
+
+:::
+
+> Better use with Vue 3.x and composition API
+
+## Typescript
+
+TresJS is written in Typescript and it's fully typed. If you are using Typescript, you will get the full benefit of the typings. Just make sure you install the types for three.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Getting started
+
+You can install TresJS as any other Vue plugin
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import Tres from '@tresjs/core'
+
+export const app = createApp(App)
+
+app.use(Tres)
+app.mount('#app')
+```
+
+Or you can use it directly in your component
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas>
+    <!-- Your scene here -->
+  </TresCanvas>
+</template>
+```
+
+::: tip
+This is recommended for performance and bundle size reasons, tree-shaking will work better and you will only import the components that you use.
+:::
+
+## Vite
+
+Since v2 is a custom renderer, we need to let the `vue-compiler` of your app know that the components of Tres are ok to be included to avoid the `[Vue warn]: Failed to resolve component` warning.
+
+You just need to add this to your `vite.config.ts` inside of the vue plugin:
+
+```ts
+export default defineConfig({
+  plugins: [vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  }),
+})
+```

docs/es/guide/index.md

@@ -0,0 +1,108 @@
+# Introduction
+
+<ClientOnly>
+    <FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+</ClientOnly>
+
+This is the documentation for the `v2.0.0` of TresJS. If you are looking for the documentation for the version 1, check [V1 TresJS](https://v1.tresjs.org/).
+
+::: code-group
+
+```bash [npm]
+npm install three @tresjs/core
+```
+
+```bash [yarn]
+yarn add three @tresjs/core
+```
+
+```bash [pnpm]
+pnpm add three @tresjs/core
+```
+
+:::
+
+## Typescript
+
+TresJS is written in Typescript and it's fully typed. If you are using Typescript, you will get the full benefit of the typings. Just make sure you install the types for three.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+:::
+
+## Vite
+
+If you are using Vite, you have add the following to your `vite.config.ts`:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+}),
+```
+
+This is required to make the template compiler work with the custom renderer and not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
+
+## Try it online
+
+We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS online. Check it out:
+
+![](/stackblitz-starter.png)
+
+<StackBlitzEmbed projectId="tresjs-basic" />
+
+## Playground
+
+We also have a playground where you can try TresJS online. Check it out [here](https://playground.tresjs.org/).
+
+![](/public/playground.png)
+
+## Motivation
+
+[ThreeJS](https://threejs.org/) is a wonderful library to create awesome **WebGL** 3D websites. Is also a constantly updated library that makes hard for wrapper maintainers like [TroisJS](https://troisjs.github.io/) to keep up with all the enhancements.
+
+React ecosystem has an impresive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state.
+
+In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) which works with the same concept that R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F.
+
+The only problem is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information.
+
+```ts
+// Example Vite setup
+import { createApp } from 'vue'
+import { createApp as createLunchboxApp } from 'lunchboxjs'
+import App from './App.vue'
+import LunchboxApp from './LunchboxApp.vue'
+
+// html app
+const app = createApp(App)
+app.mount('#app')
+
+// lunchbox app
+const lunchboxApp = createLunchboxApp(LunchboxApp)
+// assuming there's an element with ID `lunchbox` in your HTML app
+lunchboxApp.mount('#lunchbox')
+```
+
+So I was inspired by both libraries to create ~~something that wouldn't require creating a **custom renderer** but intelligent enough to generate Vue components based on the ThreeJS constructors with 0-to-none manteinance required `three:latest`. That's **TresjS v1**~~.
+
+Although v1 was a decent solution 😄, it has some limitations that would only be solved by creating a proper **custom renderer**. After several POCs, I decided to create a new version of TresJS that would be based on a Vue custom renderer but saving the user to do any weird stuff. That's **TresJS v2**.
+
+To learn more how to migrate from v1, check the [migration guide](/guide/migration-guide.html).

docs/es/guide/migration-guide.md

@@ -0,0 +1,188 @@
+# Migration Guide
+
+This guide is intended to help you migrate from v1 to brand new shiny v2 🤩✨ of TresJS.
+
+::: code-group
+
+```bash [pnpm]
+pnpm update @tresjs/core
+```
+
+```bash [npm]
+npm update @tresjs/core
+```
+
+```bash [yarn]
+yarn upgrade @tresjs/core
+```
+
+:::
+
+## What's new?
+
+### Vue Custom Renderer
+
+**TresJS** is now a [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 that lives inside of a wrapper component `TresCanvas` that is responsible for creating the `WebGLRenderer` and the `Scene` for you and creating a **new Vue App instance** to render the scene.
+
+### Typescript support and Intellisense 🦾
+
+![TresJS v2 Intellisense](/v2-intellisense.gif)
+
+This was probably the most **requested feature for TresJS**. Now Tres components work with Volar and provide type intellisense.
+
+**TresJS** now generates type declaration on build time for all the components based of the catalog from ThreeJS. This means that you can use all the components from ThreeJS and get type intellisense for them.
+
+### Tres Plugin is optional 👍
+
+The `TresPlugin` is now optional. You can use TresJS without it by importing the components directly from `tresjs/core`:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+::: info
+This is recommended for performance and bundle size reasons, tree-shaking will work better and you will only import the components that you use.
+:::
+
+### TresScene no longer needed
+
+The `<TresScene />` component is now deprecated since the scene is now created by the `<TresCanvas />`.
+
+In the beginning, I thought that it would be a good idea to have a separate component for the scene in terms of verbosity and keep it as similar to plain ThreeJS, but it turned out that it was not really useful.
+
+You can now create a scene like this:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+To migrate your code, you can just remove the `<TresScene />` component and move the children to the `<TresCanvas />` component.
+
+### `useCatalog` is now deprecated
+
+The `useCatalog` function is now deprecated. You can now import the catalog directly from `@tresjs/core`
+
+You can read more about it here: [Extending](/advanced/extending.md)
+
+Change this:
+
+```ts {2,5,7}
+// Wrong ❌
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+To this:
+
+```ts {2,6}
+// Correct ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Add the element to the catalogue
+extend({ TextGeometry })
+```
+
+### Model's ref value `getModel` is now deprecated
+
+The `getModel` function is now deprecated. You can now use the `model` property directly.
+
+Change this:
+
+```vue {7,9-12}
+// Wrong ❌
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, ({ getModel }) => {
+  const model = getModel()
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+To this:
+
+```vue {7,9-12}
+// Correct ✅
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, model => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+### Cameras need to be before any control 🎥
+
+The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work.
+
+Change this:
+
+```vue {3,5}
+// Wrong ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+To this:
+
+```vue {3,5}
+// Correct ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```

docs/es/guide/nuxt.md

@@ -0,0 +1,58 @@
+# Nuxt module `@tresjs/nuxt`
+
+![TresJS Nuxt Module](/nuxt-stones.png)
+
+<a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
+
+A official Nuxt module for TresJS is here 🎉. 
+
+Repository is [here](https://github.com/Tresjs/nuxt)
+
+## Installation
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/nuxt 
+```
+
+```bash [npm]
+npm install three @tresjs/nuxt 
+```
+
+```bash [yarn]
+yarn add three @tresjs/nuxt 
+```
+
+:::
+
+## Features
+
+- 🤓 Auto-import components and composables from the [TresJS ecosystem](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` client only, you don't need to add `.client` to the component name or `<ClientOnly />`
+- Automatically configures vue compiler to support TresJS components, see [why](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- All the DX Magic that comes with Nuxt ✨
+
+## Usage
+
+ Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: ["@tresjs/nuxt"],
+});
+```
+
+That's it! You can now use `@tresjs/nuxt` in your Nuxt app ✨
+
+If you want to use the any package from the TresJS ecosystem, you can install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.
+
+| Package                     | Version                                                                                            |
+| --------------------------- | :------------------------------------------------------------------------------------------------- |
+| [Cientos](https://github.com/Tresjs/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) |
+| [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) |
+
+```bash
+# Using pnpm
+pnpm add @tresjs/cientos @tresjs/post-processing
+```

docs/es/guide/troubleshooting.md

@@ -0,0 +1,91 @@
+# The hilarious guide of common issues and how to solve them
+
+![Troubleshooting](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+
+Welcome to **TresJS v2 troubleshooting guide**. Where 3D stands for _"Dazzlingly Delightful Difficulties"_! We know 3D can be as complex as a tangled ball of yarn 🧶 or as unpredictable as a cat on a keyboard 🐈 ⌨️ , but fear not!
+
+This guide is intended to help you solve the most common issues that you might encounter when using TresJS v2.
+
+## I can't see my 3D scene 😭!
+
+You followed the [Getting started guide](/guide/getting-started.md) but you still can see your scene renderered.
+
+These are the most common reasons why you might not be able to see your scene:
+
+### Check the height of your canvas 📏
+
+Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either.
+
+![No height found](/canvas-height.png)
+
+You will also see this error in the console:
+
+![Canvas height warning](/canvas-height-warning.png)
+
+A easy way to fix this is to set the height of the parent element to `100%`:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+Or you can set the `window-size` prop of the `TresCanvas` component:
+
+```vue
+<TresCanvas window-size>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+## Failed resolve component: TresComponent... 🤔
+
+![](/failed-to-resolve-component.png)
+
+Since **TresJS v2** is using a Vue Custom Renderer inside of the main Vue App instance, the core Vue renderer that acts as parent is not going to recognize the components inside of `TresCanvas` component. Even if it doesn't affect the rendering, it will show a warning in the console.
+
+![](/failed-to-resolve-component.png)
+
+At this moment, there is no native Vue support to define the renderer used on the `<template />` but there is a quick workaround to remove the warnings
+
+Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+This will remove the warning from the console.
+
+# Help Us Make TresJS Purr-fect! 😼
+
+We know that even the best cat nappers occasionally make mistakes, and we need you help to make TresJS even better! If you find a bug, please open a ticket at [the
+repo](https://github.com/Tresjs/playground) and **please provide a reproduction link**.
+
+::: warning
+Tickets without a reproduction link will be closed.
+:::
+
+Our team of coding cat lovers
+will jump into action to squash those pesky bugs and improve TresJS for everyone. Together, let's make TresJS the cat's
+meow of 3D rendering in Vue!

docs/es/guide/your-first-scene.md

@@ -0,0 +1,159 @@
+# Your first scene
+
+This guide will help you to create your first Tres scene. 🍩
+
+<ClientOnly>
+    <DonutExample style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+</ClientOnly>
+
+## Setting up the experience Canvas
+
+Before we can create a Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` HTML element to mount the `WebglRenderer` and initialize the `scene`
+
+With **TresJS** you only need to import the default component `<TresCanvas />` and add it to the template of your Vue component.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+::: warning
+It's important that all components related to the scene live between the `<TresCanvas />` component. Otherwise, they will be not rendered.
+:::
+
+The `TresCanvas` component is going to do some setup work behind the scene:
+
+- It creates a [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) that automatically updates every frame.
+- It sets the render loop to be called on every frame based on the browser refresh rate.
+
+## Canvas size
+
+By default, `TresCanvas` component will take the **parent's width and height**, if you are experiencing a blank page make sure the parent element has a proper size.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>
+```
+
+If your scene is not gonna be part of a UI, you can also force the canvas to take the width and height of the full window by using the `window-size` prop like this:
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+<template>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Creating a scene
+
+We need 4 core elements to create a 3D experience:
+
+- A [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) to hold the camera and the object(s) together.
+- A [**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer) to render the scene into the DOM.
+- A [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
+- An [**Object**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
+
+With **TresJS** you only need to add the `<TresCanvas />` component to the template of your Vue component and it will automatically create a `Renderer` (`canvas` DOM Element) and `Scene` for you.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q=perspectivecamera#api/en/cameras/PerspectiveCamera) using the `<TresPerspectiveCamera />` component.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+::: warning
+A common issue is that the camera default position is the origin of the scene (0,0,0), TresJS will automatically set the position of your camera to `[3,3,3]` if the prop `position`. If no camera is defined in you scene, a perspective camera is added automatically.`
+:::
+
+## Adding a 🍩
+
+That scene looks a little empty, let's add a basic object. If we were using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:
+
+```ts
+const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
+const material = new THREE.MeshBasicMaterial({ color: 'orange' })
+const donut = new THREE.Mesh(geometry, material)
+scene.add(donut)
+```
+
+A **Mesh** is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
+
+Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use `<TresMesh />` component, and between the default slots, we are going to pass a `<TresTorusGeometry />` and a `<TresMeshBasicMaterial />`.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::: info
+Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
+:::
+
+<StackBlitzEmbed projectId="tresjs-first-scene" />
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5" window-size>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+
+From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.