docs: 577 tres docs cookbook orbit controls code throws error (#580)

* docs(cookbook): corrected code examples for local orbitcontrol

* docs(cookbook): spanish corrections

* docs(cookbook): renamte `useTres` for `useTresContext`

* docs: corrected typo on broken links to `useTresContext` docs

* chore: update german "orbit-controls" cookbook page

---------

Co-authored-by: Dennis Smuda <dennis.smuda@ftapi.com>

docs/cookbook/orbit-controls.md

@@ -39,41 +39,56 @@ extend({ OrbitControls })
 
 Now you can use the `TresOrbitControls` component in your scene.
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
-  </TresCanvas>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
 </template>
 ```
+:::
 
-Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments.
 
-You can use the [useTres](/api/composables#usetres) composable to get the camera and the renderer.
+Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.
+
+::: warning
+`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Thats why we created a subcomponent called `OrbitControls.vue`. See more about [context](/api/composables#usetrescontext).
+:::
 
 ```ts
-import { useTres } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
 ```
 
 So the final code would be something like this:
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <script setup lang="ts">
-import { extend, useTres } from '@tresjs/core'
+import { extend, useTresContext } from '@tresjs/core'
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue]
+<script setup lang="ts">
+import { OrbitControls } from './OrbitControls.vue'
 </script>
 
 <template>
@@ -82,13 +97,12 @@ const { state } = useTres()
     alpha
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
+    <OrbitControls />
   </TresCanvas>
 </template>
 ```
+:::
+
 
 ## OrbitControls from `cientos`
 

docs/de/cookbook/orbit-controls.md

@@ -38,24 +38,22 @@ extend({ OrbitControls })
 
 Jetzt kannst du die Komponente `TresOrbitControls` in deiner Szene verwenden.
 
-```vue{7-10}
+::: code-group
+
+```vue [OrbitControls.vue]
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
-  </TresCanvas>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
 </template>
 ```
 
-Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigt, musst du diese als Argumente übergeben.
+Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigen, musst du diese als Argumente übergeben. Du kannst das Composable [useTresContext](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.
 
-Du kannst das Composable [useTres](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.
+::: warning
+`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` die Kontext-Daten bereitstellt. Deshalb haben wir eine Unterkomponente namens `OrbitControls.vue` implementiert. Erfahre mehr über [context](/de/api/composables#usetrescontext).
+:::
 
 ```ts
 import { useTres } from '@tresjs/core'
@@ -65,14 +63,29 @@ const { state } = useTres()
 
 Dann würde der finale Code etwa so aussehen:
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <script setup lang="ts">
-import { extend, useTres } from '@tresjs/core'
+import { extend, useTresContext } from '@tresjs/core'
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue]
+<script setup lang="ts">
+import { OrbitControls } from './OrbitControls.vue'
 </script>
 
 <template>
@@ -81,13 +94,12 @@ const { state } = useTres()
     alpha
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
+    <OrbitControls />
   </TresCanvas>
 </template>
 ```
+:::
+
 
 ## OrbitControls von `cientos`
 

docs/es/cookbook/orbit-controls.md

@@ -39,42 +39,55 @@ extend({ OrbitControls })
 
 Ahora puedes usar el componente `TresOrbitControls` en tu escena.
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
-  </TresCanvas>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
 </template>
 ```
+:::
 
-Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos.
-
-Puedes usar el composable [useTres](/api/composables#usetres) para obtener la cámara y el renderizador.
+Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos. Puedes usar el composable [useTresContext](/es/api/composables#usetrescontext) para obtener la cámara y el renderizador.
 
+::: warning
+`useTresContext` solo puede ser utilizado dentro de un `TresCanvas` ya que `TresCanvas` actúa como proveedor de los datos de contexto. Es por eso que creamos un subcomponente llamado `OrbitControls.vue`. Obtén más información sobre [contexto](/api/composables#usetrescontext).
+:::
 
 ```ts
-import { useTres } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
 ```
 
-Entonces, el código final sería algo como esto:
+So the final code would be something like this:
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <script setup lang="ts">
-import { extend, useTres } from '@tresjs/core'
+import { extend, useTresContext } from '@tresjs/core'
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue]
+<script setup lang="ts">
+import { OrbitControls } from './OrbitControls.vue'
 </script>
 
 <template>
@@ -83,13 +96,12 @@ const { state } = useTres()
     alpha
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
+    <OrbitControls />
   </TresCanvas>
 </template>
 ```
+:::
+
 
 ## OrbitControls de `cientos`