You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/es/api/composables.md
+54-54
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,13 @@
2
2
3
3
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.
4
4
5
-
**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.).
5
+
**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.).
6
6
7
-
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.
7
+
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.
8
8
9
9
## useRenderLoop
10
10
11
-
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**.
11
+
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**.
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.
22
+
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.
23
23
:::
24
24
25
-
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):
25
+
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):
26
26
27
-
-`delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
28
-
-`elapsed`: The elapsed time since the start of the render loop.
27
+
-`delta`: El tiempo transcurrido entre el fotograma actual y el último fotograma. Este es el tiempo en segundos desde el último fotograma.
28
+
-`elapsed`: El tiempo transcurrido desde el inicio del bucle de renderizado.
29
29
30
-
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.
30
+
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.
31
31
32
-
### Before and after render
32
+
### Antes y después de renderizar
33
33
34
-
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.
34
+
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.
//I will run before the renderer updates the scene
40
+
//Se ejecutara antes del renderizado de la escena
41
41
fps.begin()
42
42
})
43
43
44
44
onAfterLoop(({ delta, elapsed }) => {
45
-
//I will run after the renderer updates the scene
45
+
//Se ejecutara después del renderizado de la escena
46
46
fps.end()
47
47
})
48
48
```
49
49
50
-
### Pause and resume
50
+
### Pausar y reanudar
51
51
52
-
You can pause and resume the render loop using the exposed`pause`and`resume`methods.
52
+
Puedes pausar y reanudar el bucle de renderizado utilizando los métodos`pause`y`resume`expuestos.
53
53
54
54
```ts
55
55
const { pause, resume } =useRenderLoop()
56
56
57
-
//Pause the render loop
57
+
//Pausa el bucle de renderizado
58
58
pause()
59
59
60
-
//Resume the render loop
60
+
//Reanuda el bucle de renderizado
61
61
resume()
62
62
```
63
63
64
-
Also you can get the active state of the render loop using the`isActive` property.
64
+
También puedes obtener el estado activo del bucle de renderizado utilizando la propiedad`isActive`.
65
65
66
66
```ts
67
67
const { resume, isActive } =useRenderLoop()
@@ -75,15 +75,15 @@ console.log(isActive) // true
75
75
76
76
## useLoader
77
77
78
-
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.
78
+
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.
const { scene } =awaituseLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
84
84
```
85
85
86
-
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.
86
+
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.
87
87
88
88
```vue
89
89
<template>
@@ -95,24 +95,24 @@ Since the `useLoader` composable returns a promise, you can use it with `async/a
95
95
96
96
## useTexture
97
97
98
-
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).
98
+
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).
**useTexture**also accepts an object with the following properties:
104
+
**useTexture**también acepta un objeto con las siguientes propiedades:
105
105
106
-
-`map`: a basic texture that is applied to the surface of an object
107
-
-`displacementMap`: a texture that is used to add bumps or indentations to the object's surface
108
-
-`normalMap`: a texture that is used to add surface detail to and variations in shading to the object
109
-
-`roughnessMap`: a texture that is used to add roughness or a matte finish to the object's surface
110
-
-`metalnessMap`: a texture that is used to add a metallic effect to the object's surface
111
-
-`aoMap`: a texture that is used to add ambient occlusion (shading in areas where light is blocked by other objects) to the object.
112
-
-`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
113
-
-`matcap`: this textures encodes the material color and shading.
106
+
-`map`: una textura básica que se aplica a la superficie de un objeto
107
+
-`displacementMap`: una textura que se utiliza para agregar protuberancias o indentaciones a la superficie del objeto
108
+
-`normalMap`: una textura que se utiliza para agregar detalles de superficie y variaciones en el sombreado al objeto
109
+
-`roughnessMap`: una textura que se utiliza para agregar rugosidad o un acabado mate a la superficie del objeto
110
+
-`metalnessMap`: una textura que se utiliza para agregar un efecto metálico a la superficie del objeto
111
+
-`aoMap`: una textura que se utiliza para agregar oclusión ambiental (sombreado en áreas donde la luz es bloqueada por otros objetos) al objeto.
112
+
-`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.
113
+
-`matcap`: esta textura codifica el color y el sombreado del material.
114
114
115
-
In that case it will return an object with the loaded textures.
115
+
En ese caso, devolverá un objeto con las texturas cargadas.
@@ -148,23 +148,23 @@ Then you can bind the textures to the material.
148
148
</template>
149
149
```
150
150
151
-
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.
151
+
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`.
152
152
153
153
## useSeek
154
154
155
-
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.
155
+
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.
-`property`: The property to be used in the search condition.
165
-
-`value`: The value of the property to match.
163
+
-`parent`: Una escena ThreeJS u Object3D.
164
+
-`property`: La propiedad que se utilizará en la condición de búsqueda.
165
+
-`value`: El valor de la propiedad a coincidir.
166
166
167
-
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.
167
+
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.
168
168
169
169
```ts
170
170
const carRef =ref(null)
@@ -179,7 +179,7 @@ watch(carRef, ({ model }) => {
179
179
})
180
180
```
181
181
182
-
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.
182
+
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.
183
183
184
184
```ts
185
185
const character =ref(null)
@@ -192,15 +192,15 @@ watch(character, ({ model }) => {
192
192
```
193
193
194
194
## useTresContext
195
-
This composable aims to provide access to the state model which contains multiple useful properties.
195
+
Este composable tiene como objetivo proporcionar acceso al modelo de estado que contiene múltiples propiedades útiles.
`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.
203
+
`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.
|**deregisterCamera**|a method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
229
-
|**extend**|Extends the component catalogue. See[extending](/advanced/extending)|
230
-
|**raycaster**|the global raycaster used for pointer events|
231
-
|**registerCamera**|a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
232
-
|**renderer**|the[WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer)of your scene|
|**setCameraActive**|a method to set a camera active|
235
-
|**sizes**|contains width, height and aspect ratio of your canvas|
225
+
|**camera**|la cámara actualmente activa|
226
+
|**cameras**|las cámaras que existen en la escena|
227
+
|**controls**|los controles de tu escena|
228
+
|**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. |
229
+
|**extend**|Extiende el catálogo de componentes. Ver[extending](/advanced/extending)|
230
+
|**raycaster**|el raycaster global utilizado para eventos de puntero|
231
+
|**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. |
232
+
|**renderer**|el[WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer)de tu escena|
0 commit comments