docs: finish details, second check

docs/.vitepress/config/es.ts

@@ -4,15 +4,15 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
     themeConfig: {
         sidebar: [
             {
-                text: 'Guide',
+                text: 'Guía',
                 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: '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: 'Troubleshooting', link: '/es/guide/troubleshooting' },
-                    { text: 'Migrate from v1', link: '/es/guide/migration-guide' },
+                    { text: 'Problemas comunes', link: '/es/guide/troubleshooting' },
+                    { text: 'Migración desde la v1', link: '/es/guide/migration-guide' },
                 ],
             },
             {
@@ -20,7 +20,7 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                 items: [
                     { text: 'Renderer', link: '/es/api/renderer' },
                     {
-                        text: 'Instances, arguments and props',
+                        text: 'Instancias, argumentos y propiedades',
                         link: '/es/api/instances-arguments-and-props',
                     },
                     {
@@ -28,35 +28,35 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                         link: '/es/api/composables',
                     },
                     {
-                        text: 'Events',
+                        text: 'Eventos',
                         link: '/es/api/events',
                     },
                 ],
             },
             {
-                text: 'Examples',
+                text: 'Ejemplos',
                 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: 'Animaciones básicas', link: '/es/examples/basic-animations' },
+                    { text: 'Grupos', link: '/es/examples/groups' },
+                    { text: 'Usando texturas', link: '/es/examples/load-textures' },
+                    { text: 'Usando modelos', link: '/es/examples/load-models' },
+                    { text: 'Usando textos', link: '/es/examples/text-3d' },
                 ],
             },
             {
-                text: 'Advanced',
+                text: 'Avanzado',
 
                 items: [
-                    { text: 'Extending', link: '/es/advanced/extending' },
+                    { text: 'Extendiendo', link: '/es/advanced/extending' },
                     {
-                        text: 'Caveats',
+                        text: 'Advertencias',
                         link: '/es/advanced/caveats',
                     },
                 ],
             },
             {
-                text: 'Ecosystem',
+                text: 'Ecosistema',
                 items: [
                     {
                         text: `Cientos 💛`,
@@ -66,21 +66,21 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             },
         ],
         nav: [
-            { text: 'Guide', link: '/guide/' },
+            { text: 'Guía', link: '/guide/' },
             { text: 'API', link: '/api/renderer' },
             /*       { text: 'API', link: '/api/' },
             { text: 'Config', link: '/config/' }, */
             {
-                text: 'Resources',
+                text: 'Recursos',
                 items: [
-                    { text: 'Team', link: '/team' },
+                    { text: 'Equipo', link: '/team' },
                     { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
                     {
                         text: 'Playground',
                         link: 'https://playground.tresjs.org/'
                     },
                     {
-                        text: 'Ecosystem',
+                        text: 'Ecosistema',
                         items: [
                             {
                                 text: `Cientos 💛`,

docs/es/advanced/caveats.md

@@ -1,19 +1,19 @@
-# Caveats 😱
+# Advertencias 😱
 
-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.
+Nuestro intención es proveer una forma simple de usar TresJs en VueJS con la mejor experiencia posible por el desarrollador. Sin embargo, necesitas ser consiente de algunos detalles.
 
-## ~~HMR and ThreeJS~~
+## ~~HMR and TresJs~~
 
 :::info
 
-This has been fixed in **TresJS** v1.7.0 🎉. You can now use HMR without reloading the page 🥹.
+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.
+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 el desarrollo va mucho más rápido.
+**TresJs** usa [Vite](https://vitejs.dev/). Sin embargo, hacer que funcione correctamente con TresJs 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.
+Por qué? por causa de como 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 complejidad esta 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)
 
@@ -47,15 +47,15 @@ Dicho eso, por eso estamos trabajando en una solución mejor 😁. Si tienes cua
 
 Puedes seguir la conversación en [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
 
-## Reactivity
+## Reactividad
 
-Todos nosotros amamos reactivad 💚. Es uno de las funcionas más poderoso de VueJS. Sin embargo, de lo necesitamos ser consciente cuando usamos ThreeJS.
+Todos nosotros amamos reactivad 💚. Es uno de las funcionas más poderosas de VueJS. Sin embargo, de lo necesitamos ser consciente cuando usamos TresJs.
 
-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.
+La base de la reactivad de Vue son los [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Permiten a VueJS monitorizar cambios en 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.
+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 es reactivo, Vue intentará actualizar el objeto ese número de veces. eso no es una buena idea 😅 y será dañino para el rendimiento.
 
-Aquí es un benchmark de la diferencia entre usar un objeto Proxy y un objeto simple.
+Aquí 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%">
@@ -66,7 +66,7 @@ Fuente: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/1250
 
 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)
+A diferencia de `ref()`, el valor interno de un shallow ref es guardado y preservado tal cual, y no será reactivo de manera profunda. Solo el .value será reactivo. Fuente [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
 
 ### Example
 

docs/es/advanced/extending.md

@@ -1,8 +1,8 @@
-# Extend 🔌
+# Extender 🔌
 
-TresJs se ofrece funcionalidad esencial, pero es fácil añadir elementos externos y extenderles en tu catálogo interno.
+TresJs ofrece una funcionalidad esencial, pero es fácil añadir elementos externos y extenderlos 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`
+Muchas de las experiencias 3D, por ejemplo, usan `OrbitControls` que no es una parte del paquete centrar en Threejs. Puedes añadirlo importando lo directamente desde `three/addons/controls/OrbitControls`
 
 ```js
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
@@ -25,7 +25,7 @@ extend({ TextGeometry, OrbitControls })
     <TresPerspectiveCamera :position="[5, 5, 5]" />
     <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
     <TresMesh>
-      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresTextGeometry :args="['TresJs', { font, ...fontOptions }]" center />
       <TresMeshMatcapMaterial :matcap="matcapTexture" />
     </TresMesh>
   </TresCanvas>

docs/es/api/composables.md

@@ -2,13 +2,13 @@
 
 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.).
+**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 internamente, 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.
+El core de **TresJs** usa estos composables internamente, entonces estarías usando el mismo API que usa el core. Por ejemplo, componentes que se necesitan actualizar con request animation frame API pueden usar 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**.
+El composable `useRenderLoop` es el core de los animaciones de **TresJs**. Te permite registrar un callback que se llamará por cada frame. Este es uno de los composable más importante de **TresJs**.
 
 ```ts
 const { onLoop, resume } = useRenderLoop()
@@ -19,7 +19,7 @@ onLoop(({ delta, elapsed, clock, dt }) => {
 ```
 
 ::: 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.
+Debes estar consciente de la implicación en el rendimiento para usar este 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):
@@ -27,7 +27,7 @@ El callback `onLoop` recibe un objeto con las propiedades siguientes en base del
 - `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.
+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 increíble contribución.
 
 ### Antes y después render
 
@@ -49,7 +49,7 @@ onAfterLoop(({ delta, elapsed }) => {
 
 ### Pausar y continuar
 
-Puedes pausar y continuar el render loop usando los métodos expuestos de `pause` y `resume`.
+Puedes pausar y continuar el render loop usando los métodos de `pause` y `resume`.
 
 ```ts
 const { pause, resume } = useRenderLoop()
@@ -83,7 +83,7 @@ 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.
+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 'envuelto' con un componente `Suspense`. Ve [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) para más información.
 
 ```vue
 <template>
@@ -101,7 +101,7 @@ El composable `useTexture` te permite cargar texturas usando el [THREE.js textur
 const texture = await useTexture(['path/to/texture.png'])
 ```
 
-También **useTexture** se acepta un objeto con las propiedades siguientes:
+También **useTexture** 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.
@@ -148,7 +148,7 @@ Puedes hacer la conexión de las texturas al material, así.
 </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`.
+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 'envuelto' con un componente `Suspense`.
 
 ## useSeek
 

docs/es/api/events.md

@@ -1,6 +1,6 @@
 # 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,...).
+Los componentes de **TresJs** emiten eventos cuando el puntero 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" />
 

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

@@ -1,8 +1,8 @@
 # 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.
+La idea principal de **TresJs** es la de un **catálogo auto-generado** de todos los elementos de TresJs. Este catálogo se genera del código fuente de TresJs, 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`:
+Cuando usas TresJs, necesitas importar los elementos que quieres usar. Por ejemplo, si quieres usar un `PerspectiveCamera`, necesitas importarlo de paquete `three`:
 
 ```js
 import { PerspectiveCamera } from 'three'
@@ -10,18 +10,18 @@ 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 />` .
+Con **TresJs** no necesitas importar nada, eso es porque **TresJs** genera automáticamente un **Componente de Vue en base del Three Objeto quieres usar en CamelCase con un prefijo TresJs**. Por ejemplo, si quieres usar un `PerspectiveCamera` usarías el componente `<TresPerspectiveCamera />` .
 
 ```vue
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aquí -->
   </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.
+Eso significa que puedes usar la misma [documentación](https://threejs.org/docs/) que usaría como cuando usas TresJs puro, pero con el poder de Vue.
 
 ## Declarar objetos
 
@@ -36,7 +36,7 @@ Si continuamos con este argumento, podrías usar una instancia así: ❌
 </template>
 ```
 
-Pero con **Tres** no es necesario, puedes definer propiedades de forma declarativa así: ✅
+Pero con **TresJs** no es necesario, puedes definer propiedades de forma declarativa así: ✅
 
 ```vue
 <template>
@@ -47,9 +47,9 @@ Pero con **Tres** no es necesario, puedes definer propiedades de forma declarati
 </template>
 ```
 
-## Arguments
+## Argumentos
 
-Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los argumentos siguientes:
+Algunos objetos de TresJs 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.
@@ -83,7 +83,7 @@ También puedes pasar props al componente, por ejemplo, el `TresAmbientLight` ti
 
 ### 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í:
+Todas las propiedades cuales objeto subyacente tiene un método `.set()` tienen un atajo para recibir el valor como una 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]" />
@@ -110,9 +110,9 @@ Es importante saber que cuando configuras la rotación con los atajos, el orden
 <!-- Nota que el orden de la rotación importa, y cambiar el orden puede resultar en resultados diferentes. -->
 ```
 
-### Scalar
+### Mas atajos
 
-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:
+Otro atajo puedes usar es pasar un valor a una propiedad que espera un objeto `Vector3`, usando el mismo valor por el resto del vector:
 
 ```html
 <TresPerspectiveCamera :position="5" /> ✅

docs/es/api/renderer.md

@@ -1,10 +1,10 @@
 # Renderer
 
-El componente `Renderer` es el componente principal de Tres. Es eso que crea ThreeJS `WebGLRenderer` y defina tu escena de Tres.
+El componente `Renderer` es el componente principal de TresJs. Es eso que crea TresJs `WebGLRenderer` y define tu escena de TresJs.
 
 ```vue{2,5}
 <template>
-  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+  <TresCanvas shadows>
     <TresPerspectiveCamera />
       <!-- Your scene goes here -->
   </TresCanvas>
@@ -70,21 +70,21 @@ 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 cámara configurable de forma manual para el renderer.                                                                                                       |                    |
+| Prop                        | Descripción                                                                                                                                                | Defacto            |
+| :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| **shadows**                 | Habilitar sombras en el Renderer                                                                                                                           | `false`            |
+| **shadowMapType**           | Poner el tipo del mapa de la sombra                                                                                                                        | `PCFSoftShadowMap` |
+| **physicallyCorrectLights** | Si usará el modo de luz que es físicamente correcto. Ver [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 navegador 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 sobre escritos.                                                                             | `false`            |
+| **clearColor**              | El color que el renderer usará para en el canvas.                                                                                                          | `#000000`          |
+| **windowSize**              | Si usa el tamaño del viewport como el tamaño del canvas o el elemento padre.                                                                               | `false`            |
+| **disableRender**           | Deshabilitar el render con requestAnimationFrame API, util para PostProcessing                                                                             | `false`            |
+| **camera**                  | Una cámara 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.
+TresJs 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

@@ -1,16 +1,16 @@
 # Animaciones Básicas
 
-Esta guía te ayudará a empezar con animación básica en TresJS.
+Esta guía te ayudará a empezar con las animación en TresJs.
 
-Vamos a construir una escena sencilla con un cubo simple. Puesto que animamos el cubo para girar de ejes Y y Z.
+Vamos a construir una escena sencilla con un simple cubo y animarlo en los 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.
+El `useRenderLoop` composable es el core de las animaciones en TresJs. Te permite registrar un callback que se llamará cada en cada frame.
 
-Para ver una explanación en detalle de como funciona, por favor consulta al [useRenderLoop](/api/composables#userenderloop) documentación.
+Para ver una explicación en detalle de como funciona, por favor consulta al [useRenderLoop](/api/composables#userenderloop).
 
 ```ts
 const { onLoop, resume } = useRenderLoop()
@@ -21,11 +21,11 @@ onLoop(({ _delta, elapsed }) => {
 })
 ```
 
-## Traer la referencia al cubo
+## Referenciando 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 animar el cubo, necesitamos usar 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á la instancia THREE.
 
-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)
+Para mejorar el rendimiento, usaremos un [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) para almacenar la referencia en lugar de un Ref regular. Mas información [aquí](../advanced/caveats.md#reactivity)
 
 ```vue
 <script setup lang="ts">
@@ -40,12 +40,12 @@ const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 </template>
 ```
 
-## Animar el cubo
+## Girar el cubo
 
 Ahora que tenemos una referencia al cubo, podemos animarlo. Usaremos el `onLoop` callback para actualizar la rotación del cubo.
 
 ```ts
-onLoop(({ _delta, elapsed }) => {
+onLoop(({ delta, elapsed }) => {
   if (boxRef.value) {
     boxRef.value.rotation.y += 0.01
     boxRef.value.rotation.z = elapsed * 0.2
@@ -53,14 +53,14 @@ onLoop(({ _delta, elapsed }) => {
 })
 ```
 
-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.
+Puedes usar el `delta` [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 ❌
+// Esto es una mala idea ❌
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 
@@ -73,7 +73,7 @@ onLoop(({ delta, elapsed }) => {
 </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 están diseñados para ser usados en el renderloop que se actualiza cada 60 frames por segundo o mas
+Podríamos sentirnos tentados a usar la reactividad de VueJs 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 están 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" />

docs/es/examples/groups.md

@@ -1,6 +1,6 @@
-# Group
+# Grupos
 
-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).
+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 **agrupar múltiples objectos en la escena** para que puedan ser manipulados como una unidad (transformación, rotación, etc).
 
 <StackBlitzEmbed projectId="tresjs-groups" />
 

docs/es/examples/load-models.md

@@ -2,19 +2,19 @@
 
 > 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.
+Los modelos 3D están disponible en cientos de formatos, cada uno con propósitos diferentes, características distintas, y complejidad 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.
+En esta guía, vamos a enfocarnos en 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:
+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.
+Para cargar el recurso, el `useLoader` composable te permite pasar cualquier tipo de `Loader` de Three.js y una URL. Devuelve una `Promise` con el recurso cargado.
 
-Por una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
+Para una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
 
 ```ts
 import { useLoader } from '@tresjs/core'
@@ -33,13 +33,13 @@ Entonces, puedes pasar la escena de modelo a un componente `primitive`:
 </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.
+> El componente `<primitive />` es parte del núcleo en Tresjs. Cuando usas `<primitive>`, es transformado usando una llamada `createElement` que crea una instancia de Threejs, basado en la propiedad proporcionada en "object"
 
-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.
+Nota que en el ejemplo anterior que usamos el componente `Suspense` para 'envolver' el componente `TresCanvas`. Eso es por que el `useLoader` devuelve una `Promise` y necesitamos esperarlo a que se resuelva 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.
+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).
 
 ```ts
 import { useGLTF } from '@tresjs/cientos'
@@ -98,7 +98,7 @@ Esta estrategia en particular es más directo pero te da menos control sobre el
 
 ## useFBX
 
-El composable `useFBX` es disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+El composable `useFBX` esta disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```ts
 import { useFBX } from '@tresjs/cientos'
@@ -106,7 +106,7 @@ import { useFBX } from '@tresjs/cientos'
 const model = await useFBX('/models/AkuAku.fbx')
 ```
 
-Entonces, es tan directo como añadir el modelo a tu escena:
+Entonces, es tan fácil como añadir el modelo a tu escena:
 
 ```html{3}
 <TresCanvas shadows alpha>
@@ -118,7 +118,7 @@ Entonces, es tan directo como añadir el modelo a tu escena:
 
 ## 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`:
+El componente `FBXModel` es un 'wrapper' alrededor de `useFBX` que esta disponible del paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Tiene un uso similar al `GLTFModel`:
 
 ```vue{2,9}
 <script setup lang="ts">

docs/es/examples/load-textures.md

@@ -2,17 +2,17 @@
 
 > 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.
+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 complejidad de escenas y objetos.
 
 <StackBlitzEmbed projectId="tresjs-load-textures" />
 
-Hay dos maneras de cargar texturas 3D en TresJS:
+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.
+Para cargar el recurso, el `useLoader` composable te permite pasar cualquier tipo de `Loader` de Three.js y una URL. Devuelve una `Promise` con el recurso cargado.
 
-Por una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
+Para una explanación detallada de como usar `useLoader`, ve la documentación de [useLoader](/api/composables#useloader).
 
 ```ts
 import { useLoader } from '@tresjs/core'
@@ -36,11 +36,11 @@ Entonces, puedes pasar la textura al material:
 </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.
+Nota que en el ejemplo anterior que usamos el componente `Suspense` para 'envolver' el componente `TresCanvas`. Eso es por que el `useLoader` devuelve una `Promise` y necesitamos esperarlo a que se resuelva 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.
+Una manera más conveniente de cargar texturas es usar el composable `useTexture`. Se acepta un Array 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).
 
@@ -56,7 +56,7 @@ const pbrTexture = await useTexture({
 })
 ```
 
-De la manera del ejemplo anterior, podemos pasar todas las texturas a un material via props:
+Al igual que en el ejemplo anterior, podemos pasar todas las texturas a un material via props:
 
 ```html
 <Suspense>

docs/es/examples/orbit-controls.md

@@ -4,23 +4,23 @@
 
 [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`.
+Sin embargo, no es parte del core de TresJs. 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.
+Eso crea una problema porque **TresJs** automáticamente crea un catálogo del core de Three para que puedes usarlos como componentes y el OrbitControls no es parte del core.
 
-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.
+Afortunadamente, **TresJs** provee una manera para extender el catálogo del componentes. Puedes hacerlo usando el método `extend`.
 
-Para más información sobre como extender tu catálogo TresJS catalog, hacer referencia a la sección [extending](/advanced/extending.md).
+Para más información sobre como extender tu catálogo revisa la sección [extending](/advanced/extending.md).
 
 ## Usando OrbitControls
 
-Para usar `OrbitControls` necesitas importarlo del modulo `three/examples/jsm/controls/OrbitControls`.
+Para usar `OrbitControls` necesitamos 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.
+Después, necesitas extender el catálogo de componentes usando el método `extend`.
 
 ```js
 import { extend } from '@tresjs/core'
@@ -42,7 +42,7 @@ Ahora, puedes usar el componente `TresOrbitControls` en tu escena.
 
 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.
+Puedes usar el [useThree](/api/composables#usethree) composable para conseguir la cámara y el renderer.
 
 ```ts
 import { useThree } from '@tresjs/core'
@@ -71,10 +71,10 @@ const { state } = useThree()
 
 ## 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).
+Aquí es donde mejor parte empieza. ✨  
+El paquete `cientos` provee un componente llamado `<OrbitControls />` 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 ningún argumento.  
+¿El mejor parte? No necesitas extender el catálogo o pasar ningún argumento.
 Ya funciona. 💯
 
 ```vue

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

@@ -4,13 +4,13 @@
 
 <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`.
+Sin embargo, no es parte del core de TresJs. 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.
+Eso crea un problema porque automáticamente **TresJs** crea un catálogo del core de Three para que puedes usarlos como componentes, y la TextGeometry no es del core.
 
-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).
+Afortunadamente, **TresJs** provee una manera para extender el catálogo del componentes. Puedes hacerlo usando el método `extend`.
 
-Para más información sobre come extender tu catálogo TresJS, hacer referencia a la sección [extending](/advanced/extending.md).
+Para más información sobre como extender tu catálogo revisa la sección [extending](/advanced/extending.md).
 
 ## Usando TextGeometry
 
@@ -20,18 +20,16 @@ Para usar `TextGeometry` necesitas importarlo del modulo `three/examples/jsm/geo
 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).
+Después, necesitas extender el catálogo de componentes usando el método `extend`.
 
 ```js
-import { useCatalogue } from '@tresjs/core'
+import { extend } 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.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) tiene solo un argumento necesario: el font. Puedes ver un ejemplo abajo.
 
 ```js
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -56,7 +54,7 @@ Ahora, puedes usar el componente `TresTextGeometry` dentro de un TresMesh en tu
   <TresCanvas shadows alpha>
     <TresScene>
       <TresMesh>
-        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+        <TresTextGeometry :args="['TresJs', { font, ...fontOptions }]" center />
       </TresMesh>
     </TresScene>
   </TresCanvas>
@@ -84,8 +82,9 @@ También podemos pasar un matcapTexture para añadir los detalles finales, usand
 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" />
+    <TresTextGeometry :args="['TresJs', { font, ...fontOptions }]" center />
+    <TresMeshNormalMaterial :matcap="matcapTexture"
+    />
   </TresMesh>
 ```
 
@@ -95,8 +94,7 @@ Entonces, el código final estaría algo como eso:
 <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()
+import { extend, useTexture } from '@tresjs/core'
 
 extend({ TextGeometry: TextGeometry })
 
@@ -129,7 +127,7 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 </script>
 <template>
   <TresMesh>
-    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    <TresTextGeometry :args="['TresJs', { font, ...fontOptions }]" center />
     <TresMeshNormalMaterial :matcap="matcapTexture" />
   </TresMesh>
 </template>
@@ -139,9 +137,9 @@ Yo sé que parece mucho trabajo, pero hay buena noticia, hay una manera mucho m
 
 ## 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 paquete `cientos` provee un componente que 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')
+¿La mejor parte? 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>
@@ -159,7 +157,7 @@ Podemos pasar las opciones como props
 <Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
 ```
 
-En el caso que las opciones no son provisto, los valores por defecto son:
+Los valores por defecto son:
 
 ```js
 size: 0.5,
@@ -172,7 +170,7 @@ 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"
+Por defecto, el texto empieza en la posición inicial, entonces es [0,0,0]. Pero podemos centrarlo simplemente proporcionando el prop "center"
 
 ```js
 <Text3D :font="fontPath" :text="my 3d text" center  />

docs/es/guide/getting-started.md

@@ -1,6 +1,6 @@
 # Instalación
 
-Aprende como instalar TresJS
+Aprende como instalar TresJs
 
 ::: code-group
 
@@ -22,7 +22,7 @@ yarn add three @tresjs/core
 
 ## Typescript
 
-TresJs esta escrito en Typescript. Si estas usando Typescript, tendrás muchos beneficios para los tipados. Asegúrate de instalar los tipados para Threejs
+TresJs esta escrito en Typescript. Si estas usando Typescript, tendrás muchos beneficios para los tipados. No olvides de instalar los tipos para Threejs
 
 ::: code-group
 
@@ -42,17 +42,17 @@ pnpm add @types/three -D
 
 ## Empezando
 
-Puedes instalar TresJS como cualquier otro Vue plugin
+Puedes registrar TresJs como cualquier otro Vue plugin
 
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import Tres from '@tresjs/core'
+import TresJs from '@tresjs/core'
 
 export const app = createApp(App)
 
-app.use(Tres)
+app.use(TresJs)
 app.mount('#app')
 ```
 
@@ -75,18 +75,27 @@ Esta es la forma recomendada para obtener mejor rendimiento, tree-shaking será
 
 ## 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.
+Desde la v2 Tresjs usa `custom-renderer` y
 
-You just need to add this to your `vite.config.ts` inside of the vue plugin:
+Desde la **TresJs v2**, se esta usando una solución llamada Vue Custom renderer dentro de la instancia principal de la aplicación de vue, Vue no reconocerá por defecto los componentes dentro del componente `TresCanvas`. Incluso si estos no afectan al desarrollo de nuestra escena, mostrará warning en la consola
+
+para solucionarlo solo necesitas ir a tu `vite.config.ts` y añade la siguiente configuración:
 
 ```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
+
 export default defineConfig({
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  }),
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions,
+    }),
+  ],
 })
 ```
+
+```
+
+```

docs/es/guide/index.md

@@ -4,7 +4,7 @@
     <FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
 </ClientOnly>
 
-Esta es la documentación para la `v2.0.0` en adelante de Tresjs. Si estas buscando la documentación para la version 1, revisa acá [V1 TresJS](https://v1.tresjs.org/).
+Esta es la documentación para la `v2.0.0` en adelante de Tresjs. Si estas buscando la documentación para la version 1, revisa acá [V1 TresJs](https://v1.tresjs.org/).
 
 ::: code-group
 
@@ -77,7 +77,7 @@ Ademas puedes revisar ejemplos de las utilidades, y "como hacer" en nuestro play
 
 ## Motivation
 
-[ThreeJS](https://threejs.org/) es una maravillosa librería que potencia la creación de sitios web en 3D usando **WebGL**. Se actualiza constantemente, un desafío para los mantenedores de [TroisJS](https://troisjs.github.io/)
+[TresJs](https://threejs.org/) es una maravillosa librería que potencia la creación de sitios web en 3D usando **WebGL**. Se actualiza constantemente, un desafío para los mantenedores de [TroisJS](https://troisjs.github.io/)
 
 EL ecosistema de React tiene una impresionante librería llamada [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) que permite construir escenas declarativas, de manera reusable, que reaccionan a tu estado.
 

docs/es/guide/migration-guide.md

@@ -1,7 +1,6 @@
 # Guía de migración
 
 Esta guía tiene como objetivo ayudarte con la migración de la v1 ha la mas reciente v2 de Tresjs
-This guide is intended to help you migrate from v1 to brand new shiny v2 🤩✨ of TresJS.
 
 ::: code-group
 
@@ -23,15 +22,15 @@ yarn upgrade @tresjs/core
 
 ### Vue Custom Renderer
 
-**TresJS** ahora utiliza [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉, vive dentro del componente `TresCanvas` que es el responsable de la creación del `WebGLRenderer` y la `Scene`.
+**TresJs** ahora utiliza [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉, vive dentro del componente `TresCanvas` que es el responsable de la creación del `WebGLRenderer` y la `Scene`.
 
 ### Soporte para Typescript y Intellisense 🦾
 
-![TresJS v2 Intellisense](/v2-intellisense.gif)
+![TresJs v2 Intellisense](/v2-intellisense.gif)
 
-Esta es probablemente una de las **funcionalidades mas solicitadas en TresJs**. Ahora los componentes de TresJs trabajan en conjunto con Volar, para proveerte intellisense y tipado.
+Esta es probablemente una de las **funcionalidades mas solicitadas para TresJs**. Ahora los componentes de TresJs trabajan en conjunto con Volar, para proveerte intellisense y tipado.
 
-**TresJS** ahora genera los tipos de todos tus componentes al momento de hacer la compilación, basado en el catalogo de Threejs. Esto significa que podrás usar todos los componentes de Threejs y obtener intellisense
+**TresJs** ahora genera los tipos de todos tus componentes al momento de hacer la compilación, basado en el catalogo de Threejs. Esto significa que podrás usar todos los componentes de Threejs y obtener intellisense
 
 ### TresJs Plugin es opcional 👍
 
@@ -89,7 +88,7 @@ Para migrar tu código, debes remover el componente `<TresScene />` y colocar to
 
 La función del `useCatalog` esta ahora deprecada para la v2. Ahora puedes importar todo el catalogo directamente desde `@tresjs/core`
 
-Puedes leer mas información aquí: [Extending](/advanced/extending.md)
+Puedes leer mas información aquí: [Extendiendo](/advanced/extending.md)
 
 Cambia de esto:
 
@@ -116,7 +115,7 @@ extend({ TextGeometry })
 
 ### En los modelos el `getModel` fue deprecado
 
-La función `getModel` fue deprecada. Ahora puedes usar el model directamente
+La función `getModel` fue deprecada. Ahora puedes usar el modelo directamente
 
 Cambia de esto:
 

docs/es/guide/nuxt.md

@@ -1,6 +1,6 @@
 # Modulo de Nuxt `@tresjs/nuxt`
 
-![TresJS Nuxt Module](/nuxt-stones.png)
+![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>
 

docs/es/guide/troubleshooting.md

@@ -2,13 +2,11 @@
 
 ![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.
+Bienvenido a la **Guía de resolución de problemas de TresJs v2** Sabemos que trabajar con 3D puede ser complejo, pero no temas, estamos aquí para ayudarte
 
 ## ¡No puedo ver mi escena 😭!
 
-¿Has seguido los pasos de la sección [Getting started guide](/guide/getting-started.md) pero aun así no puedes ver tu escena en pantalla?
+¿Has seguido los pasos de la sección [Empezando](/guide/getting-started.md) pero aun así no puedes ver tu escena en pantalla?
 
 Estas son algunas de las razones mas comunes:
 
@@ -52,7 +50,9 @@ O también puedes agrega el prop `window-size` al componente `TresCanvas`:
 
 ![](/failed-to-resolve-component.png)
 
-Desde la **TresJS v2**, se esta usando una solución llamada Vue Custom renderer dentro de la instancia principal de la aplicación de vue, Vue no reconocerá por defecto los componentes dentro del componente `TresCanvas`. Incluso si estos no afectan al desarrollo de nuestra escena, mostrará warning en la consola
+Desde la **TresJs v2**, se esta usando una solución llamada Vue Custom renderer dentro de la instancia principal de la aplicación de Vue, Vue no reconocerá por defecto los componentes dentro del componente `TresCanvas`.
+
+Incluso si estos no afectan al desarrollo de nuestra escena, mostrará warning en la consola
 
 ![](/failed-to-resolve-component.png)
 
@@ -77,7 +77,7 @@ export default defineConfig({
 
 Esto eliminara el mensaje en la consola.
 
-# Ayúdanos a hacer TresJS Purr-fect! 😼
+# Ayúdanos a hacer TresJs Purr-fect! 😼
 
 Sabemos que incluso los mejores ocasionalmente cometemos errores, y ¡necesitamos tu ayuda para hacer TresJs aún mejor! Si encuentras algún bug por favor no dudes en abrir un ticket acá [the
 repo](https://github.com/Tresjs/playground) **Recuerda proporcionar un link a la reproducción del error**

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

@@ -1,6 +1,6 @@
 # Tu primera scene
 
-Esta guía te va a ayudar a crear tu primera scene Tres. 🍩
+Esta guía te va a ayudar a crear tu primera scene TresJs. 🍩
 
 <ClientOnly>
     <DonutExample style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
@@ -8,9 +8,9 @@ Esta guía te va a ayudar a crear tu primera scene Tres. 🍩
 
 ## Preparando el Canvas
 
-Antes de poder crear una escena, necesitamos un lugar donde mostrarla. Usando [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) simple, necesitaríamos crear un `canvas` html element para montar el `WebglRenderer` y inicializar la `scene`
+Antes de poder crear una escena, necesitamos un lugar donde mostrarla. Usando [TresJs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) simple, necesitaríamos crear un `canvas` html element para montar el `WebglRenderer` y inicializar la `scene`
 
-Con **TresJS** solo necesitas añadir el componente default `<TresCanvas >` a la plantilla de tu componente de Vue.
+Con **TresJs** solo necesitas añadir el componente default `<TresCanvas >` a la plantilla de tu componente de Vue.
 
 ```vue
 <script lang="ts" setup>
@@ -82,7 +82,7 @@ Necesitamos 4 elementos core para crear una experiencia 3D :
 - Una [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
 - Un [**Objeto**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
 
-Con **TresJS** solo necesitas agregar el componente `<TresCanvas />` al template en tu Vue SFC y automáticamente creara el `Renderer` (`canvas` DOM Element) y la `Scene` por ti.
+Con **TresJs** solo necesitas agregar el componente `<TresCanvas />` al template en tu Vue SFC y automáticamente creara el `Renderer` (`canvas` DOM Element) y la `Scene` por ti.
 
 ```vue
 <template>
@@ -108,7 +108,7 @@ Un problema común es que la posición por defecto de la cámara es (0,0,0), Tre
 
 ## Añadir una 🍩
 
-Esta escena parece un poquito vacía, añadamos un objeto básico. Si estuviéramos usando **ThreeJS** puro, necesitaríamos crear un [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) objeto y adjuntarlo a una [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) y una [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) como eso:
+Esta escena parece un poquito vacía, añadamos un objeto básico. Si estuviéramos usando **TresJs** puro, necesitaríamos crear un [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) objeto y adjuntarlo a una [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) y una [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) como eso:
 
 ```ts
 const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
@@ -119,7 +119,7 @@ scene.add(donut)
 
 Un Mesh es un objeto básico de la escena en three.js, y es usado para contener la geometría y el material necesario para representar una forma en el espacio 3D.
 
-Ahora, vemos como podemos lograr fácilmente el mismo con **TresJS**. Para hacerlo, vamos a usar `<TresMesh />` componente, y entre los puestos por defecto, vamos a pasar un `<TresTorusGeometry />` y un `<TresMeshBasicMaterial />`.
+Ahora, vemos como podemos lograr fácilmente el mismo con **TresJs**. Para hacerlo, vamos a usar `<TresMesh />` componente, y entre los puestos por defecto, vamos a pasar un `<TresTorusGeometry />` y un `<TresMeshBasicMaterial />`.
 
 ```vue
 <template>
@@ -134,7 +134,7 @@ Ahora, vemos como podemos lograr fácilmente el mismo con **TresJS**. Para hacer
 ```
 
 ::: info
-Nota que no necesitamos importar nada, eso es porque **TresJS** generar automáticamente un **Componente de Vue con base del Three Objeto quieres usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar un `AmbientLight` usarías `<TresAmbientLight />` componente.
+Nota que no necesitamos importar nada, eso es porque **TresJs** generar automáticamente un **Componente de Vue con base del Three Objeto quieres usar en CamelCase con un prefijo TresJs**. Por ejemplo, si quieres usar un `AmbientLight` usarías `<TresAmbientLight />` componente.
 :::
 
 <StackBlitzEmbed projectId="tresjs-first-scene" />