Merge branch 'main' into v4

docs/.vitepress/config/fr.ts

@@ -113,7 +113,7 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         { text: 'Versions', link: 'https://github.com/Tresjs/tres/releases' },
         {
           text: 'Playground',
-          link: 'https://playground.tresjs.org/',
+          link: 'https://play.tresjs.org/',
         },
         {
           text: 'Github',

docs/.vitepress/theme/custom.css

@@ -59,6 +59,49 @@
   background-color: var(--vp-button-alt-bg);
 }
 
+.VPButton.medium.egghead-cta {
+  border-color: var(--vp-c-border);
+  position: relative;
+}
+
+.VPButton.medium.egghead-cta:hover {
+  border-color: var(--vp-c-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-c-brand-light);
+}
+
+.VPButton.medium.egghead-cta::before {
+  content: url('/egghead-icon.png');
+  display: inline-block;
+  transform: translateY(0.1rem);
+  margin-right: 0.5rem;
+}
+
+.VPButton.medium.egghead-cta:hover::after {
+  animation: none;
+}
+.VPButton.medium.egghead-cta::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /*  background-color: var( --vp-c-dark); */
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 20px;
+  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
+  z-index: -1;
+}
+
+@keyframes ping {
+  15%,
+  to {
+    transform: scale(1.25, 2);
+    opacity: 0;
+  }
+}
+
 .VPHomeSponsors {
   margin-bottom: 0px !important;
 }

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/de/guide/index.md

@@ -77,7 +77,7 @@ Wir haben einen neuen [StackBlitz](https://stackblitz.com/) Startpunkt, um TresJ
 
 ## Labs
 
-Wir haben auch ein Showroom-Labor mit Beispielen, die mit TresJS erstellt wurden. Probiere es [hier](https://playground.tresjs.org/) aus.
+Wir haben auch ein Showroom-Labor mit Beispielen, die mit TresJS erstellt wurden. Probiere es [hier](https://lab.tresjs.org/) aus.
 
 ![](/tresjs-lab.png)
 

docs/de/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: Warum Tres?
       link: /de/guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: Deklarativ

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/es/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: ¿Por qué Tres?
       link: /es/guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: Declarativo

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/fr/guide/index.md

@@ -79,9 +79,9 @@ Nous avons un nouveau starter [StackBlitz](https://stackblitz.com/) afin d'essay
 
 ## Playground
 
-Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez [ici](https://playground.tresjs.org/).
+Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez [ici](https://play.tresjs.org/).
 
-![](/playground.png)
+<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
 
 ## Motivation
 

docs/fr/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: Pourquoi Tres?
       link: /fr/guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: Déclaratif

docs/guide/index.md

@@ -77,7 +77,7 @@ We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS
 
 ## Labs
 
-We also have a showcase lab of examples made with TresJS. Check it out [here](https://playground.tresjs.org/).
+We also have a showcase lab of examples made with TresJS. Check it out [here](https://lab.tresjs.org/).
 
 ![](/tresjs-lab.png)
 

docs/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: Why Tres?
       link: /guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: Declarative

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/nl/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: Waarom Tres?
       link: /nl/guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: Declaratief

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

docs/zh/index.md

@@ -18,7 +18,9 @@ hero:
     - theme: alt
       text: 为什么是 Tres ?
       link: /zh/guide/#motivation
-
+    - theme: egghead-cta
+      text: Egghead.io Course
+      link: https://egghead.io/courses/create-interactive-3d-experiences-with-tresjs-004057c2
 features:
   - icon: 💡
     title: 声明式