docs: examples translated

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

@@ -143,8 +143,6 @@ Ahora veamos cómo podemos lograr lo mismo fácilmente con **TresJS**. Para hace
 Observa que no necesitamos importar nada, esto se debe a que **TresJS** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar una `AmbientLight`, puedes usar el componente `<TresAmbientLight />`.
 :::
 
-
-
 ```vue
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'

docs/examples/basic-animations.md

@@ -1,30 +1,30 @@
 # Basic Animations
 
-This guide will help you get started with basic animations in TresJS.
+Esta guía te ayudará a comenzar con animaciones básicas en TresJS.
 
-We will build a simple scene with a cube. We will then animate the cube to rotate around the Y and Z axis.
+Construiremos una escena simple con un cubo. Luego animaremos el cubo para que rote alrededor del eje Y y Z.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
 
 ## useRenderLoop
 
-The `useRenderLoop` composable is the core of TresJS animations. It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate.
+El composable `useRenderLoop` es el núcleo de las animaciones en TresJS. Te permite registrar una función de devolución de llamada que se ejecutará cada vez que el renderizador actualice la escena con la frecuencia de actualización del navegador.
 
-To see a detailed explanation of how it works, please refer to the [useRenderLoop](/api/composables#userenderloop) documentation.
+Para obtener una explicación detallada de cómo funciona, consulta la documentación de [useRenderLoop](/api/composables#userenderloop).
 
 ```ts
 const { onLoop } = useRenderLoop()
 
 onLoop(({ delta, elapsed }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
+  // Se ejecutará en cada fotograma ~ 60FPS (dependiendo de tu monitor)
 })
 ```
 
-## Getting the reference to the cube
+## Obteniendo la referencia al cubo
 
-To animate the cube, we need to get a reference to it. We can do it by passing a [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) using `ref` prop to the `TresMesh` component. This will return the THREE instance.
+Para animar el cubo, necesitamos obtener una referencia a él. Podemos hacerlo pasando una [Referencia de Plantilla](https://vuejs.org/guide/essentials/template-refs.html) utilizando la propiedad `ref` en el componente `TresMesh`. Esto nos devolverá la instancia de THREE.
 
-To improve the performance, we will use a [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) to store the reference instead of a regular Ref. See why [here](../advanced/caveats.md#reactivity)
+Para mejorar el rendimiento, utilizaremos una [Referencia Superficial](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) para almacenar la referencia en lugar de una referencia regular. Puedes ver por qué [aquí](../advanced/caveats.md#reactivity)
 
 ```vue
 <script setup lang="ts">
@@ -46,9 +46,9 @@ const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 </template>
 ```
 
-## Animating the cube
+## Animando el cubo
 
-Now that we have a reference to the cube, we can animate it. We will use the `onLoop` callback to update the cube's rotation.
+Ahora que tenemos una referencia al cubo, podemos animarlo. Utilizaremos la devolución de llamada `onLoop` para actualizar la rotación del cubo.
 
 ```ts
 onLoop(({ delta, elapsed }) => {
@@ -59,14 +59,14 @@ onLoop(({ delta, elapsed }) => {
 })
 ```
 
-You can also use the `delta` from the internal [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) or the `elapsed` to animate the cube.
+También puedes usar el `delta` del [reloj interno de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) o el `elapsed` para animar el cubo.
 
-## But why not using reactivity?
+## ¿Pero por qué no usar la reactividad?
 
-You might be wondering why we are not using reactivity to animate the cube. The answer is simple, performance.
+Es posible que te preguntes por qué no estamos usando la reactividad para animar el cubo. 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'
 
@@ -79,11 +79,11 @@ onLoop(({ delta, elapsed }) => {
 </script>
 ```
 
-We can be tempted to use reactivity to animate the cube. But it would be a bad idea.
-The reason is that [Vue's reactivity is based on Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) and it's not designed to be used in a render loop that updates 60 or more times per second.
+Podemos sentirnos tentados a usar la reactividad para animar el cubo. Pero sería una mala idea.
+La razón es que [la reactividad de Vue se basa en Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) y no está diseñada para ser utilizada en un bucle de renderizado que se actualiza 60 o más veces por segundo.
 
-The embedded page below shows the [benchmark of a proxy vs a regular object](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). As you can see, the proxy is 5 times slower than the regular object.
+La página incrustada a continuación muestra la [prueba de rendimiento de un proxy frente a un objeto regular](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Como puedes ver, el proxy es 5 veces más lento que el objeto regular.
 
 <EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
 
-You can read more about this in the [Caveats](../advanced/caveats.md#reactivity) section.
+Puedes leer más sobre esto en la sección de [Caveats](../advanced/caveats.md#reactivity).

docs/examples/groups.md

@@ -1,8 +1,8 @@
-# Group
+# Grupo
 
-A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).
+Un `<TresGroup>` es una instancia de la clase [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) que es casi lo mismo que un [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) pero te permite **agrupar varios objetos en la escena** para que puedan ser manipulados como una unidad única (transformación, rotación, etc).
 
-## Usage
+## Uso
 
 ```vue{13,22}
 <script setup lang="ts">

docs/examples/lights-shadows.md

@@ -1,18 +1,19 @@
-# Light-shadows
+# Luces y sombras
 
-This guide will help you get started with simple light and shadows in TresJS.
+Esta guía te ayudará a comenzar con luces y sombras simples en TresJS.
+
+Construiremos una escena simple con tres mallas y un plano, pero solo dos tendrán sombras.
 
-We will build a simple scene with three meshes and a plane but only two will have shadows.
 <SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
 
-## Setting up the scene (optional)
+## Configurando la escena (opcional)
 
-We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[check here to know how](/examples/orbit-controls).
+Importamos todos los módulos que necesitamos, para mayor comodidad podemos usar orbit-controls de cientos,
+[ver aquí para saber cómo](/examples/orbit-controls).
 
-Let's put four objects in our scene, one will be the plane that receive shadows, two of them will cast shadows and the last one will not cast any shadow at all.
+Coloquemos cuatro objetos en nuestra escena, uno será el plano que recibirá sombras, dos de ellos proyectarán sombras y el último no proyectará ninguna sombra en absoluto.
 
-I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simply because we can see the "soft shadow" easily.
+Voy a usar [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simplemente porque podemos ver fácilmente el "sobreado suave".
 
 ```vue
 <script setup lang="ts">
@@ -58,27 +59,27 @@ import { OrbitControls } from '@tresjs/cientos'
 </template>
 ```
 
-## Lights (explanation)
+## Luces (explicación)
 
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs** so are all the light types, we just need to add the `Tres` prefix to use them.
+Como sabes, cada instancia en [ThreeJs](https://threejs.org/) está disponible en **TresJs**, por lo que todos los tipos de luces también están disponibles, solo necesitamos agregar el prefijo `Tres` para usarlos.
 
-But not all lights can cast shadows, this definition comes directly from ThreeJs and makes sense, for example the purpose of an [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) is to iluminate everysingle side of your scene, so it makes no sense for it to cast shadows, on the contrary, a [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) immitating the sun can and should cast shadows.
+Pero no todas las luces pueden generar sombras, esta definición proviene directamente de ThreeJs y tiene sentido. Por ejemplo, el propósito de una [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) es iluminar todos los lados de tu escena, por lo que no tiene sentido que genere sombras. En cambio, una [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) que imita al sol puede y debe generar sombras.
 
-## Shadows (explanation)
+## Sombras (explicación)
 
-There are also many types of shadows, for example the "soft shadow" is generated automatially when an object receives more light from one side, but in summary a "ThreeJS default shadow" that is directed towards another surface needs to be cast by a mesh and another mesh needs to receive it. As we see in our example, the `Plane` is receiving a shadow but not casting it. Please note that not all materials can cast or receive shadows.
+También existen muchos tipos de sombras, por ejemplo, la "sombra suave" se genera automáticamente cuando un objeto recibe más luz de un lado, pero en resumen, una "sombra predeterminada de ThreeJS" que se dirige hacia otra superficie debe ser proyectada por una malla y otra malla debe recibirla. Como vemos en nuestro ejemplo, el `Plano` está recibiendo una sombra pero no la está proyectando. Ten en cuenta que no todos los materiales pueden proyectar o recibir sombras.
 
-Internally, ThreeJS automatically generates a new mesh with a [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) which gets updated in each frame, that is why if you apply animations, the shadow also is animated, but also why you have to use shadows carefully, because they could slow your performance down.
+Internamente, ThreeJS genera automáticamente una nueva malla con un [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) que se actualiza en cada fotograma, por eso si aplicas animaciones, la sombra también se anima, pero también es por eso que debes usar las sombras con cuidado, ya que pueden ralentizar el rendimiento.
 
 ::: warning
-The overuse of shadows in this way could drop your performance. However, there are ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+El uso excesivo de sombras de esta manera puede afectar el rendimiento. Sin embargo, existen formas de mejorar el rendimiento. Para obtener más información, consulta [este video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
 :::
 
-## Enabling shadows
+## Habilitando las sombras
 
-We could divide this into three steps:
+Podemos dividir esto en tres pasos:
 
-### Activate shadows on the renderer
+### Activar las sombras en el renderizador
 
 ```vue
 //...
@@ -92,11 +93,11 @@ We could divide this into three steps:
   //...
 </template>
 ```
-### Set the light to cast shadows
+### Configurar la luz para proyectar sombras
 
-We can simple put the boolean `cast-shadow`, Vue understand this as a `prop` with `true` value
+Podemos simplemente agregar el booleano `cast-shadow`, Vue lo interpreta como una `prop` con valor `true`.
 
-_The AmbientLight doesn't generate any type of shadow here_
+_La luz ambiental no genera ningún tipo de sombra aquí_
 
 ```vue
 //...
@@ -112,9 +113,9 @@ _The AmbientLight doesn't generate any type of shadow here_
   //...
 </template>
 ```
-### Set the objects to cast or receive shadows
+### Establecer los objetos para proyectar o recibir sombras
 
-Similarly to the previous step, we set the mesh that we want to cast shadow (our sphere) with the `cast-shadow` prop, and set the object to receive shadow (our plane) with the `receive-shadow` prop.
+De manera similar al paso anterior, configuramos la malla que queremos que proyecte sombra (nuestra esfera) con la propiedad `cast-shadow`, y configuramos el objeto para recibir sombra (nuestro plano) con la propiedad `receive-shadow`.
 
 ```vue
 //...
@@ -139,7 +140,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
 </template>
 ```
 
-Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/examples/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
+Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena, y si aplicamos lo que aprendimos en [animaciones básicas](/examples/basic-animations), y agregamos movimiento a nuestro cubo, verás que la sombra también se anima 🤩
 
 ```vue
 <script setup>
@@ -171,4 +172,4 @@ onLoop(() => {
 </template>
 ```
 
-_Note that I intentionally did not apply `cast-shadow` to the `Cone` so it doesn't cast any shadow_
+_Nota que intencionalmente no apliqué `cast-shadow` al `Cone` para que no proyecte ninguna sombra_

docs/examples/load-models.md

@@ -1,24 +1,24 @@
-# Load Models
+# Cargar Modelos
 
-> All models used in this guide are from [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
+> Todos los modelos utilizados en esta guía son de [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
 
-3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity.
+Los modelos 3D están disponibles en cientos de formatos de archivo, cada uno con diferentes propósitos, características variadas y complejidad variable.
 
-For this guide we are going to focus on loading gLTF (GL Transmission Format) models, which are the most common format for 3D models on the web.
+Para esta guía, nos vamos a centrar en cargar modelos gLTF (GL Transmission Format), que son el formato más común para modelos 3D en la web.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
 
-There are several ways to load models on TresJS:
+Hay varias formas de cargar modelos en TresJS:
 
 ::: warning
-Please note that the examples above we use top level await, make sure you wrap it with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information. .
+Por favor, ten en cuenta que en los ejemplos anteriores utilizamos el await de nivel superior, asegúrate de envolverlo con un componente [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense). Consulta Suspense para obtener más información.
 :::
 
-## Using `useLoader`
+## Usando `useLoader`
 
-The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
+El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Devuelve una `Promise` con el recurso cargado.
 
-For a detailed explanation of how to use `useLoader`, check out the [useLoader](/api/composables#useloader) documentation.
+Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#useloader).
 
 ```ts
 import { useLoader } from '@tresjs/core'
@@ -27,7 +27,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 ```
 
-Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
+Luego puedes pasar la escena del modelo a un componente [`primitive`](/advanced/primitive) de TresJS para renderizarlo:
 
 ```html{2}
 <TresCanvas>
@@ -35,13 +35,13 @@ Then you can pass the model scene to a TresJS [`primitive`](/advanced/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 />` no es un componente independiente en el código fuente de Tres. En su lugar, es parte de la funcionalidad principal de Tres. Cuando usas `<primitive>`, se traduce a una llamada a `createElement`, que crea el objeto three.js adecuado según la propiedad "object" proporcionada.
 
-Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
+Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
 
-## Using `useGLTF`
+## Usando `useGLTF`
 
-A more convenient way of loading models is using the `useGLTF` composable available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+Una forma más conveniente de cargar modelos es utilizando el composable `useGLTF` disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```ts
 import { useGLTF } from '@tresjs/cientos'
@@ -49,7 +49,7 @@ import { useGLTF } from '@tresjs/cientos'
 const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
 ```
 
-An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
+Una ventaja de usar `useGLTF` es que puedes pasar una propiedad `draco` para habilitar la [compresión Draco](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) para el modelo. Esto reducirá el tamaño del modelo y mejorará el rendimiento.
 
 ```ts
 import { useGLTF } from '@tresjs/cientos'
@@ -57,7 +57,7 @@ import { useGLTF } from '@tresjs/cientos'
 const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
 ```
 
-Alternatively you can easily select Objects inside the model using `nodes` property
+Alternativamente, puedes seleccionar fácilmente objetos dentro del modelo utilizando la propiedad `nodes`.
 
 ```vue
 <script setup lang="ts">
@@ -79,9 +79,9 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 </template>
 ```
 
-## Using `GLTFModel`
+## Usando `GLTFModel`
 
-The `GLTFModel` component is a wrapper around `useGLTF` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+El componente `GLTFModel` es un envoltorio alrededor de `useGLTF` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```vue{2,9}
 <script setup lang="ts">
@@ -99,11 +99,11 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 </template>
 ```
 
-This particular approach is more straightforward but gives you less control over the model.
+Este enfoque en particular es más sencillo pero te brinda menos control sobre el modelo.
 
 ## useFBX
 
-The `useFBX` composable is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+El composable `useFBX` está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
 
 ```ts
 import { useFBX } from '@tresjs/cientos'
@@ -111,7 +111,7 @@ import { useFBX } from '@tresjs/cientos'
 const model = await useFBX('/models/AkuAku.fbx')
 ```
 
-Then is as straightforward as adding the scene to your scene:
+Entonces, es tan sencillo como agregar la escena a tu escena:
 
 ```html{2}
 <TresCanvas shadows alpha>
@@ -121,7 +121,7 @@ Then is as straightforward as adding the scene to your scene:
 
 ## FBXModel
 
-The `FBXModel` component is a wrapper around `useFBX` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar usage to `GLTFModel`:
+El componente `FBXModel` es un envoltorio alrededor de `useFBX` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Su uso es similar al de `GLTFModel`:
 
 ```vue{2,9}
 <script setup lang="ts">

docs/examples/load-textures.md

@@ -1,18 +1,18 @@
-# Load Textures
+# Cargar Texturas
 
-> All textures used in this example are from [ambientcg](https://ambientcg.com/).
+> Todas las texturas utilizadas en este ejemplo son de [ambientcg](https://ambientcg.com/).
 
-Three-dimensional (3D) textures are images that contain multiple layers of data, allowing them to represent volume or simulate three-dimensional structures. These textures are commonly used in 3D graphics and visual effects to enhance the realism and complexity of scenes and objects.
+Las texturas tridimensionales (3D) son imágenes que contienen múltiples capas de datos, lo que les permite representar volumen o simular estructuras tridimensionales. Estas texturas se utilizan comúnmente en gráficos 3D y efectos visuales para mejorar el realismo y la complejidad de escenas y objetos.
 
 <SandboxDemo url="https://play.tresjs.org/#eNq9Vm1PGzkQ/itW7gNBJbvhVVWOVBToVb2DgoBvTVU5u5PE4LUt25uQi3K/5X7L/bIb27tZB1qUfqAgRcnj8TPPjMfjWbTuNJj3SiXTElq91rHJNFOWGLClIpyKcX/QsmbQejcQrFBSW3IHj7bUkJ9SzslIy4JsJWkMOqqt31f2C+JcnFExpYYsqx0nFrF7k2ZSr9te6SGzZ1JYLfl3zBkIK43b4f6P0yAXxeEPC4Xi1AL+IuS4cep+EpJxoLqTSS41hvTb273z07PDQSssmgnN5ayypFxNaPg6YwLxjmF/QwCUnIHuKA0j0CAyQKoJG086CvRI6oIi5DidsZeBQtYjSmvY6bsGbRRklk3hjBagK6+E9JQ0zDIpkP/L7g7Z2yGHX2uxuDySU1w5WOlHiHomRHcjUGDMCHWTGBx5bLfb7dZgLQpl3ZbII0xIYoWtnXhkmz4z9lGdM+1ikoLyC8yNXY+m66M5wGhIjwmL25md48IeAhk1thPOovJznDbniMBxGh1ya6cVyqZTUJXcGymwgBdu16BawLrtEY84LK45t4BHZ60yvTTNcoH7c+BsqhMBNhWqSGPzk/3kMOmmOTM2dTBaD1o7z4hDdf4Md9iB9EcxfQWve7EzoA+Kik20r2xPDhI8/Iq5BpOCuT0x90TDRrzO7gQZD9+i3jdgijgNeO9LAxvnNzI/2e36BON1g8ekWM9uZYd1gTX4E8Rhw0vUaNjJoWAbkNamLviD5CjlbBhTOsblQCyxJq3JpBix8ZOKzGShGAd9pdxNWK9MvFdy9qfHrC5hpS+bQPbwHfzePAbJ11gsoKeY7uYoqR6DDcsfbj/j1Y0WC5mXvDqcHyzegJG8dBqD2WkpcpQd2Xm1n/wFY2J8Zz48+ltcBbUm1M4VePRL3SFWtRaArz5x3t4fx9kLWWoi20/2o4Q/fXs2e8YWBJv46oGpnqxoFSuoIt5x328AD1tfSKl++IYNBB68sUQNdbWT9AmdUWYjsrYPBxtWj2zVBafpLBkzOymHaKeRBPNpEywY3/zQAzUYiEkLygQ2QM9j0iGn2UNHy+whvcGP7v7ht72/vp0zg/0xg8JR3Kvxls8t3v8Veom+Q0p/oQAty/FEgDGv7P2m9tO4Fu5d5q/s97N38vGicUuLoeviV1nGS3c5XtP7+ye+ahXL7agsjZrgzHKDRd93pd8WJefxursQpiyw3KWo6ry/XvntYD4QwaDdXhDskpaS5TbpvwsXNU3JJxybcFDQpSDUEpiCnuONwfmG/PPfv0fdP65vSTsHHBxybB9EjshclpoUUjAr9bYjYSPSXslNppSXsF33gSd4oqWlrlckc/KmH/SgytAcnN4XZsRqXrkEM3EZwRaxInfTickodwMezk7xZLI2GeH2W7/nI8gCLEbawy5lqrENZyz/4YadZm6K3N5aKnKq80uUpBnljYn7m3aG+MQgV9NRmjEu/MUXu1ML7iY4TDV2q5HTV5Zz+2ySWv4PY68KvA==" />
 
-There are two ways of loading 3D textures in TresJS:
+Hay dos formas de cargar texturas 3D en TresJS:
 
-## Using `useLoader`
+## Usando `useLoader`
 
-The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
+El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Retorna una `Promise` con el recurso cargado.
 
-For a detailed explanation of how to use `useLoader`, check out the [useLoader](/api/composables#use-loader) documentation.
+Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#use-loader).
 
 ```ts
 import { useLoader } from '@tresjs/core'
@@ -21,7 +21,7 @@ import { TextureLoader } from 'three'
 const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
 ```
 
-Then you can pass the texture to a material:
+Luego puedes pasar la textura a un material:
 
 ```html
 <Suspense>
@@ -34,13 +34,13 @@ Then you can pass the texture to a material:
 </Suspense>
 ```
 
-Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
+Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
 
-## Using `useTexture`
+## Usando `useTexture`
 
-A more convenient way of loading textures is using the `useTexture` composable. It accepts both an array of URLs or a single object with the texture paths mapped.
+Una forma más conveniente de cargar texturas es utilizando el composable `useTexture`. Acepta tanto un array de URLs como un objeto único con los caminos de las texturas mapeadas.
 
-To learn more about `useTexture`, check out the [useTexture](/api/composables#use-texture) documentation.
+Para obtener más información sobre `useTexture`, consulta la documentación de [useTexture](/api/composables#use-texture).
 
 ```ts
 import { useTexture } from '@tresjs/core'
@@ -58,6 +58,8 @@ const pbrTexture = await useTexture({
 ```
 Similar to the previous example, we can pass all the textures to a material via props:
 
+Al igual que en el ejemplo anterior, podemos pasar todas las texturas a un material a través de props:
+
 ```html
 <Suspense>
   <TresCanvas>

docs/examples/orbit-controls.md

@@ -2,25 +2,25 @@
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
 
-[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) es un controlador de cámara que te permite orbitar alrededor de un objetivo. Es una excelente manera de explorar tu escena.
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/OrbitControls` module.
+Sin embargo, no forma parte del núcleo de ThreeJS. Por lo tanto, para usarlo, necesitarías importarlo desde el módulo `three/addons/controls/OrbitControls`.
 
-This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
+Esto crea un problema porque **TresJS** crea automáticamente un catálogo del núcleo de Three para que puedas usarlos como componentes.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
+Afortunadamente, **TresJS** proporciona una forma de extender el catálogo de componentes. Puedes hacerlo utilizando el método `extend` de la biblioteca principal.
 
-For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
+Para obtener más información sobre cómo extender tu catálogo de TresJS, consulta la sección de [extensión](/advanced/extending.md).
 
-## Using OrbitControls
+## Usando OrbitControls
 
-To use `OrbitControls` you need to import it from the `three/addons/controls/OrbitControls` module.
+Para usar `OrbitControls`, necesitas importarlo desde el módulo `three/addons/controls/OrbitControls`.
 
 ```js
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method.
+Luego, necesitas extender el catálogo de componentes utilizando el método `extend`.
 
 ```js
 import { extend } from '@tresjs/core'
@@ -29,7 +29,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls'
 extend({ OrbitControls })
 ```
 
-Now you can use the `TresOrbitControls` component in your scene.
+Ahora puedes usar el componente `TresOrbitControls` en tu escena.
 
 ```vue
 <template>
@@ -46,9 +46,27 @@ Now you can use the `TresOrbitControls` component in your scene.
 </template>
 ```
 
-Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments.
+<script setup lang="ts">
+import { extend, useTres } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
 
-You can use the [useTres](/api/composables#usetres) composable to get the camera and the renderer.
+const { state } = useTres()
+</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>
 
 ```ts
 import { useTres } from '@tresjs/core'
@@ -56,7 +74,7 @@ import { useTres } from '@tresjs/core'
 const { state } = useTres()
 ```
 
-So the final code would be something like this:
+Entonces, el código final sería algo como esto:
 
 ```vue
 <script setup lang="ts">
@@ -82,13 +100,13 @@ const { state } = useTres()
 </template>
 ```
 
-## OrbitControls from `cientos`
+## OrbitControls de `cientos`
 
-Here is where the fancy part begins. ✨  
-The `cientos` package provides a component called `<OrbitControls />` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+Aquí es donde comienza la parte interesante. ✨  
+El paquete `cientos` proporciona un componente llamado `<OrbitControls />` que es un envoltorio de los `OrbitControls` del módulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
 
-The nicest part? You don't need to extend the catalog or pass any arguments.  
-It just works. 💯
+¿Lo mejor? No necesitas extender el catálogo ni pasar ningún argumento.  
+Simplemente funciona. 💯
 
 ```vue
 <template>

docs/examples/shaders.md

@@ -1,23 +1,23 @@
 # Shaders
 
-This guide will help you get started with shaders in TresJS.
+Esta guía te ayudará a comenzar con los shaders en TresJS.
 
-We will build a simple scene with a blob. We will then animate the blob to softly distorted it.
+Construiremos una escena simple con un blob. Luego alo animaremos para distorsionarlo suavemente.
 
 ::: warning
-_Basic knowledge of how shaders work is necessary_
+_Es necesario tener conocimientos básicos sobre cómo funcionan los shaders_
 :::
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
 
-## Setting up the scene (optional)
+## Configurando la escena (opcional)
 
-We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[look here to see how](/examples/orbit-controls).
+Importamos todos los módulos que necesitamos. Para mayor comodidad, podemos usar los orbit-controls de cientos.
+[Consulta aquí para ver cómo](/examples/orbit-controls).
 
-Now, let's put our camera in the `[11,11,11]` position.
+Ahora, coloquemos nuestra cámara en la posición `[11,11,11]`.
 
-Lastly just to help us with the location, let's add a simple plane, rotated in the X axis, with `[10, 10]` units.
+Por último, para ayudarnos con la ubicación, agreguemos un plano simple, rotado en el eje X, con una medida de `[10, 10]` unidades.
 
 ```vue
 <script setup lang="ts">
@@ -43,9 +43,9 @@ import { OrbitControls } from '@tresjs/cientos'
 
 ## ShaderMaterial
 
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs**, so is the `ShaderMaterial`, we just need to add the `Tres` prefix to use it.
+Como sabes, cada instancia en [ThreeJs](https://threejs.org/) está disponible en **TresJs**, por lo que también podemos usar el `ShaderMaterial`, solo necesitamos agregar el prefijo `Tres` para utilizarlo.
 
-For our blob, we could use a simple `SphereGeometry` adding some widthSegments and heightSegments to create a smooth effect, and put our blob 4 units in the Y positive axis
+Para nuestro blob, podríamos usar una simple `SphereGeometry` agregando algunos `widthSegments` y `heightSegments` para crear un efecto suave, y colocar nuestro blob 4 unidades en el eje Y positivo.
 
 ```vue
 <TresMesh :position="[0, 4, 0]">
@@ -54,9 +54,9 @@ For our blob, we could use a simple `SphereGeometry` adding some widthSegments a
 </TresMesh>
 ```
 
-The `ShaderMaterial` accepts special properties, like `uniforms` `vertexShader` and `fragmentShader`, so we can create it in our script section and make the bind with our instance.
+El `ShaderMaterial` acepta propiedades especiales, como `uniforms`, `vertexShader` y `fragmentShader`, por lo que podemos crearlo en nuestra sección de script y hacer la conexión con nuestra instancia.
 
-For this example, our uniforms look like this:
+Para este ejemplo, nuestros uniforms se ven así:
 
 ```ts
 import { Vector2 } from 'three'
@@ -70,7 +70,7 @@ const uniforms = {
 //..
 ```
 
-Our fragment shader looks like this:
+Nuestro fragment shader se ve así:
 
 ```ts
 //...
@@ -85,7 +85,7 @@ void main() {
 //..
 ```
 
-And lastly our vertexShader:
+Y finalmente nuestro `vertexShader`:
 
 ```ts
 const vertexShader = `
@@ -108,9 +108,9 @@ void main() {
 //..
 ```
 
-## Animating the blob
+## Animando el blob
 
-Similar to what we learn in the [Basic animations](/examples/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/examples/basic-animations), comenzamos haciendo referencia a nuestro blob utilizando [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">
@@ -139,7 +139,7 @@ const blobRef = shallowRef(null)
   </TresCanvas>
 </template>
 ```
- Once we have got that, we could use the `onLoop` callback to animate our `uTime`.
+Una vez que hayamos hecho eso, podemos usar el callback `onLoop` para animar nuestro `uTime`.
 
  ```ts
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
@@ -155,15 +155,15 @@ onLoop(({ elapsed }) => {
  //...
 ```
 
-And that it is, we have our basic shader running smoothly.
+Y eso es todo, tenemos nuestro shader básico funcionando sin problemas.
 
-## Using GLSL vite-pluging (optional)
+## Usando GLSL vite-plugin (opcional)
 
-_This step is completly optional and is out of the scope of the **TresJs** team_
+_Este paso es completamente opcional y está fuera del alcance del equipo de **TresJs**_
 
-Defining our shader inline is not always the best idea, but if you're using [vite](https://vitejs.dev/) you can put your `GLSL` files in a different file just by using the [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (check out the link for the official documentation).
+Definir nuestro shader en línea no siempre es la mejor idea, pero si estás utilizando [vite](https://vitejs.dev/), puedes colocar tus archivos `GLSL` en un archivo diferente utilizando el [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (consulta el enlace para obtener la documentación oficial).
 
-And you could have a structure similar to this:
+Y podrías tener una estructura similar a esta:
 
 ```
 ├── src/

docs/examples/text-3d.md

@@ -1,26 +1,26 @@
-# Text3D
+# Texto3D
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) is one of the ways we can add 3D text in our scene.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) es una de las formas en las que podemos agregar texto en 3D a nuestra escena.
 
 <SandboxDemo url="https://play.tresjs.org/#eNqdVlFv2zYQ/iuEgsEbZkuOnXSd5gxe7G5YsbRF7LcqD7RES0wokiApO0Hg/74jKduUkWbp8hCYdx+/O3684+k5Wiqi/5Ay3jQkSqOJzhWVBmliGokY5uVVFhmdRb9nnNZSKIOe0TXWNF9UuBDbGyz7aHH71/VMMKEWEuekjz6JpeAEXJLyEu3QWoka9UylCOn9FvDY0DPMN1gfQFMDtnud5EJ1sZ/VipqZ4EYJ9gKcEm6EDnYsyaNpQXFiF/aAvYxnPBdcG1QydIWeM45QzghWLv0U9c7ej+bXs8te33q0O6JOkVENcRbMZIVTtMZMe4OHwFGXT5Kkp8pYhGiMbCDzvTzpqVwWZI56pV35wL2DU00SfzFwDbAwpJYMGwIrhCaBjJvBivICrqxk7soQ/Dn/F6K0JLmhGzLDNVEYpVJoaqjggP466o/6v95lEUr2m7p6H8yLBmi49pE9uxX64E9OAC74nCobWnDM/qFlZbqxh3006qMLGz2l3MBmap7AcR6PwJRjbQZe5TbKJDkeGAyTJFADlto8MfuzMjUD8VaiePL3XGNVUp6iIciJkMRF4dT2y4rYxFJ0Phz+4AxbWpjqsN5l/AzuwxP9BxahFc4fSiUaXgxyX1dnw6GNAzRwkS7BqB/5Sh3UWMb3WnDoPkeftQ5outQHtLawMawjiypjpE6TJC847C8IoxsVc2ISLuskhE/H8WU8TAqqTWLNgM4iV3YdYt9C38PtdwD9u5C+NXejmC3BDxLzt+R+wE4v4mF83jLvjXFN7Z6Q2z4sb+G1uCkwXr6HfH8mug5lgOeh0eTN+gbw6fnQCQydRx7juqtui4MKVqT4DmK/4TVqAA4KUtM3kO6h9vAX8buE0VVIaRmhNHdQk0bD87im5UlF5qKWlBH1Wdqu7VYmZkxsPzrb4Z10eyqSP7xgv9ePPuUvUCxEbUDu41VCjxLj3R8Wn+BpCZy1KBrWXs43nLdEC9bYHD3sGnoQ0g5wLtu/XYNB+y/1h0f34rSH6iRq4El31q/7x+5Qa95w54RzeHcds1dUOp5sHI8Dwfej6XT2hvMW6sHCGkVenpPhSAXceP7N+biffjU2OcyslvQK4S2mJojzoztyb19UCm/jkpqqWQFEAQVoZmIoCvcUAz/WkLROakw5PMeOwq5sEJ38Ekte2ol699Prk6ydJuP5Xm/UnRSD8z6CaTGEUXFEKLK2nyiw75asQ8ca0gTP/zqD3auTP6nCM1FAVZUNw8r1RBjhMASR+5T5uDiu3dy7Ibq6cSLAf6IoZij1okBenSsIJ6/7WhnPu6Mt2v0LMkc7LA=="/>
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/TextGeometry` module.
+Sin embargo, no forma parte del núcleo de ThreeJS. Por lo tanto, para usarlo, tendrías que importarlo desde el módulo `three/addons/controls/TextGeometry`.
 
-This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
+Esto crea un problema porque **TresJS** crea automáticamente un catálogo del núcleo de Three para que puedas usarlos como componentes.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
+Afortunadamente, **TresJS** proporciona una forma de ampliar el catálogo de componentes. Puedes hacerlo utilizando el método `extend` de la biblioteca principal.
 
-For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
+Para obtener más información sobre cómo ampliar tu catálogo de TresJS, consulta la sección de [extending](/advanced/extending.md).
 
-## Using TextGeometry
+## Usando TextGeometry
 
-To use `TextGeometry` you need to import it from the `three/addons/geometries/TextGeometry` module.
+Para usar `TextGeometry`, debes importarlo desde el módulo `three/addons/geometries/TextGeometry`.
 
 ```js
 import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method.
+Luego, debes ampliar el catálogo de componentes utilizando el método `extend`.
 
 ```js
 import { extend } from '@tresjs/core'
@@ -29,7 +29,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 extend({ TextGeometry })
 ```
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) needs a only one required argument the font, you can see an example below.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) necesita solo un argumento requerido, la fuente. Puedes ver un ejemplo a continuación.
 
 ```js
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -48,7 +48,7 @@ const font = await new Promise((resolve, reject) => {
 })
 ```
 
-Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
+Ahora puedes usar el componente `TresTextGeometry` dentro de un TresMesh en tu escena.
 
 ```vue
 <template>
@@ -66,7 +66,7 @@ Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
 </template>
 ```
 
-then as in the example you can pass an object with the desired configurations.
+luego, como en el ejemplo, puedes pasar un objeto con las configuraciones deseadas.
 
 ```ts
 const fontOptions = {
@@ -81,7 +81,7 @@ const fontOptions = {
 }
 ```
 
-We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh
+También podemos pasar una matcapTexture para agregar detalles finales, utilizando TresMeshNormalMaterial dentro de TresMesh.
 
 ```ts
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
@@ -92,7 +92,7 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
   </TresMesh>
 ```
 
-So the final code would be something like this:
+Entonces, el código final sería algo como esto:
 
 ```vue
 <script setup lang="ts">
@@ -148,14 +148,14 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 </template>
 ```
 
-I know seems like a lot of work, but good news there is a much more simple way
+Sé que parece mucho trabajo, pero tengo buenas noticias, hay una forma mucho más sencilla.
 
-## TextGeometry from `cientos`
+## TextGeometry de `cientos`
 
-The `cientos` package provides a component called `<Text3D />` that is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+El paquete `cientos` proporciona un componente llamado `<Text3D />` que es un envoltorio de `TextGeometry` del módulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
 
-The nicest part? You don't need to extend the catalog and just pass the font argument.
-It just works. 💯 (if not text is provided, the text will be TresJS)
+¿Lo mejor? No necesitas extender el catálogo, solo pasa el argumento de la fuente.
+Simplemente funciona. 💯 (si no se proporciona un texto, el texto será TresJS)
 
 ```vue
 <template>
@@ -168,13 +168,13 @@ It just works. 💯 (if not text is provided, the text will be TresJS)
 </template>
 ```
 
-We can pass the options as props
+Podemos pasar las opciones como props
 
 ```html
 <Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
 ```
 
-in case the options are not provided the default values are:
+en caso de que no se proporcionen las opciones, los valores predeterminados son:
 
 ```js
 size: 0.5,
@@ -187,7 +187,7 @@ bevelOffset: 0,
 bevelSegments: 4,
 ```
 
-By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] the text will start there but we can center it by just passing the flag "center"
+De forma predeterminada, el texto en ThreeJS comienza en la posición inicial de la malla, por lo que si es [0,0,0], el texto comenzará allí, pero podemos centrarlo simplemente pasando la bandera "center".
 
 ```vue
 <Text3D :font="fontPath" :text="my 3d text" center />