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
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.
11
+
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.
12
12
13
-
To see a detailed explanation of how it works, please refer to the[useRenderLoop](/api/composables#userenderloop) documentation.
13
+
Para obtener una explicación detallada de cómo funciona, consulta la documentación de[useRenderLoop](/api/composables#userenderloop).
14
14
15
15
```ts
16
16
const { onLoop } =useRenderLoop()
17
17
18
18
onLoop(({ delta, elapsed }) => {
19
-
//I will run at every frame ~ 60FPS (depending of your monitor)
19
+
//Se ejecutará en cada fotograma ~ 60FPS (dependiendo de tu monitor)
20
20
})
21
21
```
22
22
23
-
## Getting the reference to the cube
23
+
## Obteniendo la referencia al cubo
24
24
25
-
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.
25
+
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.
26
26
27
-
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)
27
+
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)
We can be tempted to use reactivity to animate the cube. But it would be a bad idea.
83
-
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.
82
+
Podemos sentirnos tentados a usar la reactividad para animar el cubo. Pero sería una mala idea.
83
+
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.
84
84
85
-
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.
85
+
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.
Copy file name to clipboardexpand all lines: docs/es/examples/groups.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
# Group
1
+
# Grupo
2
2
3
-
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).
3
+
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).
We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
11
-
[check here to know how](/examples/orbit-controls).
11
+
Importamos todos los módulos que necesitamos, para mayor comodidad podemos usar orbit-controls de cientos,
12
+
[ver aquí para saber cómo](/examples/orbit-controls).
12
13
13
-
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.
14
+
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.
14
15
15
-
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.
16
+
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".
16
17
17
18
```vue
18
19
<script setup lang="ts">
@@ -58,27 +59,27 @@ import { OrbitControls } from '@tresjs/cientos'
58
59
</template>
59
60
```
60
61
61
-
## Lights (explanation)
62
+
## Luces (explicación)
62
63
63
-
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.
64
+
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.
64
65
65
-
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.
66
+
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.
66
67
67
-
## Shadows (explanation)
68
+
## Sombras (explicación)
68
69
69
-
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.
70
+
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.
70
71
71
-
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.
72
+
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.
72
73
73
74
::: warning
74
-
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)
75
+
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)
75
76
:::
76
77
77
-
## Enabling shadows
78
+
## Habilitando las sombras
78
79
79
-
We could divide this into three steps:
80
+
Podemos dividir esto en tres pasos:
80
81
81
-
### Activate shadows on the renderer
82
+
### Activar las sombras en el renderizador
82
83
83
84
```vue
84
85
//...
@@ -92,11 +93,11 @@ We could divide this into three steps:
92
93
//...
93
94
</template>
94
95
```
95
-
### Set the light to cast shadows
96
+
### Configurar la luz para proyectar sombras
96
97
97
-
We can simple put the boolean `cast-shadow`, Vue understand this as a`prop`with `true` value
98
+
Podemos simplemente agregar el booleano `cast-shadow`, Vue lo interpreta como una`prop`con valor `true`.
98
99
99
-
_The AmbientLight doesn't generate any type of shadow here_
100
+
_La luz ambiental no genera ningún tipo de sombra aquí_
100
101
101
102
```vue
102
103
//...
@@ -112,9 +113,9 @@ _The AmbientLight doesn't generate any type of shadow here_
112
113
//...
113
114
</template>
114
115
```
115
-
### Set the objects to cast or receive shadows
116
+
### Establecer los objetos para proyectar o recibir sombras
116
117
117
-
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.
118
+
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`.
118
119
119
120
```vue
120
121
//...
@@ -139,7 +140,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
139
140
</template>
140
141
```
141
142
142
-
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 🤩
143
+
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 🤩
143
144
144
145
```vue
145
146
<script setup>
@@ -171,4 +172,4 @@ onLoop(() => {
171
172
</template>
172
173
```
173
174
174
-
_Note that I intentionally did not apply `cast-shadow`to the `Cone`so it doesn't cast any shadow_
175
+
_Nota que intencionalmente no apliqué `cast-shadow`al `Cone`para que no proyecte ninguna sombra_
0 commit comments