docs: german translations

docs/.vitepress/config/de.ts

@@ -0,0 +1,146 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Änderungen an dieser Seite vorschlagen',
+    },
+    sidebar: [
+      {
+        text: 'Anleitung',
+        items: [
+          // Dies zeigt die Seite `/guide/index.md`.
+          { text: 'Einführung', link: '/de/guide/' },
+          { text: 'Loslegen', link: '/de/guide/getting-started' },
+          { text: 'Deine erste Szene', link: '/de/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/de/guide/nuxt' },
+          { text: 'Fehlerbehebung', link: '/de/guide/troubleshooting' },
+          { text: 'Migration von v1', link: '/de/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/de/api/tres-canvas' },
+          {
+            text: 'Instanzen, Argumente und Props',
+            link: '/de/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/de/api/composables',
+          },
+          {
+            text: 'Events',
+            link: '/de/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Fortgeschritten',
+        items: [
+          { text: 'Erweitern', link: '/de/advanced/extending' },
+          { text: 'Primitive', link: '/de/advanced/primitive' },
+          {
+            text: 'Warnhinweise',
+            link: '/de/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debugging',
+        items: [
+          { text: 'Entwicklungstools', link: '/de/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Beispiele',
+        collapsed: true,
+        items: [
+          { text: 'Orbit-Controls', link: '/de/examples/orbit-controls' },
+          { text: 'Einfache Animationen', link: '/de/examples/basic-animations' },
+          { text: 'Gruppen', link: '/de/examples/groups' },
+          { text: 'Texturen laden', link: '/de/examples/load-textures' },
+          { text: 'Modelle laden', link: '/de/examples/load-models' },
+          { text: 'Text laden', link: '/de/examples/text-3d' },
+          { text: 'Lichter und Schatten', link: '/de/examples/lights-shadows' },
+          { text: 'Shaders', link: '/de/examples/shaders' },
+        ],
+      },
+      {
+        text: 'Direktiven',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/de/directives/v-log' },
+          { text: 'v-light-helper', link: '/de/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/de/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/de/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ökosystem',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: 'https://cientos.tresjs.org/',
+          },
+          {
+            text: 'Nuxt-Modul',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Nachbearbeitung (Demnächst)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Anleitung', link: '/de/guide/' },
+      { text: 'API', link: '/de/api/tres-canvas' },
+      /*       { text: 'API', link: '/de/api/' },
+      { text: 'Konfiguration', link: '/de/config/' }, */
+      {
+        text: 'Ressourcen',
+        items: [
+          { text: 'Team', link: '/de/team' },
+          { text: 'Versionen', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Spielplatz',
+            link: 'https://playground.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Probleme',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ökosystem',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt-Modul',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

docs/.vitepress/config/index.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { enConfig } from './en'
 import { esConfig } from './es'
+import { deConfig } from './de'
 import { sharedConfig } from './shared'
 
 /* import { zhConfig } from './zh' */
@@ -11,6 +12,7 @@ export default defineConfig({
   locales: {
     root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
     es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
+    de: { label: 'Deutsch', lang: 'de-DE', link: '/de/', ...deConfig },
     /* zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig }, */
   },
 })

docs/api/composables.md

@@ -27,7 +27,7 @@ The `onLoop` callback receives an object with the following properties based on
 - `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
 - `elapsed`: The elapsed time since the start of the render loop.
 
-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.
+This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution.
 
 ### Before and after render
 
@@ -200,7 +200,7 @@ const { camera, renderer, camera, cameras } = useTresContext()
 ```
 
 ::: warning
-`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. 
+`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.
 :::
 
 ```vue

docs/de/advanced/caveats.md

@@ -0,0 +1,121 @@
+# Warnhinweise 😱
+
+Unser Ziel ist es, eine einfache Möglichkeit zu bieten, Three.js in Vue.js mit der bestmöglichen Entwicklererfahrung zu nutzen. Es gibt jedoch einige Vorbehalte, derer du dir bewusst sein solltest.
+
+## ~~HMR und Three.js~~
+
+:::info
+
+Dies wurde in **TresJS** v1.7.0 🎉 behoben. Jetzt kannst du HMR nutzen, ohne die Seite neu laden zu müssen 🥹.
+
+:::
+
+Hot Module Replacement (HMR) ist eine Funktion, die es dir erlaubt, deinen Code zu aktualisieren, ohne die Seite neu zu laden. Dies ist eine großartige Funktion, die die Entwicklung viel schneller macht. **TresJS** verwendet [Vite](https://vitejs.dev/). Es ist jedoch wirklich kompliziert, dies korrekt mit Three.js zu bewerkstelligen.
+
+Warum? Weil Tres die Szene deklarativ aufbaut. Das bedeutet, dass es die Instanz erstellt und der Szene hinzufügt, wenn die Komponente gemountet wird. Die Komplexität liegt darin zu wissen, wann die Instanz aus der Szene entfernt und wann sie wieder hinzugefügt werden soll.
+
+Obwohl ein minimaler Aufräummechanismus implementiert wurde, ist er nicht perfekt. Das bedeutet, dass du manchmal die Seite neu laden musst, um die Änderungen korrekt zu sehen, insbesondere wenn du Instanzen über [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html) referenzierst.
+
+
+```vue
+<script setup lang="ts">
+const boxRef: Ref<TresInstance | null> = ref(null)
+
+onLoop(({ _delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :scale="1"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+Wenn du eine Änderung an der `color`-Property bei Instanzen der  `TresMeshStandardMaterial`-Komponente vornimmst, wirst du sehen, dass die Änderung angewendet wird, aber die Rotation  nicht mehr funktioniert. Dies liegt daran, dass die Instanz entfernt und neu erstellt wird.
+
+:::tip
+Als **Faustregel**, solltest du die Seite neu laden, wenn du die von dir vorgenommenen Änderungen nicht siehst.
+:::
+
+Wir arbeiten bereits an einer besseren Lösung dafür 😁. Wenn du eine Idee hast, wie man dies lösen könnte, lass es uns bitte wissen.
+
+Du kannst der Diskussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23) folgen.
+
+## Reaktivität
+
+Wir alle lieben Reaktivität 💚. Es ist eines der mächtigsten Features von Vue.js. Allerdings sollten wir vorsichtig sein, wenn wir Three.js verwenden.
+
+Die Reaktivität von Vue basiert auf [Proxies](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Dies ermöglicht es Vue 3, automatisch Änderungen an Datenobjekten zu verfolgen und die entsprechenden DOM-Elemente jedes Mal zu aktualisieren, wenn sich die Daten ändern.
+
+Da wir eine Szene rendern und sie bei jedem Frame (60FPS) aktualisieren, bedeutet das, dass wir die Szene 60 Mal pro Sekunde aktualisieren. Wenn das zu aktualisierende Objekt reaktiv ist, wird Vue versuchen, dieses Objekt so oft zu aktualisieren. Das ist keine gute Idee 😅 und wird sich negativ auf die Performance auswirken.
+
+Hier ist ein Benchmark, der den Unterschied zwischen der Verwendung eines Proxy-Objekts und eines einfachen Objekts zeigt.
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
+  <figcaption>Fig.1 - Ausführungen pro Sekunde: Objekt vs Proxy. </figcaption>
+</figure>
+
+Quelle: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Falls es wirklich notwendig ist, Reaktivität zu nutzen, verwende [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref).
+
+Im Gegensatz zu `ref()` wird der innere Wert eines shallow Ref gespeichert und so wie er ist exponiert. Nur der Zugriff auf `.value` ist reaktiv. Quelle: [Vue.js Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### Beispiel
+
+❌ Falsch
+
+```vue
+<script setup lang="ts">
+const position = reactive({ x: 0, y: 0, z: 0 })
+
+onLoop(({ _delta, elapsed }) => {
+  position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+✅ Richtig
+
+```vue
+<script setup lang="ts">
+const position = { x: 0, y: 0, z: 0 }
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+onLoop(({ _delta, elapsed }) => {
+  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```

docs/de/advanced/extending.md

@@ -0,0 +1,44 @@
+# Erweitern 🔌
+
+Tres bietet grundlegende Funktionalitäten, aber es ist einfach, Drittanbieterelemente hinzuzufügen und den internen Katalog zu erweitern.
+
+Die meisten 3D-Szenen nutzen `OrbitControls`, die allerdings nicht Teil der Hauptbibliothek sind. Um es zu deinem Projekt hinzufügen, kannst du es aus dem Modul `three/addons/controls/OrbitControls` importieren.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Ein Element dynamisch erweitern
+
+Oder du erweiterst den Katalog dynamisch innerhalb deiner Komponente:
+
+```vue {2,3,4,7,13,15}
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Element dem Katalog hinzufügen
+extend({ TextGeometry, OrbitControls })
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

docs/de/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+Die `<primitive />`-Komponente ist eine vielseitige Low-Level-Komponente in TresJS, die es dir ermöglicht, ohne Abstraktion jedes Objekt von Three.js direkt in deiner Vue-Anwendung zu verwenden. Sie dient als Brücke zwischen dem Reaktivitätssystem von Vue und dem Szenengraph von Three.js.
+
+## Verwendung
+
+```html
+<script setup lang="ts">
+  // Importieren der notwendigen Klassen von three.js
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+
+  // Geometry und Material erstellen
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+
+  // Mesh mit der Geometrie und dem Material erstellen
+  const meshWithMaterial = new Mesh(geometry, material);
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`object`: Diese Property erwartet ein `Object3D`-Objekt von three.js oder eine seiner abgeleiteten Klassen. Es ist das Hauptobjekt, das die `<primitive />`-Komponente rendern wird. Im aktualisierten Beispiel wird ein `Mesh`-Objekt mit dem entsprechenden `Material` an diese Property übergeben.
+
+## Verwendung mit Modellen
+
+Die `<primitive />`-Komponente ist besonders nützlich, um komplexe Objekte wie Modelle, die aus externen Quellen geladen werden, zu rendern. Das folgende Beispiel zeigt, wie ein Modell aus einer GLTF-Datei geladen und mit der `<primitive />`-Komponente gerendert wird.
+
+```html
+<script lang="ts" setup>
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf')
+</script>
+
+<TresCanvas>
+  <Suspense>
+    <primitive :object="nodes.AkuAku" />
+  </Suspense>
+</TresCanvas>
+```