docs: translated missing composable page

docs/es/api/composables.md

@@ -2,13 +2,13 @@
 
 La API de Composición de 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 componentes. También te permite crear hooks personalizados que se pueden utilizar en tus componentes.
 
-**TresJS** aprovecha al máximo esta API para crear un conjunto de funciones componibles que se pueden utilizar para crear animaciones, interactuar con la escena y más. También te permite crear escenas más complejas que podrían no ser posibles utilizando solo los Componentes de Vue (Texturas, Cargadores, etc.).
+**TresJS** aprovecha al máximo esta API para crear un conjunto de funciones composables que se pueden utilizar para crear animaciones, interactuar con la escena y más. También te permite crear escenas más complejas que podrían no ser posibles utilizando solo los Componentes de Vue (Texturas, Cargadores, etc.).
 
-El núcleo de **TresJS** utiliza estos componibles internamente, por lo que estarías utilizando la misma API que utiliza el núcleo. Por ejemplo, los componentes que necesitan actualizarse en el bucle de renderizado interno utilizan el componible `useRenderLoop` para registrar un callback que se llamará cada vez que el renderizador actualice la escena.
+El núcleo de **TresJS** utiliza estos composables internamente, por lo que estarías utilizando la misma API que utiliza el núcleo. Por ejemplo, los componentes que necesitan actualizarse en el bucle de renderizado interno utilizan el composable `useRenderLoop` para registrar un callback que se llamará cada vez que el renderizador actualice la escena.
 
 ## useRenderLoop
 
-El componible `useRenderLoop` es el núcleo de las animaciones en **TresJS**. Te permite registrar un callback que se llamará en la frecuencia de actualización nativa. Este es el componible más importante en **TresJS**.
+El composable `useRenderLoop` es el núcleo de las animaciones en **TresJS**. Te permite registrar un callback que se llamará en la frecuencia de actualización nativa. Este es el composable más importante en **TresJS**.
 
 ```ts
 const { onLoop, resume } = useRenderLoop()
@@ -19,49 +19,49 @@ onLoop(({ delta, elapsed, clock, dt }) => {
 ```
 
 ::: warning
-Be mindfull of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references.
+Ten en cuenta las implicaciones de rendimiento al usar este composable. Se ejecutará en cada fotograma, por lo que si tienes mucha lógica en tu callback, podría afectar el rendimiento de tu aplicación. Especialmente si estás actualizando estados o referencias reactivas.
 :::
 
-The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
+El callback `onLoop` recibe un objeto con las siguientes propiedades basadas en el [reloj de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock):
 
-- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
-- `elapsed`: The elapsed time since the start of the render loop.
+- `delta`: El tiempo transcurrido entre el fotograma actual y el último fotograma. Este es el tiempo en segundos desde el último fotograma.
+- `elapsed`: El tiempo transcurrido desde el inicio del bucle de renderizado.
 
-This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) for the amazing contribution.
+Este composable se basa 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.
 
-### Before and after render
+### Antes y después de renderizar
 
-You can also register a callback that will be called before and after the renderer updates the scene. This is useful if you add a profiler to measure the FPS for example.
+También puedes registrar un callback que se llamará antes y después de que el renderizador actualice la escena. Esto es útil si agregas un perfilador para medir los FPS, por ejemplo.
 
 ```ts
 const { onBeforeLoop, onAfterLoop } = useRenderLoop()
 
 onBeforeLoop(({ delta, elapsed }) => {
-  // I will run before the renderer updates the scene
+  // Se ejecutara antes del renderizado de la escena
   fps.begin()
 })
 
 onAfterLoop(({ delta, elapsed }) => {
-  // I will run after the renderer updates the scene
+  // Se ejecutara después del renderizado de la escena
   fps.end()
 })
 ```
 
-### Pause and resume
+### Pausar y reanudar
 
-You can pause and resume the render loop using the exposed `pause` and `resume` methods.
+Puedes pausar y reanudar el bucle de renderizado utilizando los métodos `pause` y `resume` expuestos.
 
 ```ts
 const { pause, resume } = useRenderLoop()
 
-// Pause the render loop
+// Pausa el bucle de renderizado
 pause()
 
-// Resume the render loop
+// Reanuda el bucle de renderizado
 resume()
 ```
 
-Also you can get the active state of the render loop using the `isActive` property.
+También puedes obtener el estado activo del bucle de renderizado utilizando la propiedad `isActive`.
 
 ```ts
 const { resume, isActive } = useRenderLoop()
@@ -75,7 +75,7 @@ console.log(isActive) // true
 
 ## useLoader
 
-The `useLoader` composable allows you to load assets using the [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). It returns a promise with loaded asset.
+El composable `useLoader` te permite cargar recursos utilizando los [cargadores de THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Retorna una promesa con el recurso cargado.
 
 ```ts
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
@@ -83,7 +83,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
 ```
 
-Since the `useLoader` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component. See [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more information.
+Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`. Consulta [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) para obtener más información.
 
 ```vue
 <template>
@@ -95,24 +95,24 @@ Since the `useLoader` composable returns a promise, you can use it with `async/a
 
 ## useTexture
 
-The `useTexture` composable allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). It returns a promise with the loaded texture(s).
+El composable `useTexture` te permite cargar texturas utilizando el [cargador de texturas de THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader). Retorna una promesa con la(s) textura(s) cargada(s).
 
 ```ts
 const texture = await useTexture(['path/to/texture.png'])
 ```
 
-**useTexture** also accepts an object with the following properties:
+**useTexture** también acepta un objeto con las siguientes propiedades:
 
-- `map`: a basic texture that is applied to the surface of an object
-- `displacementMap`: a texture that is used to add bumps or indentations to the object's surface
-- `normalMap`: a texture that is used to add surface detail to and variations in shading to the object
-- `roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
-- `metalnessMap`: a texture that is used to add a metallic effect to the object's surface
-- `aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
-- `alphaMap`: a texture that is used to add alpha (the black part render as transparent) to the object. It's necessary to set :trasparent="true" on the material to use this map
-- `matcap`: this textures encodes the material color and shading.
+- `map`: una textura básica que se aplica a la superficie de un objeto
+- `displacementMap`: una textura que se utiliza para agregar protuberancias o indentaciones a la superficie del objeto
+- `normalMap`: una textura que se utiliza para agregar detalles de superficie y variaciones en el sombreado al objeto
+- `roughnessMap`: una textura que se utiliza para agregar rugosidad o un acabado mate a la superficie del objeto
+- `metalnessMap`: una textura que se utiliza para agregar un efecto metálico a la superficie del objeto
+- `aoMap`: una textura que se utiliza para agregar oclusión ambiental (sombreado en áreas donde la luz es bloqueada por otros objetos) al objeto.
+- `alphaMap`: una textura que se utiliza para agregar transparencia (la parte negra se renderiza como transparente) al objeto. Es necesario establecer :transparent="true" en el material para usar este mapa.
+- `matcap`: esta textura codifica el color y el sombreado del material.
 
-In that case it will return an object with the loaded textures.
+En ese caso, devolverá un objeto con las texturas cargadas.
 
 ```ts
 const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
@@ -127,7 +127,7 @@ const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alph
 })
 ```
 
-Then you can bind the textures to the material.
+Luego puedes vincular las texturas al material.
 
 ```vue
 <template>
@@ -148,23 +148,23 @@ Then you can bind the textures to the material.
 </template>
 ```
 
-Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
+Similar al composable anterior, el composable `useTexture` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`.
 
 ## useSeek
 
-The `useSeek` composable provides utilities to easily traverse and navigate through complex ThreeJS scenes and object children graphs. It exports 4 functions which allow you to find child objects based on specific properties.
+El composable `useSeek` proporciona utilidades para recorrer y navegar fácilmente a través de escenas y gráficos de objetos complejos de ThreeJS. Exporta 4 funciones que te permiten encontrar objetos secundarios basados en propiedades específicas.
 
 ```ts
 const { seek, seekByName, seekAll, seekAllByName } = useSeek()
 ```
 
-The seek function accepts three parameters:
+La función `seek` acepta tres parámetros:
 
-- `parent`: A ThreeJS scene or Object3D.
-- `property`: The property to be used in the search condition.
-- `value`: The value of the property to match.
+- `parent`: Una escena ThreeJS u Object3D.
+- `property`: La propiedad que se utilizará en la condición de búsqueda.
+- `value`: El valor de la propiedad a coincidir.
 
-The `seek` and `seekByName` function traverses the object and returns the child object with the specified property and value. If no child with the given property and value is found, it returns null and logs a warning.
+La función `seek` y `seekByName` recorren el objeto y devuelven el objeto hijo con la propiedad y valor especificados. Si no se encuentra ningún hijo con la propiedad y valor dados, devuelve null y registra una advertencia.
 
 ```ts
 const carRef = ref(null)
@@ -179,7 +179,7 @@ watch(carRef, ({ model }) => {
 })
 ```
 
-Similarly, the `seekAll` and `seekAllByName` functions return an array of child objects whose property includes the given value. If no matches are found, then they return an empty array and a warning is logged.
+De manera similar, las funciones `seekAll` y `seekAllByName` devuelven un array de objetos secundarios cuya propiedad incluye el valor dado. Si no se encuentran coincidencias, devuelven un array vacío y se registra una advertencia.
 
 ```ts
 const character = ref(null)
@@ -192,7 +192,7 @@ watch(character, ({ model }) => {
 ```
 
 ## useTresContext
-This composable aims to provide access to the state model which contains multiple useful properties.
+Este composable tiene como objetivo proporcionar acceso al modelo de estado que contiene múltiples propiedades útiles.
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
@@ -200,7 +200,7 @@ const { camera, renderer, camera, cameras } = useTresContext()
 ```
 
 ::: warning
-`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Use [the context exposed by TresCanvas](tres-canvas#exposed-public-properties) if you find yourself needing it in parent components of TresCanvas. 
+`useTresContext` solo puede ser utilizado dentro de un `TresCanvas`, ya que `TresCanvas` actúa como el proveedor de los datos de contexto. Utiliza [el contexto expuesto por TresCanvas](tres-canvas#propiedades-públicas-expuestas) si necesitas acceder a él en componentes superiores a TresCanvas.
 :::
 
 ```vue
@@ -219,18 +219,18 @@ const context = useTresContext()
 </script>
 ```
 
-### Properties of context
-| Property | Description |
+### Propiedades del contexto
+| Propiedad | Descripción |
 | --- | --- |
-| **camera** | the currently active camera |
-| **cameras** | the cameras that exist in the scene |
-| **controls** | the controls of your scene |
-| **deregisterCamera** | a method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
-| **extend** | Extends the component catalogue. See [extending](/advanced/extending) |
-| **raycaster** | the global raycaster used for pointer events |
-| **registerCamera** | a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
-| **renderer** | the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
-| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
-| **setCameraActive** | a method to set a camera active |
-| **sizes** | contains width, height and aspect ratio of your canvas |
+| **camera** | la cámara actualmente activa |
+| **cameras** | las cámaras que existen en la escena |
+| **controls** | los controles de tu escena |
+| **deregisterCamera** | un método para cancelar el registro de una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
+| **extend** | Extiende el catálogo de componentes. Ver [extending](/advanced/extending) |
+| **raycaster** | el raycaster global utilizado para eventos de puntero |
+| **registerCamera** | un método para registrar una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
+| **renderer** | el [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) de tu escena |
+| **scene** | la [escena](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
+| **setCameraActive** | un método para establecer una cámara activa |
+| **sizes** | contiene el ancho, alto y relación de aspecto de tu lienzo |
 

docs/es/index.md

@@ -14,10 +14,10 @@ hero:
   actions:
     - theme: brand
       text: Empezar
-      link: /guide/
+      link: /es/guide/
     - theme: alt
       text: ¿Por qué Tres?
-      link: /guide/#motivation
+      link: /es/guide/#motivation
 
 features:
   - icon: 💡