docs: last pages spanish

docs/es/api/events.md

@@ -1,6 +1,6 @@
 # Events
 
-**TresJS** components emit pointer events when they are interacted with. This is the case for the components that represent three.js classes that derive from [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (like meshes, groups,...).
+**TresJS** los componentes emiten eventos de puntero cuando se interactúa con ellos. Esto es válido para los componentes que representan clases de three.js que derivan de [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (como mallas, grupos, ...).
 
 <StackBlitzEmbed project-id="tresjs-events" />
 
@@ -15,13 +15,13 @@
 />
 ```
 
-| Event         | fires when ...                                                                        | Event Handler Parameter Type(s)                                                                                                                                                                       |
+| Event         | se dispara cuando ...                                                                 | Tipo(s) de parámetro del controlador de eventos                                                                                                                                                                       |
 | ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-move  | ... the pointer is moving above the object                                            | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-enter | ... the pointer is entering the object                                                | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
-| pointer-leave | ... the pointer is leaves the object                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |
+| click         | ... los eventos pointerdown y pointerup se disparan en el mismo objeto uno tras otro | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-move  | ... el puntero se mueve sobre el objeto                                               | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-enter | ... el puntero entra en el objeto                                                     | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-leave | ... el puntero sale del objeto                                                        | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent)                                                                                                                         |
 
-The returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) includes the [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) that triggered the event. You can access it via `intersection.object`.
+La [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) devuelta incluye el [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) que desencadenó el evento. Puedes acceder a él a través de `intersection.object`.
 
-By default, objects positioned in front of others with event handlers do not prevent those events from being triggered. This behavior can be achieved by using the prop `blocks-pointer-events`.
+De forma predeterminada, los objetos posicionados delante de otros con controladores de eventos no evitan que se disparen esos eventos. Este comportamiento se puede lograr utilizando la propiedad `blocks-pointer-events`.

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

@@ -1,8 +1,8 @@
-# Instances
+# Instancias
 
-The core idea of **Tres** is an _autogenerated catalogue_ of all the ThreeJS elements. This catalogue is generated from the ThreeJS source code, so it's always up to date.
+La idea principal de **Tres** es un _catálogo autogenerado_ de todos los elementos de ThreeJS. Este catálogo se genera a partir del código fuente de ThreeJS, por lo que siempre está actualizado.
 
-When using ThreeJS, you need to import the elements you want to use. For example, if you want to use a `PerspectiveCamera`, you need to import it from the `three` package:
+Cuando usas ThreeJS, necesitas importar los elementos que deseas utilizar. Por ejemplo, si quieres usar una `PerspectiveCamera`, necesitas importarla desde el paquete `three`:
 
 ```js
 import { PerspectiveCamera } from 'three'
@@ -10,88 +10,94 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
+Con **Tres** no necesitas importar nada, esto se debe a que **Tres** 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 `PerspectiveCamera`, puedes usar el componente `<TresPerspectiveCamera />`.
 
 ```vue
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-This means that you can use the same [documentation](https://threejs.org/docs/) as you would when using plain ThreeJS, but with the power of Vue.
+Esto significa que puedes utilizar la misma [documentación](https://threejs.org/docs/) que usarías al utilizar ThreeJS básico, pero con el poder de Vue.
 
-## Declaring objects
+## Declarando objetos
 
-If we follow this argument, you should be able to lay out an instance like this: ❌
+Si seguimos este argumento, deberías poder definir una instancia de esta manera: ❌
 
 ```vue
 <template>
   <TresCanvas>
-    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
-    <!-- Your scene goes here -->
+    <TresPerspectiveCamera
+      visible
+      :position="new THREE.Vector3(1, 2, 3)"
+    />
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-But with **Tres** this is not needed, you can define properties declaratively like this: ✅
+Pero con **Tres** esto no es necesario, puedes definir las propiedades de forma declarativa de la siguiente manera: ✅
 
 ```vue
 <template>
   <TresCanvas>
-    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
-    <!-- Your scene goes here -->
+    <TresPerspectiveCamera
+      visible
+      :position="[1, 2, 3]"
+    />
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-## Arguments
+## Argumentos
 
-Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
+Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los siguientes argumentos:
 
-- `fov` - Camera frustum vertical field of view.
-- `aspect` - Camera frustum aspect ratio.
-- `near` - Camera frustum near plane.
-- `far` - Camera frustum far plane.
+- `fov` - Campo de visión vertical de la cámara.
+- `aspect` - Relación de aspecto del frustum de la cámara.
+- `near` - Plano cercano del frustum de la cámara.
+- `far` - Plano lejano del frustum de la cámara.
 
-To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
+Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar la propiedad `args`:
 
 ```vue
 <template>
   <TresCanvas>
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-This is the same as doing this:
+Esto es lo mismo que hacer esto:
 
 ```ts
 const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
 ```
 
-## Props
+## Propiedades
 
-You can also pass props to the component, for example, the `TresAmbientLight` has a `intensity` property, so you can pass it to the component like this:
+También puedes pasar propiedades al componente, por ejemplo, el `TresAmbientLight` tiene una propiedad `intensity`, por lo que puedes pasarla al componente de la siguiente manera:
 
 ```html
 <TresAmbientLight :intensity="0.5" />
 ```
 
-### Set
+### Establecer
 
-All properties whose underlying object has a `.set()` method have a shortcut to receive the value as an array. For example, the `TresPerspectiveCamera` has a `position` property, which is a `Vector3` object, so you can pass it to the component like this:
+Todas las propiedades cuyo objeto subyacente tiene un método `.set()` tienen un atajo para recibir el valor como un array. Por ejemplo, el `TresPerspectiveCamera` tiene una propiedad `position`, que es un objeto `Vector3`, por lo que puedes pasarlo al componente de esta manera:
 
 ```html
 <TresPerspectiveCamera :position="[1, 2, 3]" />
 ```
 
-To specify transformation properties such as position, rotation, and scale, a shorthand is available that allows you to directly indicate the axis you wish to set within the props. A similar shorthand is also available for color property.
+Para especificar propiedades de transformación como posición, rotación y escala, hay una forma abreviada disponible que te permite indicar directamente el eje que deseas establecer dentro de las propiedades. Una forma abreviada similar también está disponible para la propiedad de color.
 
-<!-- I changed color syntax from vue to html, because vue seems broken and does not color nested components -->
+<!-- Cambié la sintaxis de color de Vue a HTML, porque Vue parece estar roto y no colorea los componentes anidados -->
 ```html
 <TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
   <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
@@ -99,8 +105,8 @@ To specify transformation properties such as position, rotation, and scale, a sh
 ```
 
 ::: warning
-When you set the rotation property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), it will use the 'XYZ' order by default.
-It is important to note that when setting the rotation property with the shorthand, the order in which you set the angles matters. For more information on this topic, please refer to  [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
+Cuando estableces la propiedad de rotación en [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), se utilizará el orden 'XYZ' de forma predeterminada.
+Es importante tener en cuenta que al establecer la propiedad de rotación con la forma abreviada, el orden en el que estableces los ángulos importa. Para obtener más información sobre este tema, consulta [Ángulos de Euler](https://es.wikipedia.org/wiki/%C3%81ngulos_de_Euler)
 :::
 
 ```vue
@@ -108,12 +114,12 @@ It is important to note that when setting the rotation property with the shortha
 
 <TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
 
-<!-- Note that the order of the rotation properties matters, and swapping the order can result in different outcomes. -->
+<!-- Ten en cuenta que el orden de las propiedades de rotación importa y cambiar el orden puede dar lugar a resultados diferentes. -->
 ```
 
-### Scalar
+### Escalar
 
-Another shortcut you can use is pass a scalar value to a property that expects a `Vector3` object, using the same value for the rest of the Vector:
+Otro atajo que puedes usar es pasar un valor escalar a una propiedad que espera un objeto `Vector3`, usando el mismo valor para el resto del vector:
 
 ```html
 <TresPerspectiveCamera :position="5" /> ✅
@@ -123,9 +129,9 @@ Another shortcut you can use is pass a scalar value to a property that expects a
 <TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
 ```
 
-### Colors
+### Colores
 
-You can pass colors to the components using the `color` prop, which accepts a string with the color name or a hex value:
+Puedes pasar colores a los componentes usando la propiedad `color`, la cual acepta un string con el nombre del color o un valor hexadecimal:
 
 ```html
 <TresAmbientLight color="teal" /> ✅
@@ -135,9 +141,9 @@ You can pass colors to the components using the `color` prop, which accepts a st
 <TresAmbientLight color="#008080" /> ✅
 ```
 
-### Methods
+### Métodos
 
-Some underlying properties are actually methods, the `TresPerspectiveCamera` has a `lookAt` method inherit from [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), so you can pass it the coords to the component like this:
+Algunas propiedades subyacentes son en realidad métodos, el `TresPerspectiveCamera` tiene un método `lookAt` heredado de [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), por lo que puedes pasarle las coordenadas al componente de esta manera:
 
 ```html
 <TresPerspectiveCamera :look-at="[1, 2, 3]" />

docs/es/api/tres-canvas.md

@@ -1,24 +1,24 @@
 # TresCanvas
 
-The `TresCanvas` component is the main component of Tres. It's the one that creates the ThreeJS `WebGLRenderer`.
+El componente `TresCanvas` es el componente principal de Tres. Es el que crea el `WebGLRenderer` de ThreeJS.
 
 ```vue{2,5}
 <template>
   <TresCanvas shadows :output-encoding="SRGBColorSpace">
     <TresPerspectiveCamera />
-      <!-- Your scene goes here -->
+      <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
 
-## Canvas size
+## Tamaño del lienzo
 
-The `TresCanvas` component will use the parent element size as the canvas size. If you want to use the window size as the canvas size, you can set the `window-size` prop to `true`.
+El componente `TresCanvas` utilizará el tamaño del elemento padre como tamaño del lienzo. Si deseas utilizar el tamaño de la ventana como tamaño del lienzo, puedes establecer la propiedad `window-size` en `true`.
 
 ```vue
 <template>
   <TresCanvas window-size>
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
@@ -41,16 +41,16 @@ body {
 
 ## Presets
 
-Tres comes with a few presets for the `TresCanvas` component. You can use them by setting the `preset` prop.
+Tres viene con algunos presets para el componente `TresCanvas`. Puedes usarlos estableciendo la propiedad `preset`.
 
-### Realistic
+### Realista
 
-The `realistic` preset makes easy to setup the renderer for more realistic 3D scenes.
+El preset `realista` facilita la configuración del renderizador para escenas 3D más realistas.
 
 ```vue
 <template>
   <TresCanvas preset="realistic">
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
@@ -69,36 +69,37 @@ renderer.shadowMap.type = PCFSoftShadowMap
 
 ## Props
 
-| Prop | Description | Default |
+| Prop | Descripción | Valor por defecto |
 | ---- | ---- | --- |
-| **alpha** | Controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. | false |
-| **antialias** | Whether to perform antialiasing. | `true` |
-| **camera** | A manual camera to be used by the renderer. | |
-| **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
-| **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
-| **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
-| **disableRender** | Disable render on requestAnimationFrame, useful for PostProcessing | `false` |
-| **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
-| **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` |
-| **outputColorSpace** | Defines the output encoding | `LinearEncoding` |
-| **powerPreference** | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default". | `default` |
-| **precision** | Shader precision. Can be "highp", "mediump" or "lowp". | "highp" if supported by the device |
-| **premultipliedAlpha** | Whether the renderer will assume that colors have [premultiplied alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
-| **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` |
-| **shadows** | Enable shadows in the renderer | `false` |
-| **shadowMapType** | Set the shadow map type | `PCFSoftShadowMap` |
-| **stencil** | Whether the drawing buffer has a [stencil buffer](https://en.wikipedia.org/wiki/Stencil_buffer) of at least 8 bits. | `true` |
-| **toneMapping** | Defines the tone mapping exposure used by the renderer. | `NoToneMapping` |
-| **toneMappingExposure** | Exposure level of tone mapping. | `1` |
-| **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
-| **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
-
-### Defaults
-
-Tres tries to be as little opinionated as possible. That's why it doesn't set almost any default value for the `TresCanvas` component. It uses the defaults from [three.js](https://threejs.org/). The only exception is the `antialias` prop. It's set to `true` by default.
-
-## Exposed public properties
-
-| Property | Description |
+| **alpha** | Controla el valor alfa predeterminado. Cuando se establece en true, el valor es 0. De lo contrario, es 1. | false |
+| **antialias** | Indica si se debe realizar el antialiasing. | `true` |
+| **camera** | Una cámara manual que se utilizará por el renderizador. | |
+| **clearColor** | El color que el renderizador utilizará para borrar el lienzo. | `#000000` |
+| **context** | Esto se puede usar para adjuntar el renderizador a un [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) existente. | |
+| **depth** | Indica si el búfer de dibujo tiene un [búfer de profundidad](https://en.wikipedia.org/wiki/Z-buffering) de al menos 16 bits. | `true` |
+| **disableRender** | Desactiva el renderizado en requestAnimationFrame, útil para PostProcessing. | `false` |
+| **failIfMajorPerformanceCaveat** | Indica si la creación del renderizador fallará si se detecta un bajo rendimiento. Consulta la [especificación de WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) para más detalles. | `false` |
+| **logarithmicDepthBuffer** | Indica si se debe utilizar un búfer de profundidad logarítmico. Puede ser necesario utilizar esto si se manejan diferencias enormes de escala en una sola escena. Ten en cuenta que esta configuración utiliza gl_FragDepth si está disponible, lo cual deshabilita la optimización [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) y puede causar una disminución en el rendimiento. | `false` |
+| **outputColorSpace** | Define la codificación de salida. | `LinearEncoding` |
+| **powerPreference** | Proporciona una sugerencia al agente de usuario que indica qué configuración de GPU es adecuada para este contexto WebGL. Puede ser "high-performance", "low-power" o "default". | `default` |
+| **precision** | Precisión del shader. Puede ser "highp", "mediump" o "lowp". | "highp" si es compatible con el dispositivo |
+| **premultipliedAlpha** | Indica si el renderizador asumirá que los colores tienen [alfa premultiplicado](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
+| **preserveDrawingBuffer** | Indica si se deben preservar los búferes hasta que se borren o se sobrescriban manualmente. | `false` |
+| **shadows** | Habilita las sombras en el renderizador. | `false` |
+| **shadowMapType** | Establece el tipo de mapa de sombras. | `PCFSoftShadowMap` |
+| **stencil** | Indica si el búfer de dibujo tiene un [búfer de stencil](https://en.wikipedia.org/wiki/Stencil_buffer) de al menos 8 bits. | `true` |
+| **toneMapping** | Define la exposición de mapeo de tonos utilizada por el renderizador. | `NoToneMapping` |
+| **toneMappingExposure** | Nivel de exposición del mapeo de tonos. | `1` |
+| **useLegacyLights** | Indica si se debe utilizar el modo de iluminación heredado o no. | `true` |
+| **windowSize** | Indica si se debe utilizar el tamaño de la ventana como el tamaño del lienzo o el elemento padre. | `false` |
+
+### Valores predeterminados
+
+Tres intenta ser lo menos opinado posible. Es por eso que no establece casi ningún valor predeterminado para el componente `TresCanvas`. Utiliza los valores predeterminados de [three.js](https://threejs.org/). La única excepción es la propiedad `antialias`, que se establece en `true` de forma predeterminada.
+
+## Propiedades públicas expuestas
+
+| Propiedad | Descripción |
 | ---- | ---- |
-| context | see [useTresContext](composables#usetrescontext) |
+| context | ver [useTresContext](composables#usetrescontext) |
+

docs/es/debug/devtools.md

@@ -1,28 +1,26 @@
-# Devtools
+# Herramientas de desarrollo
 
+Una de las cosas más difíciles a las que se enfrenta un desarrollador al crear experiencias 3D en el navegador es la depuración. El `canvas` del navegador es una caja negra y es difícil saber qué está sucediendo en su interior. La naturaleza imperativa de [ThreeJS](https://threejs.org/) hace que sea increíblemente difícil depurar, teniendo que depender de `console.log` para ver qué está sucediendo, o de terceros para ajustar y inspeccionar la escena.
 
+No me hagas empezar con la comprobación del rendimiento de tu escena. 😱
 
-One of the most difficult things a developer faces when creating 3D experiences on the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. The imperative nature of [ThreeJS](https://threejs.org/) makes it incredibly difficult to debug, having to depend on `console.log` to see what's going on, or third party to fine-tune and inspect the scene.
+![desarrollador depurando 3D](/debug-3D.png)
 
-Don't make me get started with checking the performance of your scene. 😱
+Uno de nuestros objetivos con TresJS es ofrecer **la mejor experiencia de desarrollo (DX, por sus siglas en inglés)** al trabajar con escenas 3D en el navegador. Gracias a la naturaleza declarativa del ecosistema y a la variedad de soluciones que ofrece el ecosistema de Vue, como Vue Devtools, Nuxt y Vite, podemos ofrecer mejores herramientas para que los desarrolladores depuren sus escenas.
 
-![developer debugging 3D](/debug-3D.png)
+## Presentando las Herramientas de Desarrollo
 
-One of our goals with TresJS is to offer **the best DX (Developer Experience)** when dealing with 3D scenes on the browser. Thanks to the declarative nature of the ecosystem plus the variety of solutions the Vue ecosystem offers such as the Vue Devtools, Nuxt and Vite, we can offer a better tooling for devs to debug their scenes.
+A partir de la versión <Badge text="^3.7.0" />, estamos introduciendo las Herramientas de Desarrollo de TresJS, una pestaña de inspector personalizada para las [Herramientas de Desarrollo de Chrome oficiales de Vue](https://devtools.vuejs.org/guide/installation.html) que te permite inspeccionar tus escenas y componentes de TresJS.
 
-## Introducing the Devtools
+![Herramientas de Desarrollo de TresJS](/vue-chrome-devtools.png)
 
-From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customized inspector tab for the [Official Vue Chrome Devtools](https://devtools.vuejs.org/guide/installation.html) that allows you to inspect your TresJS scenes and components.
+### Características
 
-![TresJS Devtools](/vue-chrome-devtools.png)
-
-### Features
-
-- **Scene Inspector**: Inspect the current scene and its components using a tree view similar to the Vue Devtools component inspector.
-- **Memory Allocation**: See how much memory is being by the components.
-- **Object Inspector**: Inspect the properties of the selected object in the scene, including its children.
-- **Editable Properties**: And yes, you can edit the properties of the selected object and see the changes in real-time.
+- **Inspector de Escena**: Inspecciona la escena actual y sus componentes utilizando una vista en árbol similar al inspector de componentes de Vue Devtools.
+- **Asignación de Memoria**: Muestra cuánta memoria está utilizando cada componente.
+- **Inspector de Objetos**: Inspecciona las propiedades del objeto seleccionado en la escena, incluidos sus hijos.
+- **Propiedades Editables**: Y sí, puedes editar las propiedades del objeto seleccionado y ver los cambios en tiempo real.
 
 ![](/devtools-scene-inspector.png)
 
-Enjoy the new Devtools and let us know what you think! 🎉
+¡Disfruta de las nuevas Herramientas de Desarrollo y dinos qué opinas! 🎉

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

@@ -21,7 +21,7 @@ import { TresCanvas } from '@tresjs/core'
 
 <template>
   <TresCanvas window-size>
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```
@@ -46,7 +46,7 @@ import { TresCanvas } from '@tresjs/core'
 
 <template>
   <TresCanvas>
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 
@@ -74,7 +74,7 @@ import { TresCanvas } from '@tresjs/core'
 
 <template>
   <TresCanvas window-size>
-    <!-- Your scene goes here -->
+    <!-- Tu escena vive aqui -->
   </TresCanvas>
 </template>
 ```