docs: correct incoherences in recipes (#618)

* docs: corrected load models code examples

* docs: added code groups to texture examples with proper suspense

* docs: corrected code examples for text-3D

* chore: fix lint

.eslintrc-auto-import.json

@@ -0,0 +1,67 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true
+  }
+}

docs/.eslintrc-auto-import.json

@@ -0,0 +1,67 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true
+  }
+}

docs/cookbook/load-models.md

@@ -19,7 +19,7 @@ For this guide we are going to focus on loading gLTF (GL Transmission Format) mo
 There are several ways to load models on TresJS:
 
 ::: warning
-Please note that in the examples above we use top level `await`s. Make sure to wrap such code with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information.
+Please note that in the examples below use top level `await`. Make sure to wrap such code with a Vue's [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component.
 :::
 
 ## Using `useLoader`
@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
 
-```html{2}
-<TresCanvas>
-  <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > The `<primitive />` component is not a standalone component in the Tres source code. Instead, it's a part of the Tres core functionality. When you use `<primitive>`, it is translated to a `createElement` call, which creates the appropriate three.js object based on the provided "object" prop.
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 Alternatively you can easily select objects inside the model using the `nodes` property.
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## Using `GLTFModel`
 
 The `GLTFModel` component is a wrapper around the `useGLTF` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Then is as straightforward as adding the scene to your scene:
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## FBXModel

docs/cookbook/load-textures.md

@@ -16,6 +16,10 @@ Three-dimensional (3D) textures are images that contain multiple layers of data,
 
 There are two ways of loading 3D textures in TresJS:
 
+::: warning
+Please note that in the examples below use top level `await`. Make sure to wrap such code with a Vue's [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component.
+:::
+
 ## Using `useLoader`
 
 The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
@@ -31,18 +35,41 @@ const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
 
 Then you can pass the texture to a material:
 
-```html
-<Suspense>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry :args="[1,32,32]" />
-      <TresMeshStandardMaterial :map="texture" />
-    </TresMesh>
+::: code-group
+```vue [App.vue]
+<script setup lang="ts">
+import TexturedSphere from './TexturedSphere.vue'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+  >
+    <Suspense>
+      <TexturedSphere />
+    </Suspense>
   </TresCanvas>
-</Suspense>
+</template>
 ```
 
-Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
+```vue [Model.vue]
+<script setup lang="ts">
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three'
+
+const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+</script>
+
+<template>
+  <TresMesh>
+    <TresSphereGeometry :args="[1, 32, 32]" />
+    <TresMeshStandardMaterial :map="texture" />
+  </TresMesh>
+</template>
+```
+:::
 
 ## Using `useTexture`
 
@@ -67,18 +94,14 @@ const pbrTexture = await useTexture({
 Similar to the previous example, we can pass all the textures to a material via props:
 
 ```html
-<Suspense>
-  <TresCanvas>
-    <TresMesh>
-      <TresSphereGeometry :args="[1,32,32]" />
-      <TresMeshStandardMaterial
-        :map="pbrTexture.map"
-        :displacementMap="pbrTexture.displacementMap"
-        :roughnessMap="pbrTexture.roughnessMap"
-        :normalMap="pbrTexture.normalMap"
-        :aoMap="pbrTexture.ambientOcclusionMap"
-      />
-    </TresMesh>
-  </TresCanvas>
-</Suspense>
+<TresMesh>
+  <TresSphereGeometry :args="[1,32,32]" />
+  <TresMeshStandardMaterial
+    :map="pbrTexture.map"
+    :displacementMap="pbrTexture.displacementMap"
+    :roughnessMap="pbrTexture.roughnessMap"
+    :normalMap="pbrTexture.normalMap"
+    :aoMap="pbrTexture.ambientOcclusionMap"
+  />
+</TresMesh>
 ```

docs/cookbook/text-3d.md

@@ -91,20 +91,46 @@ const fontOptions = {
 
 We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh.
 
-```ts
-const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
-```
-
 ```html
-<TresMesh>
-  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-  <TresMeshNormalMaterial :matcap="matcapTexture" />
-</TresMesh>
+<script setup lang="ts">
+  const matcapTexture = await useTexture([
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png',
+  ])
+</script>
+
+<template>
+  <TresMesh>
+    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    <TresMeshNormalMaterial :matcap="matcapTexture" />
+  </TresMesh>
+</template>
 ```
 
 So the final code would look something like this:
 
-```vue
+::: code-group
+
+```vue [App.vue]
+<script setup lang="ts">
+import MyText from './MyText.vue'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <MyText />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+```vue [MyText.vue]
 <script setup lang="ts">
 import { extend } from '@tresjs/core'
 import { TextGeometry } from 'three/addons/geometries/TextGeometry'
@@ -143,24 +169,21 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 </script>
 
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresMesh>
-      <TresTextGeometry
-        :args="['TresJS', { font, ...fontOptions }]"
-        center
-      />
-      <TresMeshNormalMaterial :matcap="matcapTexture" />
-    </TresMesh>
-  </TresCanvas>
+  <TresMesh>
+    <TresTextGeometry
+      :args="['TresJS', { font, ...fontOptions }]"
+      center
+    />
+    <TresMeshNormalMaterial :matcap="matcapTexture" />
+  </TresMesh>
 </template>
 ```
 
+:::
+
 We know this seems like a lot of work, but good news is, there is a much more simple way
 
-## TextGeometry from `cientos`
+## Text3D from `cientos`
 
 The `cientos` package provides a component called `<Text3D />`, which is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
 
@@ -168,12 +191,18 @@ The nicest part? You don't need to extend the catalog and just pass the font arg
 It just works. 💯 (if not text is provided, the text will be TresJS)
 
 ```vue
+<script setup lang="ts">
+import { Text3D } from '@tresjs/cientos'
+</script>
+
 <template>
   <TresCanvas
     shadows
     alpha
   >
-    <Text3D :font="fontPath" />
+    <Suspense>
+      <Text3D :font="fontPath" />
+    </Suspense>
   </TresCanvas>
 </template>
 ```

docs/de/cookbook/load-models.md

@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 Dann kannst du die Szene des Modells in einer [`primitive`](/de/advanced/primitive)-Komponente von TresJS übergeben, um sie zu rendern:
 
-```html{2}
-<TresCanvas>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > 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.
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 Alternativ kannst du Objekte innerhalb des Modells leicht mit der Eigenschaft `nodes` auswählen.
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // "MyModel" dient hier nur als Platzhalter
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## Verwendung von `GLTFModel`
 
 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.
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Dann muss man nur das dem primitive das model zuweisen:
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="model" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## Verwendung von `FBXModel`

docs/es/cookbook/load-models.md

@@ -19,7 +19,7 @@ Para esta guía, nos vamos a centrar en cargar modelos gLTF (GL Transmission For
 Hay varias formas de cargar modelos en TresJS:
 
 ::: warning
-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.
+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.
 :::
 
 ## Usando `useLoader`
@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 Luego puedes pasar la escena del modelo a un componente [`primitive`](/advanced/primitive) de TresJS para renderizarlo:
 
-```html{2}
-<TresCanvas>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > 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.
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 Alternativamente, puedes seleccionar fácilmente objetos dentro del modelo utilizando la propiedad `nodes`.
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## Usando `GLTFModel`
 
 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).
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Entonces, es tan sencillo como agregar la escena a tu escena:
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## FBXModel

docs/fr/cookbook/load-models.md

@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 Ensuite, vous pouvez transmettre la scène du modèle à un composant [`primitive`](/advanced/primitive) de TresJS pour le restituer:
 
-```html{2}
-<TresCanvas>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > Le composant `<primitive />` n'est pas un composant autonome dans le code source de Tres. Au lieu de cela, cela fait partie des fonctionnalités de base de Tres. Lorsque vous utilisez `<primitive>`, cela se traduit par un appel à `createElement`, qui crée l'objet three.js approprié en fonction de la propriété "object" fournie.
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 Alternativement, vous pouvez facilement sélectionner des objets dans le modèle à l'aide de la propriété `nodes`.
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // "MyModel" ici n'est qu'un placeholder
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## Avec `GLTFModel`
 
 Le composant `GLTFModel` est un wrapper autour de `useGLTF` qui est disponible dans le package [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Ensuite, c'est aussi simple que d'ajouter la scène à votre scène :
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## FBXModel

docs/nl/cookbook/load-models.md

@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 Vervolgens kunt u de modelscène doorgeven aan een TresJS [`primitive`](/nl/advanced/primitive) component om deze te renderen:
 
-```html{2}
-<TresCanvas>
-  <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > De component `<primitive />` is geen op zichzelf staande component in de Tres-broncode. In plaats daarvan maakt het deel uit van de kernfunctionaliteit van Tres. Wanneer u `<primitive>` gebruikt, wordt dit vertaald naar een `createElement`-aanroep, die het juiste three.js-object creëert op basis van de opgegeven "object"-prop.
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 Als alternatief kunt u eenvoudig objecten binnen het model selecteren met behulp van de eigenschap `nodes`.
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // Houd er rekening mee dat "MyModel" hier slechts een tijdelijke aanduiding is
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## `GLTFModel` gebruiken
 
 De component `GLTFModel` is een wrapper rond de `useGLTF` composable, die beschikbaar is via het pakket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 Dan is het net zo eenvoudig als het toevoegen van de scène aan uw scène:
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## FBXModel

docs/zh/cookbook/load-models.md

@@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 
 然后，你可以将模型场景传递给 TresJS [`primitive`](/advanced/primitive) 组件以渲染它：
 
-```html{2}
-<TresCanvas>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="scene" />
 ```
 
 > `<primitive />` 组件不是 Tres 源代码中的独立组件。相反，它是 Tres 核心功能的一部分。当你使用 `<primitive>` 时，它会被转换为 `createElement` 调用，该调用会根据提供的“object”道具创建适当的 three.js 对象。
@@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 或者，你可以使用 `nodes` 属性轻松选择模型中的对象
 
-```vue
-<script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
+::: code-group
 
-const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```vue [App.vue]
+<script setup lang="ts">
+import Model from './Model.vue'
 </script>
 
 <template>
@@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // 请注意，这里的 "MyModel" 只是一个占位符
+    <Suspense>
+      <Model />
+    </Suspense>
   </TresCanvas>
 </template>
 ```
 
+```vue [Model.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="node.AkuAku" />
+</template>
+```
+:::
+
 ## 使用 `GLTFModel`
 
 `GLTFModel` 组件是 `useGLTF` 的包装器，可从 [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) 包中获得。
@@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 然后，将场景添加到你的场景中非常简单：
 
-```html{2}
-<TresCanvas shadows alpha>
-    <primitive :object="scene" />
-</TresCanvas>
+```html
+<primitive :object="model" />
 ```
 
 ## FBXModel