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
Before we can create a Scene, we need somewhere to display it. Using plain[ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a`canvas`HTML element to mount the `WebglRenderer`and initialize the`scene`
13
+
Antes de poder crear una escena, necesitamos un lugar donde mostrarla. Usando solo[ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene), tendríamos que crear un elemento HTML`canvas`para montar el `WebglRenderer`e inicializar la`scene`.
14
14
15
-
With**TresJS** you only need to import the default component `<TresCanvas />`and add it to the template of your Vue component.
15
+
Con**TresJS**, solo necesitas importar el componente predeterminado `<TresCanvas />`y agregarlo al template de tu componente Vue.
16
16
17
17
```vue
18
18
<script lang="ts" setup>
@@ -27,17 +27,17 @@ import { TresCanvas } from '@tresjs/core'
27
27
```
28
28
29
29
::: warning
30
-
It's important that all components related to the scene live between the `<TresCanvas />` component. Otherwise, they will be not rendered.
30
+
Es importante que todos los componentes relacionados con la escena estén dentro del componente `<TresCanvas />`. De lo contrario, no se renderizarán.
31
31
:::
32
32
33
-
The `TresCanvas`component is going to do some setup work behind the scene:
33
+
El componente `TresCanvas`realizará algunas configuraciones detrás de escena:
34
34
35
-
-It creates a [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer)that automatically updates every frame.
36
-
-It sets the render loop to be called on every frame based on the browser refresh rate.
35
+
-Crea un [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer)que se actualiza automáticamente en cada fotograma.
36
+
-Establece el bucle de renderizado para que se llame en cada fotograma en función de la frecuencia de actualización del navegador.
37
37
38
-
## Canvas size
38
+
## Tamaño del lienzo
39
39
40
-
By default, `TresCanvas`component will take the **parent's width and height**, if you are experiencing a blank page make sure the parent element has a proper size.
40
+
De forma predeterminada, el componente `TresCanvas`tomará el **ancho y alto del elemento padre**. Si estás experimentando una página en blanco, asegúrate de que el elemento padre tenga un tamaño adecuado.
41
41
42
42
```vue
43
43
<script lang="ts" setup>
@@ -65,7 +65,7 @@ body {
65
65
</style>
66
66
```
67
67
68
-
If your scene is not gonna be part of a UI, you can also force the canvas to take the width and height of the full window by using the `window-size`prop like this:
68
+
Si tu escena no va a formar parte de una interfaz de usuario, también puedes hacer que el lienzo ocupe el ancho y alto de toda la ventana utilizando la propiedad `window-size`de la siguiente manera:
69
69
70
70
```vue
71
71
<script lang="ts" setup>
@@ -79,21 +79,21 @@ import { TresCanvas } from '@tresjs/core'
79
79
</template>
80
80
```
81
81
82
-
## Creating a scene
82
+
## Creando una escena
83
83
84
-
We need 4 core elements to create a 3D experience:
84
+
Necesitamos 4 elementos principales para crear una experiencia en 3D:
85
85
86
-
-A[**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene)to hold the camera and the object(s) together.
87
-
-A[**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer)to render the scene into the DOM.
With**TresJS** you only need to add the `<TresCanvas />`component to the template of your Vue component and it will automatically create a `Renderer` (`canvas` DOM Element) and `Scene` for you.
91
+
Con**TresJS**, solo necesitas agregar el componente `<TresCanvas />`al template de tu componente Vue y automáticamente creará un `Renderizador` (elemento DOM `canvas`) y una `Escena` para ti.
92
92
93
93
```vue
94
94
<template>
95
95
<TresCanvas window-size>
96
-
<!-- Your scene goes here -->
96
+
<!-- Tu escena vive aqui -->
97
97
</TresCanvas>
98
98
</template>
99
99
```
@@ -109,12 +109,12 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
109
109
```
110
110
111
111
::: warning
112
-
A common issue is that the camera default position is the origin of the scene (0,0,0), TresJS will automatically set the position of your camera to `[3,3,3]`if the prop`position`. If no camera is defined in you scene, a perspective camera is added automatically.`
112
+
Un problema común es que la posición predeterminada de la cámara es el origen de la escena (0,0,0). TresJS establecerá automáticamente la posición de tu cámara en `[3,3,3]`si la propiedad`position` no está definida. Si no se define ninguna cámara en tu escena, se agregará automáticamente una cámara de perspectiva.
113
113
:::
114
114
115
-
## Adding a 🍩
115
+
## Agregando un 🍩
116
116
117
-
That scene looks a little empty, let's add a basic object. If we were using plain**ThreeJS**we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh)object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material)and a[**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry)like this:
117
+
Esa escena se ve un poco vacía, vamos a agregar un objeto básico. Si estuviéramos usando**ThreeJS**puro, necesitaríamos crear un objeto [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh)y adjuntarle un [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material)y una[**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry)de la siguiente manera:
@@ -123,9 +123,9 @@ const donut = new THREE.Mesh(geometry, material)
123
123
scene.add(donut)
124
124
```
125
125
126
-
A**Mesh**is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
126
+
Un**Mesh**es un objeto básico de la escena en three.js, y se utiliza para contener la geometría y el material necesarios para representar una forma en el espacio 3D.
127
127
128
-
Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use`<TresMesh />`component, and between the default slots, we are going to pass a `<TresTorusGeometry />`and a`<TresMeshBasicMaterial />`.
128
+
Ahora veamos cómo podemos lograr lo mismo fácilmente con **TresJS**. Para hacer eso, vamos a usar el componente`<TresMesh />`y entre los slots predeterminados, vamos a pasar un `<TresTorusGeometry />`y un`<TresMeshBasicMaterial />`.
129
129
130
130
```vue
131
131
<template>
@@ -140,7 +140,7 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
140
140
```
141
141
142
142
::: info
143
-
Notice that we don't need to import anything, that's because **TresJS**automatically generate a**Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
143
+
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 />`.
144
144
:::
145
145
146
146
@@ -168,6 +168,6 @@ import { TresCanvas } from '@tresjs/core'
168
168
</template>
169
169
```
170
170
171
-
From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.
171
+
A partir de aquí puedes comenzar a agregar más objetos a tu escena y jugar con las propiedades de los componentes para ver cómo afectan la escena.
0 commit comments