Explorar el Código

docs(cookbook): correct complete code examples (#582)

* docs(cookbook): correct complete code examples

* docs(cookbook): `trej`
Alvaro Saburido hace 1 año
padre
commit
b04e4aa3ba

+ 10 - 3
docs/cookbook/orbit-controls.md

@@ -85,9 +85,10 @@ const { camera, renderer } = useTresContext()
 </template>
 </template>
 ```
 ```
 
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 </script>
 
 
 <template>
 <template>
@@ -97,6 +98,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```
@@ -111,7 +113,12 @@ The `cientos` package provides a component called `<OrbitControls />` which is a
 The nicest part? You don't need to extend the catalog or pass any arguments.  
 The nicest part? You don't need to extend the catalog or pass any arguments.  
 It just works. 💯
 It just works. 💯
 
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
 <template>
   <TresCanvas
   <TresCanvas
     shadows
     shadows

+ 10 - 3
docs/de/cookbook/orbit-controls.md

@@ -83,9 +83,10 @@ const { camera, renderer } = useTresContext()
 </template>
 </template>
 ```
 ```
 
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 </script>
 
 
 <template>
 <template>
@@ -95,6 +96,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```
@@ -109,7 +111,12 @@ Das Paket `cientos` bietet eine Komponente namens `<OrbitControls />`, die ein W
 Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben.
 Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben.
 Es funktioniert einfach. 💯
 Es funktioniert einfach. 💯
 
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
 <template>
   <TresCanvas
   <TresCanvas
     shadows
     shadows

+ 10 - 3
docs/es/cookbook/orbit-controls.md

@@ -85,9 +85,10 @@ const { camera, renderer } = useTresContext()
 </template>
 </template>
 ```
 ```
 
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 </script>
 
 
 <template>
 <template>
@@ -97,6 +98,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```
@@ -111,7 +113,12 @@ El paquete `cientos` proporciona un componente llamado `<OrbitControls />` que e
 ¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.  
 ¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.  
 Simplemente funciona. 💯
 Simplemente funciona. 💯
 
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
 <template>
   <TresCanvas
   <TresCanvas
     shadows
     shadows