Skip to content

Commit 3d5f277

Browse files
alvarosabualvarosabu
committed
docs: last pages spanish
1 parent 4983c28 commit 3d5f277

File tree

5 files changed

+109
-104
lines changed

5 files changed

+109
-104
lines changed

‎docs/es/api/events.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Events
22

3-
**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,...).
3+
**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, ...).
44

55
<StackBlitzEmbed project-id="tresjs-events" />
66

@@ -15,13 +15,13 @@
1515
/>
1616
```
1717

18-
| Event | fires when ... | Event Handler Parameter Type(s) |
18+
| Event | se dispara cuando ... | Tipo(s) de parámetro del controlador de eventos |
1919
| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
20-
| 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) |
21-
| 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) |
22-
| 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) |
23-
| pointer-leave | ... the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
20+
| 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) |
21+
| 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) |
22+
| 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) |
23+
| pointer-leave | ... el puntero sale del objeto | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
2424

25-
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`.
25+
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`.
2626

27-
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`.
27+
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

+43-37
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,125 @@
1-
# Instances
1+
# Instancias
22

3-
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.
3+
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.
44

5-
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:
5+
Cuando usas ThreeJS, necesitas importar los elementos que deseas utilizar. Por ejemplo, si quieres usar una `PerspectiveCamera`, necesitas importarla desde el paquete `three`:
66

77
```js
88
import { PerspectiveCamera } from 'three'
99

1010
const camera = new PerspectiveCamera(45, width / height, 1, 1000)
1111
```
1212

13-
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.
13+
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 />`.
1414

1515
```vue
1616
<template>
1717
<TresCanvas>
1818
<TresPerspectiveCamera />
19-
<!-- Your scene goes here -->
19+
<!-- Tu escena vive aqui -->
2020
</TresCanvas>
2121
</template>
2222
```
2323

24-
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.
24+
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.
2525

26-
## Declaring objects
26+
## Declarando objetos
2727

28-
If we follow this argument, you should be able to lay out an instance like this: ❌
28+
Si seguimos este argumento, deberías poder definir una instancia de esta manera: ❌
2929

3030
```vue
3131
<template>
3232
<TresCanvas>
33-
<TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
34-
<!-- Your scene goes here -->
33+
<TresPerspectiveCamera
34+
visible
35+
:position="new THREE.Vector3(1, 2, 3)"
36+
/>
37+
<!-- Tu escena vive aqui -->
3538
</TresCanvas>
3639
</template>
3740
```
3841

39-
But with **Tres** this is not needed, you can define properties declaratively like this: ✅
42+
Pero con **Tres** esto no es necesario, puedes definir las propiedades de forma declarativa de la siguiente manera: ✅
4043

4144
```vue
4245
<template>
4346
<TresCanvas>
44-
<TresPerspectiveCamera visible :position="[1, 2, 3]" />
45-
<!-- Your scene goes here -->
47+
<TresPerspectiveCamera
48+
visible
49+
:position="[1, 2, 3]"
50+
/>
51+
<!-- Tu escena vive aqui -->
4652
</TresCanvas>
4753
</template>
4854
```
4955

50-
## Arguments
56+
## Argumentos
5157

52-
Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
58+
Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los siguientes argumentos:
5359

54-
- `fov` - Camera frustum vertical field of view.
55-
- `aspect` - Camera frustum aspect ratio.
56-
- `near` - Camera frustum near plane.
57-
- `far` - Camera frustum far plane.
60+
- `fov` - Campo de visión vertical de la cámara.
61+
- `aspect` - Relación de aspecto del frustum de la cámara.
62+
- `near` - Plano cercano del frustum de la cámara.
63+
- `far` - Plano lejano del frustum de la cámara.
5864

59-
To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
65+
Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar la propiedad `args`:
6066

6167
```vue
6268
<template>
6369
<TresCanvas>
6470
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
65-
<!-- Your scene goes here -->
71+
<!-- Tu escena vive aqui -->
6672
</TresCanvas>
6773
</template>
6874
```
6975

70-
This is the same as doing this:
76+
Esto es lo mismo que hacer esto:
7177

7278
```ts
7379
const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
7480
```
7581

76-
## Props
82+
## Propiedades
7783

78-
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:
84+
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:
7985

8086
```html
8187
<TresAmbientLight :intensity="0.5" />
8288
```
8389

84-
### Set
90+
### Establecer
8591

86-
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:
92+
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:
8793

8894
```html
8995
<TresPerspectiveCamera :position="[1, 2, 3]" />
9096
```
9197

92-
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.
98+
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.
9399

94-
<!-- I changed color syntax from vue to html, because vue seems broken and does not color nested components -->
100+
<!-- Cambié la sintaxis de color de Vue a HTML, porque Vue parece estar roto y no colorea los componentes anidados -->
95101
```html
96102
<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
97103
<TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
98104
</TresMesh>
99105
```
100106

101107
::: warning
102-
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.
103-
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)
108+
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.
109+
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)
104110
:::
105111

106112
```vue
107113
<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
108114
109115
<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
110116
111-
<!-- Note that the order of the rotation properties matters, and swapping the order can result in different outcomes. -->
117+
<!-- Ten en cuenta que el orden de las propiedades de rotación importa y cambiar el orden puede dar lugar a resultados diferentes. -->
112118
```
113119

114-
### Scalar
120+
### Escalar
115121

116-
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:
122+
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:
117123

118124
```html
119125
<TresPerspectiveCamera :position="5" /> ✅
@@ -123,9 +129,9 @@ Another shortcut you can use is pass a scalar value to a property that expects a
123129
<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
124130
```
125131

126-
### Colors
132+
### Colores
127133

128-
You can pass colors to the components using the `color` prop, which accepts a string with the color name or a hex value:
134+
Puedes pasar colores a los componentes usando la propiedad `color`, la cual acepta un string con el nombre del color o un valor hexadecimal:
129135

130136
```html
131137
<TresAmbientLight color="teal" /> ✅
@@ -135,9 +141,9 @@ You can pass colors to the components using the `color` prop, which accepts a st
135141
<TresAmbientLight color="#008080" /> ✅
136142
```
137143

138-
### Methods
144+
### Métodos
139145

140-
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:
146+
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:
141147

142148
```html
143149
<TresPerspectiveCamera :look-at="[1, 2, 3]" />

0 commit comments

Comments
 (0)