Skip to content

Commit a96a993

Browse files
committed
feat: translate "Load Models"
1 parent 8af37ca commit a96a993

File tree

1 file changed

+26
-25
lines changed

1 file changed

+26
-25
lines changed

docs/de/examples/load-models.md

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
# Cargar Modelos
1+
# Modelle laden
22

3-
> Todos los modelos utilizados en esta guía son de [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
3+
> Alle Modelle, die in dieser Anleitung verwendet werden, stammen von [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
44
5-
Los modelos 3D están disponibles en cientos de formatos de archivo, cada uno con diferentes propósitos, características variadas y complejidad variable.
5+
3D-Modelle sind in Hunderten von Dateiformaten verfügbar, jedes mit unterschiedlichen Zwecken, variierenden Eigenschaften und Komplexität.
66

7-
Para esta guía, nos vamos a centrar en cargar modelos gLTF (GL Transmission Format), que son el formato más común para modelos 3D en la web.
7+
In dieser Anleitung konzentrieren wir uns auf das Laden von gLTF-Modellen (GL Transmission Format), dem häufigsten Format für 3D-Modelle im Web.
88

99
<SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
1010

11-
Hay varias formas de cargar modelos en TresJS:
11+
Es gibt verschiedene Möglichkeiten, Modelle in TresJS zu laden:
12+
1213

1314
::: warning
14-
Por favor, ten en cuenta que en los ejemplos anteriores utilizamos el await de nivel superior, asegúrate de envolverlo con un componente [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense). Consulta Suspense para obtener más información.
15+
Bitte beachte, dass wir in den vorherigen Beispielen das oberste Level `await` verwendet haben, stelle sicher, dass du es mit einer [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense)-Komponente umgibst. Siehe Suspense für mehr Informationen.
1516
:::
1617

17-
## Usando `useLoader`
18+
## Verwendung von `useLoader`
1819

19-
El composable `useLoader` te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Devuelve una `Promise` con el recurso cargado.
20+
Das Composable `useLoader` ermöglicht es dir, jeden Typ von three.js-Loader und eine URL zum Laden der Ressource zu übergeben. Es gibt ein `Promise` mit der geladenen Ressource zurück.
2021

21-
Para obtener una explicación detallada de cómo usar `useLoader`, consulta la documentación de [useLoader](/api/composables#useloader).
22+
Für eine detaillierte Erklärung, wie `useLoader` verwendet wird, siehe die Dokumentation von [useLoader](/api/composables#useloader).
2223

2324
```ts
2425
import { useLoader } from '@tresjs/core'
@@ -27,37 +28,37 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
2728
const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
2829
```
2930

30-
Luego puedes pasar la escena del modelo a un componente [`primitive`](/advanced/primitive) de TresJS para renderizarlo:
31+
Dann kannst du die Szene des Modells in einer [`primitive`](/de/advanced/primitive)-Komponente von TresJS übergeben, um es zu rendern:
3132

3233
```html{2}
3334
<TresCanvas>
3435
<primitive :object="scene" />
3536
</TresCanvas>
3637
```
3738

38-
> El componente `<primitive />` no es un componente independiente en el código fuente de Tres. En su lugar, es parte de la funcionalidad principal de Tres. Cuando usas `<primitive>`, se traduce a una llamada a `createElement`, que crea el objeto three.js adecuado según la propiedad "object" proporcionada.
39+
> Die Komponente `<primitive />` ist keine eigenständige Komponente im Quellcode von Tres. Stattdessen ist sie Teil der Kernfunktionalität von Tres. Wenn du `<primitive>` verwendest, wird dies zu einem Aufruf von `createElement`, der das entsprechende three.js-Objekt basierend auf der bereitgestellten "object"-Eigenschaft erstellt.
3940
40-
Observa en el ejemplo anterior que estamos utilizando el componente `Suspense` para envolver el componente `TresCanvas`. Esto se debe a que `useLoader` devuelve una `Promise` y necesitamos esperar a que se resuelva antes de renderizar la escena.
41+
Beachte im obigen Beispiel, dass wir die `Suspense`-Komponente verwenden, um die `TresCanvas`-Komponente zu umgeben. Dies liegt daran, dass `useLoader` ein `Promise` zurückgibt und wir warten müssen, bis es gelöst ist, bevor wir die Szene rendern können.
4142

42-
## Usando `useGLTF`
43+
## Verwendung von `useGLTF`
4344

44-
Una forma más conveniente de cargar modelos es utilizando el composable `useGLTF` disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
45+
Eine bequemere Möglichkeit, Modelle zu laden, ist die Verwendung des Composables `useGLTF`, das im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
4546

4647
```ts
4748
import { useGLTF } from '@tresjs/cientos'
4849

4950
const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
5051
```
5152

52-
Una ventaja de usar `useGLTF` es que puedes pasar una propiedad `draco` para habilitar la [compresión Draco](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) para el modelo. Esto reducirá el tamaño del modelo y mejorará el rendimiento.
53+
Ein Vorteil der Verwendung von `useGLTF` ist, dass du eine `draco`-Eigenschaft übergeben kannst, um die [Draco-Kompression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) für das Modell zu aktivieren. Dies wird die Größe des Modells reduzieren und die Leistung verbessern.
5354

5455
```ts
5556
import { useGLTF } from '@tresjs/cientos'
5657

5758
const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
5859
```
5960

60-
Alternativamente, puedes seleccionar fácilmente objetos dentro del modelo utilizando la propiedad `nodes`.
61+
Alternativ kannst du Objekte innerhalb des Modells leicht mit der Eigenschaft `nodes` auswählen.
6162

6263
```vue
6364
<script setup lang="ts">
@@ -74,14 +75,14 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
7475
>
7576
<TresPerspectiveCamera :position="[11, 11, 11]" />
7677
<OrbitControls />
77-
<primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
78+
<primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
7879
</TresCanvas>
7980
</template>
8081
```
8182

82-
## Usando `GLTFModel`
83+
## Verwendung von `GLTFModel`
8384

84-
El componente `GLTFModel` es un envoltorio alrededor de `useGLTF` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
85+
Die Komponente `GLTFModel` ist eine Hülle um `useGLTF`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
8586

8687
```vue{2,9}
8788
<script setup lang="ts">
@@ -99,29 +100,29 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
99100
</template>
100101
```
101102

102-
Este enfoque en particular es más sencillo pero te brinda menos control sobre el modelo.
103+
Dieser spezielle Ansatz ist einfacher, bietet aber weniger Kontrolle über das Modell.
103104

104-
## useFBX
105+
## Verwendung von `useFBX`
105106

106-
El composable `useFBX` está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
107+
Das Composable `useFBX` ist im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar.
107108

108109
```ts
109110
import { useFBX } from '@tresjs/cientos'
110111

111112
const model = await useFBX('/models/AkuAku.fbx')
112113
```
113114

114-
Entonces, es tan sencillo como agregar la escena a tu escena:
115+
Dann ist es so einfach wie das Hinzufügen der Szene zu deiner Szene:
115116

116117
```html{2}
117118
<TresCanvas shadows alpha>
118119
<primitive :object="scene" />
119120
</TresCanvas>
120121
```
121122

122-
## FBXModel
123+
## Verwendung von `FBXModel`
123124

124-
El componente `FBXModel` es un envoltorio alrededor de `useFBX` que está disponible en el paquete [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Su uso es similar al de `GLTFModel`:
125+
Die Komponente `FBXModel` ist eine Hülle um `useFBX`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist. Ihre Verwendung ist ähnlich wie bei `GLTFModel`:
125126

126127
```vue{2,9}
127128
<script setup lang="ts">

0 commit comments

Comments
 (0)