docs: dutch translations (#597)

* docs: add nl config file and extend index locales object

* docs: add english docs to nl folder

* docs: translate advanced and api folder

* docs: translate guide and debug folder

* docs: translate directives folder

* docs: translate cookbook folder

* docs: fix small typos

* fix(docs): team data path dutch translations

* fix(docs): labs url wrong in dutch translation

* fix(docs): nl config not linked correctly

docs/.vitepress/config/index.ts

@@ -4,6 +4,7 @@ import { esConfig } from './es'
 import { deConfig } from './de'
 import { sharedConfig } from './shared'
 import { zhConfig } from './zh' 
+import { nlConfig } from './nl'
 
 export default defineConfig({
   ...sharedConfig,
@@ -13,5 +14,6 @@ export default defineConfig({
     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 }, 
+    nl: { label: 'Nederlands', lang: 'nl-NL', link: '/nl/', ...nlConfig },
   },
 })

docs/.vitepress/config/nl.ts

@@ -0,0 +1,176 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Stel wijzigingen op deze pagina voor',
+    },
+    sidebar: [
+      {
+        text: 'Gids',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introductie', link: '/nl/guide/' },
+          { text: 'Aan de slag', link: '/nl/guide/getting-started' },
+          { text: 'Je eerste scene', link: '/nl/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/nl/guide/nuxt' },
+          { text: 'Problemen oplossen', link: '/nl/guide/troubleshooting' },
+          { text: 'Migreren vanaf v1', link: '/nl/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/nl/api/tres-canvas' },
+          {
+            text: 'Instanties, argumenten en props',
+            link: '/nl/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/nl/api/composables',
+          },
+          {
+            text: 'Events',
+            link: '/nl/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Geavanceerd',
+
+        items: [
+          { text: 'Uitbreiden', link: '/nl/advanced/extending' },
+          { text: 'Primitive', link: '/nl/advanced/primitive' },
+          {
+            text: 'Waarschuwingen',
+            link: '/nl/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Foutopsporing',
+        items: [
+          { text: 'Ontwikkelingstools', link: '/nl/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Kookboek 🍳🧑‍🍳',
+        link: '/nl/cookbook/',
+        items: [
+          { text: 'Orbit Controls', link: '/nl/cookbook/orbit-controls' },
+          { text: 'Basis Animaties', link: '/nl/cookbook/basic-animations' },
+          { text: 'Groepen', link: '/nl/cookbook/groups' },
+          { text: 'Textures laden', link: '/nl/cookbook/load-textures' },
+          { text: 'Modellen laden', link: '/nl/cookbook/load-models' },
+          { text: 'Text laden', link: '/nl/cookbook/text-3d' },
+          { text: 'Lichten en Schaduwen', link: '/nl/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/nl/cookbook/shaders' },
+        ],
+      },
+      {
+        text: 'Richtlijnen',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/nl/directives/v-log' },
+          { text: 'v-light-helper', link: '/nl/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/nl/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/nl/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ecosysteem',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: 'https://cientos.tresjs.org/',
+          },
+          {
+            text: 'Nuxt module',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Nabewerking (binnenkort)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guide', link: '/nl/guide/' },
+      { text: 'API', link: '/nl/api/tres-canvas' },
+      /*       { text: 'API', link: '/nl/api/' },
+      { text: 'Config', link: '/nl/config/' }, */
+      { text: 'Resources',
+        items: [
+          { text: 'Team', link: '/nl/team' },
+          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Speelplaats',
+            link: 'https://play.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Problemen',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosysteem',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt module',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          nl: {
+            translations: {
+              button: {
+                buttonText: 'Zoeken',
+                buttonAriaLabel: 'Zoeken',
+              },
+              modal: {
+                displayDetails: 'Gedetailleerde lijst bekijken',
+                resetButtonTitle: 'Zoeken resetten',
+                backButtonTitle: 'Zoeken sluiten',
+                noResultsText: 'Geen resultaten voor',
+                footer: {
+                  selectText: 'Selecteren',
+                  selectKeyAriaLabel: 'enter',
+                  navigateText: 'Navigeren naar',
+                  navigateUpKeyAriaLabel: 'Pijl omhoog',
+                  navigateDownKeyAriaLabel: 'Pijl omlaag',
+                  closeText: 'Sluiten',
+                  closeKeyAriaLabel: 'escape',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+}

docs/nl/advanced/caveats.md

@@ -0,0 +1,116 @@
+# Waarschuwingen 😱
+
+Ons doel is om een eenvoudige manier te bieden om ThreeJS in VueJS te gebruiken met de best mogelijke ontwikkelaarservaring. Er zijn echter enkele kanttekeningen waar u rekening mee moet houden.
+
+## ~~HMR and ThreeJS~~
+
+:::info
+
+Dit is gefixt in **TresJS** v1.7.0 🎉. Je kan nu HMR gebruiken zonder de pagina opnieuw te laden🥹.
+
+:::
+
+Hot module replacement (HMR) is een functie waarmee u uw code kunt bijwerken zonder de pagina opnieuw te laden. Dit is een geweldige functie die de ontwikkeling veel sneller maakt. **TresJS** gebruikt [Vite](https://vitejs.dev/). Het is echter erg lastig om het correct te laten werken met ThreeJS.
+
+Waarom? Omdat Tres de scène op een declaratieve manier opbouwt. Dit betekent dat het de instantie maakt en deze aan de scène toevoegt wanneer de component wordt aangekoppeld. De complexiteit komt om te weten wanneer de instantie van de scène moet worden verwijderd en wanneer deze opnieuw moet worden toegevoegd.
+
+Hoewel er een minimale verwijderingsworkflow is geïmplementeerd, is deze niet perfect. Dit betekent dat u soms de pagina opnieuw moet laden om de wijzigingen correct te zien, vooral wanneer u naar een exemplaar verwijst met behulp van [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
+
+```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>
+```
+
+Als u het kenmerk `color` van de component `TresMeshStandardMaterial` wijzigt, zult u zien dat de wijziging wordt toegepast, maar dat de rotatie niet meer werkt. Dit komt omdat de instantie wordt verwijderd en opnieuw wordt gemaakt.
+
+:::tip
+Dus als **vuistregel** moet u de pagina opnieuw laden wanneer uw wijzigingen niet worden weergegeven.
+:::
+
+Dat gezegd hebbende, werken we aan een betere oplossing hiervoor 😁. Heeft u enig idee hoe u dit kunt oplossen, laat het ons dan weten.
+
+Je kunt de discussie volgen in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
+
+## Reactiviteit
+
+We houden allemaal van reactiviteit 💚. Het is een van de krachtigste functies van VueJS. We moeten er echter rekening mee houden bij het gebruik van ThreeJS.
+
+Vue-reactiviteit is gebaseerd op [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Hierdoor kan Vue 3 automatisch wijzigingen in data-objecten volgen en de bijbehorende DOM-elementen bijwerken wanneer de gegevens veranderen.
+
+Omdat we een scène renderen en deze in elk frame bijwerken, bijvoorbeeld met een snelheid van 60 FPS, betekent dit dat we de scène 60 keer per seconde bijwerken. Als het te updaten object reactief is, zal Vue proberen het ingestelde object 60 keer bij te werken. Dit is geen goed idee 😅 en zal impact hebben op de prestaties.
+
+Hier is een benchmark van het verschil tussen het gebruik van een Proxy-object en een gewoon object.
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
+  <figcaption>Fig.1 - Executions per second Plan Object vs Proxy. </figcaption>
+</figure>
+
+Bron: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Als je reactiviteit moet gebruiken, gebruik dan [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+In tegenstelling tot `ref()` wordt de innerlijke waarde van een ondiepe ref opgeslagen en weergegeven zoals hij is, en zal deze niet diep reactief worden gemaakt. Alleen de .value-toegang is reactief. Bron [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### Voorbeeld
+
+❌ Incorrect
+
+```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>
+```
+
+✅ Correct
+
+```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/nl/advanced/extending.md

@@ -0,0 +1,35 @@
+# Uitbreiden 🔌
+
+Tres biedt eenvoudige functionaliteit, maar het is eenvoudig om elementen van derden toe te voegen en deze uit te breiden naar de interne catalogus.
+
+Het grootste deel van de 3D-ervaring maakt gebruik van `OrbitControls`, wat geen deel uitmaakt van de kernbibliotheek. U kunt het aan uw project toevoegen door het te importeren vanuit de module `three/addons/controls/OrbitControls`.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Een element dynamisch uitbreiden
+
+Of u kunt het ook dynamisch toevoegen aan uw componenten:
+
+```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'
+
+// Voeg het element toe aan de catalogus
+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/nl/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+De component `<primitive />` is een veelzijdige component op laag niveau in TresJS waarmee u elk three.js-object direct kunt gebruiken binnen uw Vue-applicatie zonder abstractie. Het fungeert als een brug tussen het reactiviteitssysteem van Vue en de scènegrafiek van three.js.
+
+## Gebruik
+
+```html
+<script setup lang="ts">
+  // Importeer de benodigde three.js-klassen
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+
+  // Maak een doosgeometrie en een basismateriaal
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+
+  // Maak een mesh met de geometrie en het materiaal
+  const meshWithMaterial = new Mesh(geometry, material);
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>  
+</template>
+```
+
+## Props
+
+`object`: Deze prop verwacht een three.js Object3D of een van de afgeleide klassen ervan. Het is het primaire object dat de component `<primitive />` zal weergeven. In het bijgewerkte voorbeeld wordt een `Mesh`-object met een bijbehorend `Materiaal` aan dit prop doorgegeven.
+
+## Gebruik met modellen
+
+De component `<primitive />` is vooral handig voor het renderen van complexe objecten, zoals modellen die vanuit externe bronnen zijn geladen. Het volgende voorbeeld laat zien hoe u een model uit een GLTF-bestand laadt en het rendert met behulp van de `<primitive />` component.
+
+```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>
+```

docs/nl/api/composables.md

@@ -0,0 +1,236 @@
+# Composables
+
+De Composition API van Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) stelt je in staat om herbruikbare logica te bouwen die met meerdere componenten gedeeld kan worden. Ook kun je custom hooks maken die je kan gebruiken in je componenten.
+
+**TresJS** maakt enorm gebruik van deze API om een reeks samenstelbare functies te creëren die kunnen worden gebruikt om animaties te maken, interactie te hebben met de scène en meer. Hiermee kun je ook complexere scènes maken die misschien niet mogelijk zijn met alleen de Vue-componenten (texturen, laders, enz.).
+
+De kern van **TresJS** gebruikt deze composables intern, dus u zou dezelfde API gebruiken als de kern. Componenten die moeten worden bijgewerkt op de interne renderlus, gebruiken bijvoorbeeld de `useRenderLoop` composable om een callback te registreren die elke keer wordt aangeroepen als de renderer de scène bijwerkt.
+
+## useRenderLoop
+
+De composable `useRenderLoop` is de kern van **TresJS**-animaties. Hiermee kunt u een callback registreren die wordt aangeroepen met de eigen refresh rate. Dit is de belangrijkste composable in **TresJS**.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+onLoop(({ delta, elapsed, clock }) => {
+  // I will run at every frame ~60FPS (depending of your monitor)
+})
+```
+
+::: warning
+Houd rekening met de prestatie-implicaties van het gebruik van deze composable. Het wordt bij elk frame uitgevoerd, dus als je veel logica in je callback hebt, kan dit de prestaties van je app beïnvloeden. Vooral als u reactieve states of references bijwerkt.
+:::
+
+De `onLoop` callback ontvangt een object met de volgende eigenshappen gebaseerd op de [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
+
+- `delta`: De deltatijd tussen het huidige en het laatste frame. Dit is de tijd in seconden sinds het laatste frame.
+- `elapsed`: De verstreken tijd sinds het begin van de render loops.
+
+Deze composable is gebaseerd op `useRafFn` van [vueuse](https://vueuse.org/core/useRafFn/). Met dank aan [@wheatjs](https://github.com/wheatjs) voor de geweldige bijdrage.
+
+### Voor en na de render
+
+U kunt ook een callback registreren die wordt aangeroepen vóór en nadat de renderer de scène heeft bijgewerkt. Dit is handig als je een profiler toevoegt om bijvoorbeeld de FPS te meten.
+
+```ts
+const { onBeforeLoop, onAfterLoop } = useRenderLoop()
+
+onBeforeLoop(({ delta, elapsed }) => {
+  // Ik zal uitvoeren voordat de renderer de scène bijwerkt
+  fps.begin()
+})
+
+onAfterLoop(({ delta, elapsed }) => {
+  // Ik zal uitvoeren nadat de renderer de scène heeft bijgewerkt
+  fps.end()
+})
+```
+
+### Pauzeren en doorgaan
+
+U kunt de weergavelus pauzeren en hervatten met behulp van de blootgestelde methoden `pause` en `resume`.
+
+```ts
+const { pause, resume } = useRenderLoop()
+
+// Pauzeer de render loop
+pause()
+
+// Hervat de render loop
+resume()
+```
+
+U kunt ook de actieve status van de render loop verkrijgen met behulp van de eigenschap `isActive`.
+
+```ts
+const { resume, isActive } = useRenderLoop()
+
+console.log(isActive) // false
+
+resume()
+
+console.log(isActive) // true
+```
+
+## useLoader
+
+De `useLoader` composable stelt je in staat assets the laden met behulp van de [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Het returned een promise met geladen asset.
+
+```ts
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+```
+
+Omdat de `useLoader` composable een promise returned, kun je deze gebruiken met `async/await` or `then/catch`. Als je het op een component gebruikt, zorg er dan voor dat je er een `Suspense` component omheen zet. Zie [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) voor meer informatie.
+
+```vue
+<template>
+  <Suspense>
+    <TheComponentUsingLoader />
+  </Suspense>
+</template>
+```
+
+## useTexture
+
+De  `useTexture` composable stelt je in staat om textures te laden met behulp van de [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader). Het returned een promise met de geladen texture(s).
+
+```ts
+const texture = await useTexture(['path/to/texture.png'])
+```
+
+**useTexture** accepteert ook een object met de volgende eigenschappen:
+
+- `map`: een basistextuur die op het oppervlak van een object wordt aangebracht
+- `displacementMap`: een textuur die wordt gebruikt om hobbels of inkepingen aan het oppervlak van het object toe te voegen
+- `normalMap`: een textuur die wordt gebruikt om oppervlaktedetails en variaties in schaduw aan het object toe te voegen
+- `roughnessMap`:een textuur die wordt gebruikt om ruwheid of een matte afwerking aan het oppervlak van het object toe te voegen
+- `metalnessMap`: en textuur die wordt gebruikt om een metaalachtig effect aan het oppervlak van het object toe te voegen
+- `aoMap`: een textuur die wordt gebruikt om omgevingsocclusie (schaduw in gebieden waar licht wordt geblokkeerd door andere objecten) aan het object toe te voegen.
+- `alphaMap`: een textuur die wordt gebruikt om alpha (het zwarte gedeelte wordt transparant weergegeven) aan het object toe te voegen. Het is noodzakelijk om :trasparent="true" in te stellen op het materiaal om deze kaart te gebruiken
+- `matcap`: deze textuur codeert de kleur en shading van het materiaal.
+
+n dat geval zal het een object returnen met de geladen texturen.
+
+```ts
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
+  map: 'path/to/albedo.png',
+  displacementMap: 'path/to/height.png',
+  normalMap: 'path/to/normal.png',
+  roughnessMap: 'path/to/roughness.png',
+  metalnessMap: 'path/to/metalness.png',
+  aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
+  matcap: 'path/to/matcap.png',
+})
+```
+
+Dan kun je de textures binden aan het materiaal
+
+```vue
+<template>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial
+        :map="map"
+        :displacement-map="displacementMap"
+        :normal-map="normalMap"
+        :roughness-map="roughnessMap"
+        :metalness-map="metalnessMap"
+        :ao-map="aoMap"
+        :alpha-map="alphaMap"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Vergelijkbaar met de bovenstaande composable, returned de `useTexture` composable een promise, je kunt deze gebruiken met `async/await` of `then/catch`. Als je het op een component gebruikt, zorg er dan voor dat je er een `Suspense` component omheen zet.
+
+## useSeek
+
+De `useSeek` composable biedt utilities waarmee u eenvoudig door complexe ThreeJS-scènes en object-child-grafieken kunt navigeren. Het exporteert vier functies waarmee u onderliggende objecten kunt vinden op basis van specifieke eigenschappen.
+
+```ts
+const { seek, seekByName, seekAll, seekAllByName } = useSeek()
+```
+
+De zoekfunctie accepteert drie parameters:
+
+- `parent`: een ThreeJS-scène of Object3D.
+- `property`: de eigenschap die moet worden gebruikt in de zoekvoorwaarde.
+- `value`: De waarde van de eigenschap die moet overeenkomen.
+
+De functies `seek` en `seekByName` doorlopen het object en returnen het child object met de opgegeven eigenschap en waarde. Als er geen child met de opgegeven eigenschap en waarde wordt gevonden, returned het null en wordt er een waarschuwing geregistreerd.
+
+```ts
+const carRef = ref(null)
+
+watch(carRef, ({ model }) => {
+  if (model) {
+    const car = model.children[0]
+
+    const body = seek(car, 'name', 'Octane_Octane_Body_0')
+    body.color.set(new Color('blue'))
+  }
+})
+```
+
+Op dezelfde manier returnen de functies `seekAll` en `seekAllByName` een array van child objecten waarvan de eigenschap de gegeven waarde bevat. Als er geen overeenkomsten worden gevonden, returnen ze een lege array en wordt er een waarschuwing gelogged.
+
+```ts
+const character = ref(null)
+
+watch(character, ({ model }) => {
+  if (model) {
+    const bones = seekAll(character, type, 'Bone')
+  }
+})
+```
+
+## useTresContext
+Deze composable is om toegang te bieden tot het state model dat meerdere nuttige eigenschappen bevat.
+
+```ts
+const { camera, renderer, camera, cameras } = useTresContext()
+
+```
+
+::: warning
+`useTresContext` kan alleen gebruikt worden in een `TresCanvas` omdat `TresCanvas` werkt als de provider voor de context data. Gebruik [de context exposed door TresCanvas](tres-canvas#exposed-public-properties) als je merkt dat je het nodig hebt in parent componenten van TresCanvas.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+
+const context = useTresContext()
+</script>
+```
+
+### Properties of context
+| Eigenschap | Beschrijving |
+| --- | --- |
+| **camera** | De huidige actieve camera |
+| **cameras** | De camera's die bestaan in de scene |
+| **controls** | De controls van je scene |
+| **deregisterCamera** | Een methode om een camera af te melden. Dit is alleen nodig als u handmatig een camera aanmaakt. Camera's in de template worden automatisch afgemeld. |
+| **extend** | Breid de component calalogus uit. Zie [extending](/nl/advanced/extending) |
+| **raycaster** | De globale raycaster gebruikt voor pointer events |
+| **registerCamera** | Een methode om een camera te registreren. Dit is alleen nodig als u handmatig een camera aanmaakt. Camera's in de template worden automatisch geregistreerd.|
+| **renderer** | De [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) van je scene |
+| **scene** | De [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
+| **setCameraActive** | Een methode om de actieve camera te zetten |
+| **sizes** | Bevat breedte, hoogte en aspect ratio van je canvas |
+

docs/nl/api/events.md

@@ -0,0 +1,27 @@
+# Events
+
+**TresJS** componenten zenden pointer events uit wanneer er interactie mee is. Dit is het geval voor de componenten die three.js-klassen vertegenwoordigen die zijn afgeleid van [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (zoals netten, groepen,...).
+
+<StackBlitzEmbed project-id="tresjs-events" />
+
+## Pointer Events
+
+```html
+<TresMesh
+  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
+  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
+  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
+  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
+/>
+```
+
+| Event         | wordt afgevuurd, wanneer ...                                                          | Event Handler Parameter Type(s)                                                                                                                                                                       |
+| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... de events pointerdown and pointerup vuurt op hetzelfde object de een na de ander | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-move  | ... de pointer hangt boven het object                                            | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-enter | ... de pointer gaat het object in                                                | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| pointer-leave | ... de pointer is uit het object aan het gaan                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/pointerEvent)                                                                                                                         |
+
+De returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) bevat de [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) die het event triggerde. Je kan het benaderen via `intersection.object`.
+
+Standaard voorkomen objecten die vóór anderen zijn geplaatst met event handlers niet dat deze gebeurtenissen worden geactiveerd. Dit gedrag kan worden bereikt door de prop `blocks-pointer-events` te gebruiken.

docs/nl/api/instances-arguments-and-props.md

@@ -0,0 +1,142 @@
+# Instanties
+
+Het kernidee van **Tres** is een _autogenerated catalogue_ van alle ThreeJS-elementen. Deze catalogus wordt gegenereerd op basis van de ThreeJS-broncode en is dus altijd up-to-date.
+
+Wanneer je ThreeJS gebruikt, moet u de elementen importeren die u wilt gebruiken. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, moet je deze importeren uit het `three`-pakket:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+Met **Tres** hoef je niets te importeren, omdat **Tres** automatisch een **Vue-component genereert op basis van de drie objecten die je in CamelCase wilt gebruiken met een Tres-voorvoegsel**. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, gebruikt je de component '`<TresPerspectiveCamera />`.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+Dit betekent dat je dezelfde [documentatie](https://threejs.org/docs/) kunt gebruiken als wanneer je gewone ThreeJS gebruikt, maar met de kracht van Vue.
+
+## Objecten declareren
+
+Als we dit argument volgen, zou je een instantie als volgt moeten kunnen opmaken: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+Maar met **Tres** is dit niet nodig. U kunt eigenschappen declaratief als volgt definiëren: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Argumenten
+
+Sommige ThreeJS-objecten hebben argumenten, de constructor `PerspectiveCamera` heeft bijvoorbeeld de volgende argumenten:
+
+- `fov` - Camera frustum vertical field of view.
+- `aspect` - Camera frustum aspect ratio.
+- `near` - Camera frustum near plane.
+- `far` - Camera frustum far plane.
+
+Om deze argumenten door te geven aan de `TresPerspectiveCamera` component, kunt je de `args` prop gebruiken:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+Dit is hetzelfde als dit doen:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+## Eigenschappen
+
+Je kunt ook eigenschappen aan het component doorgeven. De `TresAmbientLight` heeft bijvoorbeeld een `intensity` eigenschap, dus je kunt deze als volgt aan de component doorgeven:
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Set
+
+Alle eigenschappen waarvan het onderliggende object een `.set()`-methode heeft, hebben een snelkoppeling om de waarde als een array te ontvangen. De `TresPerspectiveCamera` heeft bijvoorbeeld de eigenschap `position`, wat een `Vector3`-object is, dus je kunt deze als volgt aan de component doorgeven:
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+Om transformatie-eigenschappen zoals positie, rotatie en schaal te specificeren, is er een afkorting beschikbaar waarmee u direct de assen kunt aangeven die u binnen de props wilt instellen. Een soortgelijke afkorting is ook beschikbaar voor de kleureigenschap.
+
+<!-- Ik heb de kleursyntaxis gewijzigd van vue naar html, omdat vue defect lijkt en geneste componenten niet kleurt -->
+```html
+<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
+  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
+</TresMesh>
+```
+
+::: warning
+Wanneer u de rotatie-eigenschap instelt in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), wordt standaard de volgorde 'XYZ' gebruikt.
+Het is belangrijk op te merken dat bij het instellen van de rotatie-eigenschap met de afkorting de volgorde waarin u de hoeken instelt van belang is. Voor meer informatie over dit onderwerp verwijzen wij je naar [Euler angles](https://en.wikipedia.org/wiki/Euler_angles)
+:::
+
+```vue
+<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
+
+<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
+
+<!-- Merk op dat de volgorde van de rotatie-eigenschappen van belang is, en het verwisselen van de volgorde kan tot verschillende uitkomsten leiden. -->
+```
+
+### Scalar
+
+Een andere snelkoppeling die u kunt gebruiken is het doorgeven van een scalar waarde aan een eigenschap die een `Vector3`-object verwacht, waarbij u dezelfde waarde gebruikt voor de rest van de vector:
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Kleuren
+
+Je kan kleuren aan de componenten doorgeven met behulp van de `color` prop, die een string met de kleurnaam of een hexadecimale waarde accepteert:
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Methodes
+
+Sommige onderliggende eigenschappen zijn eigenlijk methoden, de `TresPerspectiveCamera` heeft een `lookAt`-methode die is overgenomen van [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), dus je kan deze de coordinaten naar het component doorgeven als volgt:
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/nl/api/tres-canvas.md

@@ -0,0 +1,104 @@
+# TresCanvas
+
+Het onderdeel `TresCanvas` is de core van Tres. Het is degene die de ThreeJS `WebGLRenderer` creëert.
+
+```vue{2,5}
+<template>
+  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+    <TresPerspectiveCamera />
+      <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+## Canvas grootte
+
+De component `TresCanvas` gebruikt de grootte van het parent element als canvasgrootte. Als je de window size als canvasgrootte wilt gebruiken, kun je de `window-size` prop op `true` zetten.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+Of je kan CSS gebruiken om jouw canvasgrootte in te stellen.
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#canvas {
+  height: 100%;
+  width: 100%;
+}
+```
+
+## Presets
+
+Tres wordt geleverd met een paar presets voor de component `TresCanvas`. Je kunt ze gebruiken door de `preset` prop in te stellen.
+
+### Realistic
+
+De `realistic` preset maakt het eenvoudig om de renderer in te stellen voor meer realistische 3D-scènes.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+Het is gelijk aan:
+
+```ts
+renderer.shadows = true
+renderer.physicallyCorrectLights = true
+renderer.outputColorSpace = SRGBColorSpace
+renderer.toneMapping = ACESFilmicToneMapping
+renderer.toneMappingExposure = 3
+renderer.shadowMap.enabled = true
+renderer.shadowMap.type = PCFSoftShadowMap
+```
+
+## Props
+
+| Prop | Beschrijving | Standaard |
+| ---- | ---- | --- |
+| **alpha** | Beheert de standaardwaarde voor duidelijke alfa. Wanneer ingesteld op true, is de waarde 0. Anders is het 1. | false |
+| **antialias** |Of anti-aliasing moet worden uitgevoerd. | `true` |
+| **camera** | Een handmatige camera die door de renderer moet worden gebruikt. | |
+| **clearColor** | De kleur die de renderer gebruikt om het canvas leeg te maken. | `#000000` |
+| **context** | Dit kan worden gebruikt om de renderer aan een bestaand [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) te koppelen | |
+| **depth** | Of de drawing buffer een [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) heeft van tenminste 16 bits. | `true` |
+| **disableRender** | Blokkeer render op requestAnimationFrame, handig voor PostProcessing | `false` |
+| **failIfMajorPerformanceCaveat** | Er wordt gedetecteerd of het maken van de renderer zal mislukken bij lage prestaties. Zie [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
+| **logarithmicDepthBuffer** | Of de logarithmic depth buffer gebruikt moet worden. Het kan zijn dat dit noodzakelijk is als je te maken hebt met flinke verschillen in scale in een enkele scene. Merk op dat deze setting gebruik maakt van gl_FragDepth wanneer deze beschikbaar is en deze schakelt [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) uit en kan een verlies in prestaties veroorzaken. | `false` |
+| **outputColorSpace** | Definieert de uitvoercodering | `LinearEncoding` |
+| **powerPreference** | Geeft een hint aan de user-agent die aangeeft welke configuratie van GPU geschikt is voor deze WebGL-context. Kan "high-performance", "low-power" or "default" zijn. | `default` |
+| **precision** | Shader presisie. Kan "highp", "mediump" or "lowp" zijn. | "highp" als deze is ondersteund door het apparaat |
+| **premultipliedAlpha** | Of de renderer ervan uitgaat dat kleuren [premultiplied alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha) hebben. | `true` |
+| **preserveDrawingBuffer** | Of de buffers moeten worden behouden totdat ze handmatig worden gewist of overschreven.. | `false` |
+| **shadows** | Schakelt shadows in de renderer in | `false` |
+| **shadowMapType** | Zet de shadow map type | `PCFSoftShadowMap` |
+| **stencil** | Of de drawing buffer een [stencil buffer](https://en.wikipedia.org/wiki/Stencil_buffer) heeft van tenminste 8 bits. | `true` |
+| **toneMapping** | Definiërt de tone mapping exposure gebruikt door de renderer. | `NoToneMapping` |
+| **toneMappingExposure** | Exposure level van tone mapping. | `1` |
+| **useLegacyLights** | Of de legacy belichtingsmodus gebruikt moet worden of niet | `true` |
+| **windowSize** | Of de window grootte gebruikt moet worden als de canvas grootte of de parent element. | `false` |
+
+### Standaard waardes
+
+Tres probeert zo min mogelijk een mening te hebben. Dat is de reden waarom het vrijwel geen standaardwaarde voor de `TresCanvas`-component instelt. Het gebruikt de standaardinstellingen van [three.js](https://threejs.org/). De enige uitzondering is de prop `antialias`. Die is standaard ingesteld op `true`.
+
+## Blootgestelde public eigenschappen
+
+| Eigenschap | Beschrijving |
+| ---- | ---- |
+| context | zie [useTresContext](composables#usetrescontext) |

docs/nl/cookbook/basic-animations.md

@@ -0,0 +1,97 @@
+---
+title: Basis Animaties
+description: Hoe u de useRenderLoop-composable gebruikt om uw objecten te animeren.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Basis Animaties
+
+Deze gids helpt je op weg met basisanimaties in TresJS.
+
+We zullen een eenvoudige scène bouwen met een kubus. Vervolgens zullen we de kubus animeren om rond de Y- en Z-as te roteren.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
+
+## useRenderLoop
+
+De composable `useRenderLoop` is de kern van TresJS-animaties. Hiermee kunt u een callback registreren die wordt aangeroepen telkens wanneer de renderer de scène bijwerkt met de refresh rate van de browser.
+
+Voor een gedetailleerde uitleg over hoe het werkt, raadpleegt u de documentatie [useRenderLoop](/nl/api/composables#userenderloop).
+
+```ts
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  // Ik run elke frame op ~ 60FPS (depending of your monitor)
+})
+```
+
+## De reference naar de kubus verkrijgen
+
+Om de kubus te animeren, moeten we er een reference naar krijgen. We kunnen dit doen door een [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) door te geven met behulp van de `ref` prop aan de `TresMesh` component. Hiermee wordt de THREE-instantie returned.
+
+Om de prestaties te verbeteren, zullen we een [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) gebruiken om de referentie op te slaan in plaats van een gewone Ref. Ontdek [hier] waarom (../advanced/caveats.md#reactivity)
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+</script>
+
+<template>
+  <TresCanvas>
+    <TresMesh
+      ref="boxRef"
+      :scale="1"
+    >
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## De kubus animeren
+
+Nu we een verwijzing naar de kubus hebben, kunnen we deze animeren. We zullen de `onLoop` callback gebruiken om de rotatie van de kubus bij te werken.
+
+```ts
+onLoop(({ delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += delta
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+```
+
+Je kan ook de `delta` van de interne [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) gebruiken of de `elapsed` om de kubus te animeren.
+
+## Maar waarom gebruiken we geen reactiviteit?
+
+Je vraagt je misschien af waarom we geen reactiviteit gebruiken om de kubus te animeren. Het antwoord is simpel: prestaties.
+
+```vue
+// Dit is een slecht idee ❌
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRotation = reactive([0, 0, 0])
+
+onLoop(({ delta, elapsed }) => {
+  boxRotation[1] += delta
+  boxRotation[2] = elapsed * 0.2
+})
+</script>
+```
+
+We kunnen in de verleiding komen om reactiviteit te gebruiken om de kubus te animeren. Maar het zou een slecht idee zijn.
+De reden is dat [Vue's reactivity is gebaseerd op Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) en niet is ontworpen om te worden gebruikt in een render loop die 60 of meer keer per seconde wordt bijgewerkt.
+
+De onderstaande ingesloten pagina toont de [benchmark van een proxy versus een gewoon object](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Zoals u kunt zien, is de proxy 5 keer langzamer dan het reguliere object.
+
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+U kunt hier meer over lezen in de sectie [Caveats](../advanced/caveats.md#reactivity).

docs/nl/cookbook/groups.md

@@ -0,0 +1,40 @@
+---
+title: Groups
+description: Leer hoe je meerdere objecten kunt groeperen in de scene.
+author: alvarosabu
+thumbnail: /recipes/groups.png
+difficulty: 0
+---
+
+# Groep
+
+Een `<TresGroup>` is een instantie van de [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) klasse die bijna gelijk is aan [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) maar je in staat stelt om **meerdere objecten samen te groeperen in de scene** zodat deze tegelijk gemanipuleerd kunnen worden als een enkele unit. (transform, rotation, etc).
+
+## Gebruik
+
+```vue{13,22}
+<script setup lang="ts">
+const groupRef = ref()
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (groupRef.value) {
+    groupRef.value.rotation.y += 0.01
+  }
+})
+</script>
+<template>
+  <TresCanvas>
+    <TresGroup ref="groupRef" :position="[2,0,0]">
+      <TresMesh>
+        <TresBoxGeometry />
+        <TresMeshBasicMaterial color="red" />
+      </TresMesh>
+      <TresMesh>
+        <TresSphereGeometry />
+        <TresMeshBasicMaterial color="blue" />
+      </TresMesh>
+    </TresGroup>
+  </TresCanvas>
+</template>
+```

docs/nl/cookbook/index.md

@@ -0,0 +1,5 @@
+# Kookboek 🍳🧑‍🍳
+
+Ontdek begeleide recepten om u op weg te helpen met de basisprincipes van het gebruik van Tres. Elk recept is ontworpen om u te helpen de kernconcepten van Tres te begrijpen en hoe u deze in uw projecten kunt gebruiken.
+
+<Cookbook />

docs/nl/cookbook/lights-shadows.md

@@ -0,0 +1,183 @@
+---
+title: Lichten en schaduwen
+description: Leer hoe u licht en schaduw aan uw scène kunt toevoegen.
+author: alvarosabu
+thumbnail: /recipes/lights-and-shadows.png
+difficulty: 0
+---
+
+# Light-schaduwen
+
+Deze gids helpt u aan de slag te gaan met eenvoudig licht en schaduwen in TresJS.
+
+We zullen een eenvoudige scène bouwen met drie meshes en een vlak, maar slechts twee zullen schaduwen hebben.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
+
+## De scene opzetten (optioneel)
+
+We importeren alle modules die we nodig hebben, voor het comfort kunnen we de orbit-controls van cientos gebruiken,
+[kijk hier om te weten hoe](/nl/cookbook/orbit-controls).
+
+Laten we vier objecten in onze scène plaatsen, één zal het vlak zijn dat schaduwen ontvangt, twee ervan zullen schaduwen werpen en de laatste zal helemaal geen schaduw werpen.
+
+Ik ga [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial) gebruiken. Simpelweg omdat we de ‘zachte schaduw’ gemakkelijk kunnen zien.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
+
+    <TresMesh
+      :position="[-2, 2, 0]"
+      :rotation="[0, Math.PI, 0]"
+    >
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
+    </TresMesh>
+    <TresMesh
+      :position="[0, 0, 0]"
+    >
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+    <TresMesh
+      :position="[2, -2, 0]"
+    >
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresMesh
+      :position="[0, -3, 0]"
+      :rotation="[-Math.PI / 2, 0, 0]"
+    >
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshStandardMaterial color="#f7f7f7" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Lichten (uitleg)
+
+Zoals u weet is elke instantie in [ThreeJs](https://threejs.org/) beschikbaar in **TresJs**, en dat geldt ook voor alle lichttypen. We hoeven alleen maar het voorvoegsel `Tres` toe te voegen om ze te gebruiken.
+
+Maar niet alle lichten kunnen schaduwen werpen, deze definitie komt rechtstreeks van ThreeJs en is logisch, bijvoorbeeld het doel van een [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) is bedoeld om elke kant van uw scène te verlichten, dus het heeft geen zin om schaduwen te werpen, integendeel, een [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) het imiteren van de zon kan en moet schaduwen werpen.
+
+## Schaduwen (uitleg)
+
+Er zijn ook veel soorten schaduwen, de "zachte schaduw" wordt bijvoorbeeld automatisch gegenereerd wanneer een object meer licht van één kant ontvangt, maar kort samengevat moet een "ThreeJS-standaardschaduw" die naar een ander oppervlak is gericht, door een mesh worden geworpen en een ander mesh moet het ontvangen. Zoals we in ons voorbeeld zien, ontvangt het `Plane` een schaduw, maar werpt deze niet. Houd er rekening mee dat niet alle materialen schaduw kunnen werpen of ontvangen.
+
+Intern genereert ThreeJS automatisch een nieuwe mesh met een [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) die in elk frame wordt bijgewerkt, daarom als je animaties toepast, wordt de schaduw ook geanimeerd, maar ook waarom je schaduwen zorgvuldig moet gebruiken, omdat ze je prestaties kunnen vertragen.
+
+::: warning
+Als u op deze manier overmatig gebruik maakt van schaduwen, kunnen uw prestaties afnemen. Er zijn echter manieren om uw prestaties te verbeteren. Voor meer informatie kunt u [deze video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256) bekijken.
+:::
+
+## Schaduwen aanzetten
+
+We kunnen dit verdelen in drie stappen:
+
+### Activeer schaduwen op de renderer
+
+```vue
+//...
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    shadows
+    window-size
+  />
+  //...
+</template>
+```
+### Stel het licht in om schaduwen te werpen
+
+We kunnen simpel de boolean `cast-shadow` toevoegen, Vue snapt dit als een `prop` met een waarde van `true`.
+
+_Het AmbientLight genereert hier geen enkele vorm van schaduw_
+
+```vue
+//...
+
+<template>
+  <TresAmbientLight :intensity="1" />
+  <TresDirectionalLight
+    cast-shadow
+    :position="[0, 2, 0]"
+    :intensity="1"
+  />
+  
+  //...
+</template>
+```
+### Stel de objecten in om schaduwen te werpen of te ontvangen
+
+Op dezelfde manier als in de vorige stap stellen we de mesh waarop we schaduw willen werpen (onze bol) in met de `cast-shadow` prop, en stellen we het object in om schaduw te ontvangen (ons vlak) met de `receive-shadow` prop.
+
+```vue
+//...
+
+<template>
+  <TresMesh
+    cast-shadow
+    :position="[2, -2, 0]"
+  >
+    <TresSphereGeometry />
+    <TresMeshToonMaterial color="#FBB03B" />
+  </TresMesh>
+  <TresMesh
+    receive-shadow
+    :position="[0, -3, 0]"
+    :rotation="[-Math.PI / 2, 0, 0]"
+  >
+    <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+    <TresMeshStandardMaterial color="#f7f7f7" />
+  </TresMesh>
+  //...
+</template>
+```
+
+Nu hebben we alle noodzakelijke stappen om schaduwen aan onze scène toe te voegen, en als we toepassen wat we hebben geleerd in [basisanimaties](/nl/cookbook/basic-animations), en we voegen beweging toe aan onze kubus, zul je zien dat de schaduw ook geanimeerd is. 🤩
+
+```vue
+<script setup>
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+
+const boxRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+  }
+})
+</script>
+
+<template>
+  //...
+  <TresMesh
+    ref="boxRef"
+    cast-shadow
+    :position="[0, 0, 0]"
+  >
+    <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+    <TresMeshToonMaterial color="#4F4F4F" />
+  </TresMesh>
+  //...
+</template>
+```
+
+_Merk op dat ik met opzet geen `cast-shadow` heb toegepast op de `Kegel`, zodat deze geen schaduw werpt_

docs/nl/cookbook/load-models.md

@@ -0,0 +1,148 @@
+---
+title: Modellen laden
+description: Laad 3D modellen in je Tres scenes.
+author: alvarosabu
+thumbnail: /recipes/gltf-model.png
+difficulty: 1
+---
+
+# Modellen laden
+
+> Alle modellen in deze gids zijn van [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
+
+3D-modellen zijn beschikbaar in honderden bestandsformaten, elk met verschillende doeleinden, diverse functies en variërende complexiteit.
+
+Voor deze handleiding gaan we ons concentreren op het laden van gLTF-modellen (GL Transmission Format), het meest gebruikelijke formaat voor 3D-modellen op het web.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
+
+Er zijn meerdere manieren om modellen te laden in TresJS:
+
+::: warning
+Houd er rekening mee dat we in de bovenstaande voorbeelden `await`s op het hoogste niveau gebruiken. Zorg ervoor dat dergelijke code wordt verpakt met een [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. Zie Suspense voor meer informatie.
+:::
+
+## `useLoader` gebruiken
+
+Met de  `useLoader` composable kunt u elk type three.js-lader en een URL doorgeven waaruit de bron kan worden geladen. Het returned een `Promise` met de geladen bron.
+
+Voor een gedetailleerde uitleg over het gebruik van `useLoader`, bekijk de [useLoader](/nl/api/composables#use-loader) documentatie.
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+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>
+```
+
+> 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.
+
+Merk op dat we in het bovenstaande voorbeeld de component `Suspense` gebruiken om de component `TresCanvas` te wrappen. Dit komt omdat `useLoader` een `Promise` returned en we moeten wachten tot dit is resolved voordat de scène wordt weergegeven.
+
+## `useGLTF` gebruiken
+
+Een gemakkelijkere manier om modellen te laden is het gebruik van de `useGLTF` composable die beschikbaar is in het pakket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
+```
+
+Een voordeel van het gebruik van `useGLTF` is dat je een `draco` prop kunt doorgeven om [Draco-compressie](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) in te schakelen voor het model. Hierdoor wordt de grootte van het model kleiner en worden de prestaties verbeterd.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+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'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <primitive :object="nodes.MyModel" /> // Houd er rekening mee dat "MyModel" hier slechts een tijdelijke aanduiding is
+  </TresCanvas>
+</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).
+
+```vue{2,9}
+<script setup lang="ts">
+import { OrbitControls, GLTFModel } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <GLTFModel path="/models/AkuAku.gltf" draco />
+    </Suspense>
+    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
+</template>
+```
+
+Deze specifieke aanpak is eenvoudiger, maar geeft u minder controle over het model.
+
+## useFBX
+
+De `useFBX` composable is beschikbaar via de [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+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>
+```
+
+## FBXModel
+
+De component `FBXModel` is een wrapper rond de `useFBX` composable, die beschikbaar is via het pakket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Het is vergelijkbaar in gebruik met `GLTFModel`:
+
+```vue{2,9}
+<script setup lang="ts">
+import { OrbitControls, FBXModel } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+      <Suspense>
+        <FBXModel path="/models/AkuAku.fbx" />
+      </Suspense>
+      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
+</template>
+```

docs/nl/cookbook/load-textures.md

@@ -0,0 +1,84 @@
+---
+title: Textures laden
+description: Voeg texture maps toe aan je TresJS objects.
+author: alvarosabu
+thumbnail: /recipes/load-textures.png
+difficulty: 1
+---
+
+# Textures laden
+
+> Alle textures uit dit voorbeeld zijn van [ambientcg](https://ambientcg.com/).
+
+Driedimensionale (3D) texturen zijn afbeeldingen die meerdere gegevenslagen bevatten, waardoor ze volume kunnen weergeven of driedimensionale structuren kunnen simuleren. Deze texturen worden vaak gebruikt in 3D graphics en visuele effecten om het realisme en de complexiteit van scènes en objecten te verbeteren.
+
+<SandboxDemo url="https://play.tresjs.org/#eNq9Vm1PGzkQ/itW7gNBJbvhVVWOVBToVb2DgoBvTVU5u5PE4LUt25uQi3K/5X7L/bIb27tZB1qUfqAgRcnj8TPPjMfjWbTuNJj3SiXTElq91rHJNFOWGLClIpyKcX/QsmbQejcQrFBSW3IHj7bUkJ9SzslIy4JsJWkMOqqt31f2C+JcnFExpYYsqx0nFrF7k2ZSr9te6SGzZ1JYLfl3zBkIK43b4f6P0yAXxeEPC4Xi1AL+IuS4cep+EpJxoLqTSS41hvTb273z07PDQSssmgnN5ayypFxNaPg6YwLxjmF/QwCUnIHuKA0j0CAyQKoJG086CvRI6oIi5DidsZeBQtYjSmvY6bsGbRRklk3hjBagK6+E9JQ0zDIpkP/L7g7Z2yGHX2uxuDySU1w5WOlHiHomRHcjUGDMCHWTGBx5bLfb7dZgLQpl3ZbII0xIYoWtnXhkmz4z9lGdM+1ikoLyC8yNXY+m66M5wGhIjwmL25md48IeAhk1thPOovJznDbniMBxGh1ya6cVyqZTUJXcGymwgBdu16BawLrtEY84LK45t4BHZ60yvTTNcoH7c+BsqhMBNhWqSGPzk/3kMOmmOTM2dTBaD1o7z4hDdf4Md9iB9EcxfQWve7EzoA+Kik20r2xPDhI8/Iq5BpOCuT0x90TDRrzO7gQZD9+i3jdgijgNeO9LAxvnNzI/2e36BON1g8ekWM9uZYd1gTX4E8Rhw0vUaNjJoWAbkNamLviD5CjlbBhTOsblQCyxJq3JpBix8ZOKzGShGAd9pdxNWK9MvFdy9qfHrC5hpS+bQPbwHfzePAbJ11gsoKeY7uYoqR6DDcsfbj/j1Y0WC5mXvDqcHyzegJG8dBqD2WkpcpQd2Xm1n/wFY2J8Zz48+ltcBbUm1M4VePRL3SFWtRaArz5x3t4fx9kLWWoi20/2o4Q/fXs2e8YWBJv46oGpnqxoFSuoIt5x328AD1tfSKl++IYNBB68sUQNdbWT9AmdUWYjsrYPBxtWj2zVBafpLBkzOymHaKeRBPNpEywY3/zQAzUYiEkLygQ2QM9j0iGn2UNHy+whvcGP7v7ht72/vp0zg/0xg8JR3Kvxls8t3v8Veom+Q0p/oQAty/FEgDGv7P2m9tO4Fu5d5q/s97N38vGicUuLoeviV1nGS3c5XtP7+ye+ahXL7agsjZrgzHKDRd93pd8WJefxursQpiyw3KWo6ry/XvntYD4QwaDdXhDskpaS5TbpvwsXNU3JJxybcFDQpSDUEpiCnuONwfmG/PPfv0fdP65vSTsHHBxybB9EjshclpoUUjAr9bYjYSPSXslNppSXsF33gSd4oqWlrlckc/KmH/SgytAcnN4XZsRqXrkEM3EZwRaxInfTickodwMezk7xZLI2GeH2W7/nI8gCLEbawy5lqrENZyz/4YadZm6K3N5aKnKq80uUpBnljYn7m3aG+MQgV9NRmjEu/MUXu1ML7iY4TDV2q5HTV5Zz+2ySWv4PY68KvA==" />
+
+Er zijn twee manieren om 3D textures te laden in TresJS:
+
+## Middels `useLoader`
+
+Met de  `useLoader` composable kunt u elk type three.js-lader en een URL doorgeven waaruit de bron kan worden geladen. Het returned een `Promise` met de geladen bron.
+
+Voor een gedetailleerde uitleg over het gebruik van `useLoader`, bekijk de [useLoader](/nl/api/composables#use-loader) documentatie.
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three'
+
+const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+```
+
+Dan kun je de texture naar een materiaal sturen:
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+  </TresCanvas>
+</Suspense>
+```
+
+Merk op dat we in het bovenstaande voorbeeld de component `Suspense` gebruiken om de component `TresCanvas` te wrappen. Dit komt omdat `useLoader` een `Promise` returned en we moeten wachten tot dit is resolved voordat de scène wordt weergegeven.
+
+## `useTexture`gebruiken
+
+Een gemakkelijkere manier om texturen te laden is het gebruik van de `useTexture` composable. Het accepteert zowel een reeks URL's als een enkel object waarvan de textuurpaden in kaart zijn gebracht.
+
+Voor meer informatie over `useTexture`, bekijk de [useTexture](/nl/api/composables#use-texture) documentatie.
+
+```ts
+import { useTexture } from '@tresjs/core'
+
+const pbrTexture = await useTexture({
+  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
+  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
+  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
+  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
+  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
+  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
+  matcap: '/textures/black-rock/myMatcapTexture.jpg',
+  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
+})
+```
+Net als in het vorige voorbeeld kunnen we alle texturen via props aan een materiaal doorgeven:
+
+```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>
+```

docs/nl/cookbook/orbit-controls.md

@@ -0,0 +1,131 @@
+---
+title: OrbitControls
+description: Hoe u OrbitControls kunt gebruiken om met de scène te communiceren.
+author: alvarosabu
+thumbnail: /recipes/orbit-controls.png
+difficulty: 1
+---
+
+# OrbitControls
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
+
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is een cameracontroller waarmee je rond een doel kunt cirkelen. Het is een geweldige manier om je scène te verkennen.
+
+Het maakt echter geen deel uit van de kern van ThreeJS. Om het te gebruiken moet je het dus importeren vanuit de module `three/addons/controls/OrbitControls`.
+
+Dit levert een probleem op omdat **TresJS** automatisch een catalogus van de kern van Three maakt, zodat u deze als componenten kunt gebruiken.
+
+Gelukkig biedt **TresJS** een manier om de catalogus met componenten uit te breiden. U kunt dit doen door de `extend`-methode uit de kernbibliotheek te gebruiken.
+
+Voor meer informatie over het uitbreiden van uw TresJS-catalogus raadpleegt u de sectie [extending](/nl/advanced/extending.md).
+
+## OrbitControls gebruiken
+
+Om `OrbitControls` te gebruiken moet je die importeren via de `three/addons/controls/OrbitControls` module.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+Vervolgens moet u de catalogus met componenten uitbreiden met behulp van de `extend` methode.
+
+```js
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+```
+
+Nu kun je de `TresOrbitControls` component gebruiken in je scene.
+
+::: code-group
+
+```vue [OrbitControls.vue]
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+:::
+
+Omdat [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) een verwijzing naar de camera en de renderer nodig heeft. Moet je die als argumenten doorgeven.U kunt de composable [useTresContext](/nl/api/composables#usetrescontext) gebruiken om de camera en de renderer op te halen.
+
+::: warning
+`useTresContext` kan alleen binnen een `TresCanvas` worden gebruikt, omdat `TresCanvas` fungeert als de provider voor de context data. Daarom hebben we een subcomponent gemaakt met de naam `OrbitControls.vue`. Zie meer over [context](/nl/api/composables#usetrescontext).
+:::
+
+```ts
+import { useTresContext } from '@tresjs/core'
+
+const { camera, renderer } = useTresContext()
+```
+
+Dus de eindcode word zoiets als:
+
+::: code-group
+
+```vue [OrbitControls.vue]
+<script setup lang="ts">
+import { extend, useTresContext } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue] {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
+:::
+
+
+## OrbitControls van `cientos`
+
+Hier begint het fancy gedeelte. ✨  
+De `cientos` package bied ons de component `<OrbitControls />` wat een wrapper van de `OrbitControls` is van de [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+
+Het beste gedeelte? Je hoeft de catalogus niet te extenden of arguments door te geven.  
+It just works. 💯
+
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/nl/cookbook/shaders.md

@@ -0,0 +1,174 @@
+# Shaders
+
+Deze handleiding helpt u aan de slag te gaan met shaders in TresJS.
+
+We zullen een eenvoudige scène bouwen met een blob. Vervolgens zullen we de blob animeren om deze zachtjes te vervormen.
+
+::: warning
+_Basis kennis over hoe shaders werken is noodzakelijk_
+:::
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
+
+## De scene opzetten (optoneel)
+
+We importeren alle modules die we nodig hebben. Om het gemakkelijker te maken zullen we de orbit-controls van cientos importeren en gebruiken,
+[kijk hier om te zien hoe](/nl/cookbook/orbit-controls).
+
+Laten we nu onze camera in de `[11,11,11]` positie plaatsen.
+
+Om ons ten slotte te helpen met de locatie, voegen we een eenvoudig vlak toe, geroteerd in de X-as, met `[10, 10]` eenheden.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10]" />
+      <TresMeshBasicMaterial color="#444" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## ShaderMaterial
+
+Zoals u weet is elke instantie in [ThreeJs](https://threejs.org/) beschikbaar in **TresJs**, en dat geldt ook voor `ShaderMaterial`. We hoeven alleen maar het voorvoegsel `Tres` toe te voegen om het te gebruiken.
+
+Voor onze blob kunnen we een eenvoudige `SphereGeometry` gebruiken, waarbij enkele breedte- en hoogtesegmenten worden toegevoegd om een vloeiend effect te creëren, en onze blob 4 eenheden in de positieve Y-as plaatsen
+
+```vue
+<TresMesh :position="[0, 4, 0]">
+  <TresSphereGeometry :args="[2, 32, 32]" />
+  <TresShaderMaterial />
+</TresMesh>
+```
+
+Het `ShaderMaterial` accepteert speciale eigenschappen, zoals `uniforms` `vertexShader` en `fragmentShader`, zodat we het in onze scriptsectie kunnen maken en de binding met onze instantie kunnen maken.
+
+Voor dit voorbeeld zien onze uniformen er als volgt uit:
+
+```ts
+import { Vector2 } from 'three'
+
+//...
+const uniforms = {
+  uTime: { value: 0 },
+  uAmplitude: { value: new Vector2(0.1, 0.1) },
+  uFrequency: { value: new Vector2(20, 5) },
+}
+//..
+```
+
+Onze fragment shader ziet er als volgt uit:
+
+```ts
+//...
+const fragmentShader = `
+precision mediump float;
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
+}
+`
+//..
+```
+
+En tot slot onze vertexShader:
+
+```ts
+const vertexShader = `
+uniform vec2 uAmplitude;
+uniform vec2 uFrequency;
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
+    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
+
+    vec4 viewPosition = viewMatrix * modelPosition;
+    gl_Position = projectionMatrix * viewPosition;
+    vUv = uv;
+}
+`
+//..
+```
+
+## De blob animeren
+
+Vergelijkbaar met wat we leren in het voorbeeld van [Basic Animations](/nl/cookbook/basic-animations), beginnen we met het verwijzen naar onze blob, met behulp van [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+const blobRef = shallowRef(null)
+//...
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <TresMesh
+      ref="blobRef"
+      :position="[0, 4, 0]"
+    >
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms"/>
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+Zodra we dat hebben, kunnen we de `onLoop` callback gebruiken om onze `uTime` te animeren.
+
+ ```ts
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+ 
+ //...
+ const { onLoop } = useRenderLoop()
+ 
+onLoop(({ elapsed }) => {
+   if (blobRef.value) {
+     blobRef.value.material.uniforms.uTime.value = elapsed
+   }
+})
+ //...
+```
+
+En dat is alles, onze basisshader werkt soepel. 🎉
+
+## Gebruik van GLSL vite-pluging (optioneel)
+
+_Deze stap is volledig optioneel en uit scope van het **TresJs** team_
+
+Het inline definiëren van onze shader is niet altijd het beste idee, maar als u [vite](https://vitejs.dev/) gebruikt, kunt u uw `GLSL`-bestanden in een ander bestand plaatsen door gewoon de [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) (bekijk de link voor de officiële documentatie).
+
+En je zou een structuur kunnen hebben die er ongeveer zo uitziet:
+
+```
+├── src/
+│   ├── myTresJsComponent.vue
+│   ├── shaders/
+│       ├── vertexShader.glsl
+│       ├── fragmentShader.glsl
+```

docs/nl/cookbook/text-3d.md

@@ -0,0 +1,202 @@
+---
+title: Tekst 3D
+description: Add 3D tekst met gemak
+author: alvarosabu
+thumbnail: /recipes/text-3d.png
+difficulty: 1
+---
+
+# Text3D
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) is een van de manieren waarmee we 3D tekst in onze scene kunnen toevoegen.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqdVlFv2zYQ/iuEgsEbZkuOnXSd5gxe7G5YsbRF7LcqD7RES0wokiApO0Hg/74jKduUkWbp8hCYdx+/O3684+k5Wiqi/5Ay3jQkSqOJzhWVBmliGokY5uVVFhmdRb9nnNZSKIOe0TXWNF9UuBDbGyz7aHH71/VMMKEWEuekjz6JpeAEXJLyEu3QWoka9UylCOn9FvDY0DPMN1gfQFMDtnud5EJ1sZ/VipqZ4EYJ9gKcEm6EDnYsyaNpQXFiF/aAvYxnPBdcG1QydIWeM45QzghWLv0U9c7ej+bXs8te33q0O6JOkVENcRbMZIVTtMZMe4OHwFGXT5Kkp8pYhGiMbCDzvTzpqVwWZI56pV35wL2DU00SfzFwDbAwpJYMGwIrhCaBjJvBivICrqxk7soQ/Dn/F6K0JLmhGzLDNVEYpVJoaqjggP466o/6v95lEUr2m7p6H8yLBmi49pE9uxX64E9OAC74nCobWnDM/qFlZbqxh3006qMLGz2l3MBmap7AcR6PwJRjbQZe5TbKJDkeGAyTJFADlto8MfuzMjUD8VaiePL3XGNVUp6iIciJkMRF4dT2y4rYxFJ0Phz+4AxbWpjqsN5l/AzuwxP9BxahFc4fSiUaXgxyX1dnw6GNAzRwkS7BqB/5Sh3UWMb3WnDoPkeftQ5outQHtLawMawjiypjpE6TJC847C8IoxsVc2ISLuskhE/H8WU8TAqqTWLNgM4iV3YdYt9C38PtdwD9u5C+NXejmC3BDxLzt+R+wE4v4mF83jLvjXFN7Z6Q2z4sb+G1uCkwXr6HfH8mug5lgOeh0eTN+gbw6fnQCQydRx7juqtui4MKVqT4DmK/4TVqAA4KUtM3kO6h9vAX8buE0VVIaRmhNHdQk0bD87im5UlF5qKWlBH1Wdqu7VYmZkxsPzrb4Z10eyqSP7xgv9ePPuUvUCxEbUDu41VCjxLj3R8Wn+BpCZy1KBrWXs43nLdEC9bYHD3sGnoQ0g5wLtu/XYNB+y/1h0f34rSH6iRq4El31q/7x+5Qa95w54RzeHcds1dUOp5sHI8Dwfej6XT2hvMW6sHCGkVenpPhSAXceP7N+biffjU2OcyslvQK4S2mJojzoztyb19UCm/jkpqqWQFEAQVoZmIoCvcUAz/WkLROakw5PMeOwq5sEJ38Ekte2ol699Prk6ydJuP5Xm/UnRSD8z6CaTGEUXFEKLK2nyiw75asQ8ca0gTP/zqD3auTP6nCM1FAVZUNw8r1RBjhMASR+5T5uDiu3dy7Ibq6cSLAf6IoZij1okBenSsIJ6/7WhnPu6Mt2v0LMkc7LA=="/>
+
+Het maakt echter geen deel uit van de kern van ThreeJS. Om het te gebruiken moet je het dus importeren vanuit de module `three/addons/controls/TextGeometry`.
+
+Dit levert een probleem op omdat **TresJS** automatisch een catalogus van de kern van Three maakt, zodat u deze als componenten kunt gebruiken.
+
+Gelukkig biedt **TresJS** een manier om de catalogus met componenten uit te breiden. U kunt dit doen door de `extend` methode uit de kernbibliotheek te gebruiken.
+
+Voor meer informatie over het uitbreiden van uw TresJS-catalogus raadpleegt u de sectie [extending](/nl/advanced/extending.md).
+
+## TextGeometry gebruiken
+
+Om `TextGeometry` te gebruiken moet je het eerst importeren via de `three/addons/geometries/TextGeometry` module.
+
+```js
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+```
+
+Daarna moet je de catalogus van componenten extenden middels de `extend` method.
+
+```js
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+extend({ TextGeometry })
+```
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) heeft maar één argument nodig - de font. Je vind hieronder een voorbeeld.
+
+```js
+const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    loader.load(fontPath, (font) => {
+      resolve(font)
+    })
+  }
+  catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+```
+
+Vervolgens kunt u de component `TresTextGeometry` in een TresMesh in uw scène gebruiken
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+dan kunt u, net als in het voorbeeld, een object doorgeven met de gewenste configuraties.
+
+```ts
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+```
+
+We kunnen ook een matcapTexture doorgeven om de laatste details toe te voegen, met behulp van het TresMeshNormalMaterial in de TresMesh.
+
+```ts
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+
+  <TresMesh>
+    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+    <TresMeshNormalMaterial :matcap="matcapTexture" />
+  </TresMesh>
+```
+
+De uiteindelijke code zou er dus ongeveer zo uitzien:
+
+```vue
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { FontLoader } from 'three/addons/loaders/FontLoader'
+import { useTexture } from '/@/composables'
+
+extend({ TextGeometry })
+
+const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    loader.load(fontPath, (font) => {
+      resolve(font)
+    })
+  }
+  catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshNormalMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+We weten dat dit veel werk lijkt, maar het goede nieuws is dat er een veel eenvoudigere manier is
+
+## TextGeometry van `cientos`
+
+De `cientos` package bied een component genaamd `<Text3D />`, wat een wrapper van de `TextGeometry` is van de [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+
+Het beste gedeelte? Je hoeft de catalogus niet te extenden en je hoeft alleen de font als argument mee te geven.
+It just works. 💯 (Als er geen tekst is meegegeven dan zal de text TresJS zijn)
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <Text3D :font="fontPath" />
+  </TresCanvas>
+</template>
+```
+
+We kunnen de opties doorgeven als props
+
+```html
+<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
+```
+
+als de opties niet zijn opgegeven, zijn de standaardwaarden:
+
+```js
+size: 0.5,
+height: 0.2,
+curveSegments: 5,
+bevelEnabled: true,
+bevelThickness: 0.05,
+bevelSize: 0.02,
+bevelOffset: 0,
+bevelSegments: 4,
+```
+
+Standaard begint tekst in ThreeJS op de beginpositie van de mesh, dus het is [0,0,0] en de tekst begint daar, maar we kunnen deze centreren door gewoon de flag "center" door te geven
+
+```vue
+<Text3D :font="fontPath" :text="my 3d text" center />
+```

docs/nl/debug/devtools.md

@@ -0,0 +1,26 @@
+# Devtools
+
+Een van de moeilijkste dingen waarmee een ontwikkelaar wordt geconfronteerd bij het maken van 3D-ervaringen in de browser, is het debuggen. Het browser `canvas` is een zwarte doos en het is moeilijk om te weten wat er binnenin gebeurt. Het imperatieve karakter van [ThreeJS](https://threejs.org/) maakt het ongelooflijk moeilijk om fouten op te sporen, omdat je afhankelijk bent van `console.log` om te zien wat er aan de hand is, of van een derde partij om de scène te verfijnen en te inspecteren.
+
+Laat me niet beginnen met het controleren van de uitvoering van uw scène. 😱
+
+![developer debugging 3D](/debug-3D.png)
+
+Een van onze doelen met TresJS is om **de beste DX (Developer Experience)** te bieden bij het omgaan met 3D-scènes in de browser. Dankzij het declaratieve karakter van het ecosysteem plus de verscheidenheid aan oplossingen die het Vue-ecosysteem biedt, zoals de Vue Devtools, Nuxt en Vite, kunnen we ontwikkelaars een betere tool bieden om hun scènes te debuggen.
+
+## Introductie van de Devtools
+
+Vanaf <Badge text="^3.7.0" /> introduceren we TresJS Devtools, een aangepast infotabblad voor de [Official Vue Chrome Devtools](https://devtools.vuejs.org/guide/installation.html) Hiermee kunt u uw TresJS-scènes en componenten inspecteren.
+
+![TresJS Devtools](/vue-chrome-devtools.png)
+
+### Functionaliteiten
+
+- **Scene Inspector**: inspecteer de huidige scène en de componenten ervan met behulp van een boomstructuur vergelijkbaar met de componentinspecteur van Vue Devtools.
+- **Memory Allocation**: zie hoeveel geheugen door de componenten wordt verbruikt.
+- **Object Inspector**: inspecteer de eigenschappen van het geselecteerde object in de scène, inclusief de onderliggende objecten.
+- **Editable Properties**: En ja, u kunt de eigenschappen van het geselecteerde object bewerken en de wijzigingen in realtime bekijken.
+
+![](/devtools-scene-inspector.png)
+
+Geniet van de nieuwe Devtools en laat ons weten wat je ervan vindt! 🎉

docs/nl/directives/v-always-look-at.md

@@ -0,0 +1,61 @@
+# v-always-look-at 👀
+
+Met de nieuwe directive v-always-look-at aangeboden door **TresJS**, kunt u eenvoudig een opdracht [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) toevoegen om altijd naar een specifieke positie te kijken, dit kan worden doorgegeven als een Vector3 of een Array.
+
+## Gebruik
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <Box
+        v-always-look-at="new Vector3(0, 0, 0)"
+      />
+  </TresCanvas>
+</template>
+```
+Het maakt niet uit waar de 'Box'-beweging naartoe gaat, er wordt altijd naar de positie [0,0,0] gekeken
+
+### Waarom zou u niet de ingebouwde methode 'look-at' gebruiken?
+
+Je zou kunnen vragen: dit is prima, maar ik kan de `:look-at`-methode rechtstreeks in de component gebruiken, waarom zou ik dit nodig hebben?
+
+Het antwoord is dat je met de methode `:look-at` aangeeft dat je slechts één keer naar die positie wilt kijken, wanneer de instantie is aangekoppeld. Als het object verandert, wordt dit niet bijgewerkt.
+
+### Je kunt ook naar een andere instantie kijken!
+
+Een ander voordeel is dat je bijvoorbeeld met de camera een bewegende instantie als volgt kunt bekijken:
+
+```vue{4,6,20,23}
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+// hier werken we de positie van de bol bij en zal de camera het object altijd volgen
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
+  }
+})
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]"
+        v-always-look-at="sphereRef"
+      />
+      <Sphere
+        ref="sphereRef"
+        :scale="0.5"
+      />
+  </TresCanvas>
+</template>
+```

docs/nl/directives/v-distance-to.md

@@ -0,0 +1,36 @@
+# v-distance-to
+
+Heb je geprobeerd de afstand tussen twee Object3D's te berekenen?
+
+Met de nieuwe directive `v-distance-to` is het eenvoudiger dan ooit, u hoeft alleen het doelobject aan te geven om de meting uit te voeren en het resultaat zal in uw console verschijnen.
+
+Bovendien wordt er een pijl gemaakt om aan te geven welke objecten u meet.
+
+```vue{2,8,13}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphere1Ref"
+      :position="[-2, slider, 0]"
+      :scale="0.5"
+    />
+    <Sphere
+      v-distance-to="sphere1Ref"
+      :position="[2, 0, 0]"
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+Het gebruik van `v-distance-to` is reactief, dus het werkt perfect met @tres/leches 🍰.
+
+::: warning
+`v-distance-to` meet geen object in beweging binnen de renderLoop.
+:::

docs/nl/directives/v-light-helper.md

@@ -0,0 +1,34 @@
+# v-light-helper 🔆
+
+Met de nieuwe directive v-light-helper aangeboden door **TresJS**, kun je met slechts één regel code snel de betreffende helper aan je lampen toevoegen 😍.
+
+De volgende lights worden ondersteund:
+- DirectionalLight
+- PointLight
+- SpotLight
+- HemisphereLight
+
+## Gebruik
+
+```vue{2,8,11,14,17}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresDirectionalLight
+      v-light-helper
+    />
+    <TresPointLight
+      v-light-helper
+    />
+    <TresSpotLight
+      v-light-helper
+    />
+    <TresHemisphereLight
+      v-light-helper
+    />
+  </TresCanvas>
+</template>
+```

docs/nl/directives/v-log.md

@@ -0,0 +1,53 @@
+# v-log
+
+### Probleem
+
+Wanneer u uw instantie moet loggen, moet u de template reference gebruiken en deze vervolgens loggen:
+
+```vue
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+
+const sphereRef = shallowRef()
+
+watch(sphereRef, (value) => {
+  console.log(value) // Really for a log?!!! 😫
+})
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+Vind je niet dat dat dit VEEL code is voor een simpele log?
+
+## Gebruik
+
+Met de nieuwe directive v-log aangeboden door **TresJS**, kun je dit doen door aleen `v-log` toe te voegen aan de instantie.
+
+```vue{2,10,12}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- zal alleen het materiaal loggen 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Houd er rekening mee dat u een modifier kunt doorgeven met de naam van een eigenschap, bijvoorbeeld `v-log:material`, en deze zal direct de `material` eigenschap loggen 😍

docs/nl/guide/getting-started.md

@@ -0,0 +1,93 @@
+# Installatie
+
+Leer hoe je TresJS installeert
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/core
+```
+
+```bash [npm]
+npm install three @tresjs/core
+```
+
+```bash [yarn]
+yarn add three @tresjs/core
+```
+
+:::
+
+> Beter gebruik met Vue 3.x en de composition API
+
+## Typescript
+
+TresJS is geschreven in Typescript en is volledig getypt. Als u Typescript gebruikt, profiteert u optimaal van de typmogelijkheden. Zorg ervoor dat u de types voor threejs installeert.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Aan de slag
+
+Je kan TresJS installeren als elke andere Vue plugin
+
+```ts
+import { createApp } from 'vue'
+import Tres from '@tresjs/core'
+import App from './App.vue'
+
+export const app = createApp(App)
+
+app.use(Tres)
+app.mount('#app')
+```
+
+Of je kan het direct gebruiken in je component
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+::: tip
+Dit wordt aanbevolen vanwege de prestaties en de bundelgrootte. tree-shaking werkt beter en je importeert alleen de componenten die je gebruikt.
+:::
+
+## Vite
+
+Omdat v2 een custom renderer is, moeten we de `vue-compiler` van uw app laten weten dat de componenten van Tres mogen worden opgenomen om de waarschuwing `[Vue warn]: Failed to solve component` te vermijden.
+
+Je hoeft alleen maar de `templateCompilerOptions` van TresJS te importeren en toe te voegen aan uw `vite.config.ts` in de vue plugin:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Andere config
+      ...templateCompilerOptions
+    }),
+  ]
+})
+```

docs/nl/guide/index.md

@@ -0,0 +1,112 @@
+# Introductie
+
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <FirstScene />
+    </div>
+</ClientOnly>
+
+::: code-group
+
+```bash [npm]
+npm install @tresjs/core three
+```
+
+```bash [yarn]
+yarn add @tresjs/core three
+```
+
+```bash [pnpm]
+pnpm add @tresjs/core three
+```
+
+:::
+
+## Typescript
+
+TresJS is geschreven in Typescript en is volledig getypt. Als u Typescript gebruikt, profiteert u optimaal van de typmogelijkheden. Zorg ervoor dat u de types voor threejs installeert.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Vite
+
+Als je Vite gebruikt, dan hoef je alleen `templateCompilerOptions` toe te voegen en te importeren van TresJS asan je `vite.config.ts`in de vue plugin:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Andere config
+      ...templateCompilerOptions
+    }),
+  ],
+}),
+```
+
+Dit is nodig om de template compiler te laten werken met de custom renderer, zodat deze geen waarschuwingen op de console genereert. Voor meer informatie, kijk [hier](/nl/guide/troubleshooting.html).
+
+## Probeer het online
+
+### Speelplaats
+
+Je kan TresJS proberen via de officiele [Speelplaats](https://play.tresjs.org/). Check it out:
+
+<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
+
+### StackBlitz
+
+We hebben een gloednieuwe [StackBlitz](https://stackblitz.com/) starter om TresJS online te proberen. Bekijk het hier:
+
+![](/stackblitz-starter.png)
+
+
+## Labs
+
+We hebben ook een showcaselab met voorbeelden gemaakt met TresJS. Bekijk het [hier](https://lab.tresjs.org/).
+
+![](/tresjs-lab.png)
+
+## Motivatie
+
+[ThreeJS](https://threejs.org/) is een prachtige bibliotheek waarmee u geweldige **WebGL** 3D-websites kunt maken. Het is ook een bibliotheek die voortdurend wordt bijgewerkt, wat het moeilijk maakt voor wrapper-onderhouders zoals [TroisJS](https://troisjs.github.io/) om alle verbeteringen bij te houden.
+
+Het React ecosysteem heeft een indrukwekkende **custom render** oplossing genaamd [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) waarmee u uw scènes declaratief kunt bouwen met herbruikbare, op zichzelf staande componenten die op de state reageren.
+
+In mijn zoektocht naar iets soortgelijks in het VueJS-ecosysteem vond ik deze geweldige bibliotheek genaamd [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), die met hetzelfde concept werkt als R3F, het biedt een [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). Ik draag ook bij aan het verbeteren van deze bibliotheek, zodat deze net zo volwassen en rijk aan functies wordt als R3F.
+
+Het enige probleem hiermee is dat het mixen van compilers-renderers in Vue 3 iets is waar de Vue-gemeenschap nog steeds aan werkt - zie [hier] (https://github.com/vuejs/vue-loader/pull/1645) voor meer informatie.
+
+```ts
+// Voorbeeld Vite setup
+import { createApp } from 'vue'
+import { createApp as createLunchboxApp } from 'lunchboxjs'
+import App from './App.vue'
+import LunchboxApp from './LunchboxApp.vue'
+
+// html app
+const app = createApp(App)
+app.mount('#app')
+
+// lunchbox app
+const lunchboxApp = createLunchboxApp(LunchboxApp)
+// Ervan uitgaande dat er een element is met ID `lunchbox` in je HTML app
+lunchboxApp.mount('#lunchbox')
+```
+
+Dus ik werd door beide bibliotheken geïnspireerd om een aangepaste Vue-renderer voor ThreeJS te maken. Dat is **TresJS v2**.

docs/nl/guide/migration-guide.md

@@ -0,0 +1,221 @@
+# Migratie Gids
+
+Deze gids is bedoeld om je te helpen migreren van v1 naar de nieuwste versies van TresJS 🤩✨.
+
+::: code-group
+
+```bash [pnpm]
+pnpm update @tresjs/core
+```
+
+```bash [npm]
+npm update @tresjs/core
+```
+
+```bash [yarn]
+yarn upgrade @tresjs/core
+```
+
+:::
+
+## Wat is nieuw?
+
+### Vue Custom Renderer
+
+**TresJS** is nu een [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 die leeft in de wrapper component genaamd `TresCanvas` die verantwoordelijk is voor het maken van de `WebGLRenderer` en de `Scene` voor jou en het maken van een **new Vue App instance** om de scene te renderen.
+
+### Typescript ondersteuning and Intellisense 🦾
+
+![TresJS Intellisense](/v2-intellisense.gif)
+
+Dit was hoogstwaarschijnlijk de meest **verzochte functionaliteit voor TresJS**. Nu werken Tres componenten met Volar en doen ze aan type intellisense.
+
+**TresJS** genereert nu type declarations in build time voor alle componenten gebaseerd op de catalogus van ThreeJS. Dit betekent dat je alle componenten van ThreeJS kunt gebruiken en daar type intellisense voor krijgt.
+
+### Tres Plugin is optioneel 👍
+
+De `TresPlugin` is nu optioneel. Je kan TresJS gebruiken zonder het direct te improteren via `tresjs/core`:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+::: info
+Dit is aanbevolen voor prestaties en bundelgrootte redenen, tree-shaking zal beter werken en je zal alleen de componenten importeren die je daadwerkelijk gebruikt.
+:::
+
+### TresScene is niet langer nodig
+
+De `<TresScene />` component is nu deprecated omdat de scene nu gemaakt wordt door de `<TresCanvas />`.
+
+In het begin dacht ik dat het een goed idee zou zijn om een aparte component voor de scène te hebben in termen van verbosity en deze vergelijkbaar te houden met gewone ThreeJS, maar het bleek niet echt nuttig te zijn.
+
+Je kunt nu een scène als deze maken:
+
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh :geometry="geometry" :material="material" />
+  </TresCanvas>
+</template>
+```
+
+Om uw code te migreren, kunt u eenvoudigweg de component `<TresScene />` verwijderen en de children naar de component `<TresCanvas />` verplaatsen.
+
+### `useCatalog` is nu deprecated
+
+De functie `useCatalog` is nu verouderd. U kunt de catalogus nu rechtstreeks vanuit `@tresjs/core` importeren.
+
+Hier kun je er meer over lezen: [Extending](/nl/advanced/extending.md)
+
+Verander dit:
+
+```ts {2,5,7}
+// Verkeerd ❌
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+Naar dit:
+
+```ts {2,6}
+// Correct ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Voeg de element aan de catalogus toe
+extend({ TextGeometry })
+```
+
+### Model's ref value `getModel` is nu deprecated
+
+The `getModel` functie is nu deprecated. Je kan de `model` eigenschap direct gebruiken.
+
+Verander dit:
+
+```vue {7,9-12}
+// Verkeerd ❌
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, ({ getModel }) => {
+  const model = getModel()
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+Naar dit:
+
+```vue {7,9-12}
+// Correct ✅
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, model => {
+  // Doe iets met het model
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+### Cameras moeten gemaakt worden voor elke control 🎥
+
+De `TresOrbitControls` component Moet gezet worden na de camera in de tree. Dit komt omdat de bedieningselementen de camera moeten kennen om te kunnen werken.
+
+Verander dit:
+
+```vue {3,5}
+// Wrong ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+Naar dit:
+
+```vue {3,5}
+// Correct ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```
+
+## UseTres is nu useTresContext <Badge type="warning" text="^3.0.0" />
+
+Voor v3 hebben we de hele state logica herwerkt om deze flexibeler en gemakkelijker te gebruiken te maken voor plugin auteurs en ecosysteempakketten. In plaats van een store te gebruiken zoals in v2, gebruiken we nu een contextprovider gebaseerd op `provide/inject`.
+
+De functie `useTres` is nu een alias van de functie `useTresContext` om te voorkomen dat demo's en experimenten kapot gaan, maar overweeg om voortaan `useTresContext` te gebruiken.
+
+In plaats van een groot reactief object, krijg je nu direct de `scene` en `renderer` refs, tussen andere eigenschappen.
+
+Verander dit:
+
+```ts {2}
+// Verkeerd ❌
+import { useTres } from '@tresjs/core'
+
+const { state, setState } = useTres()
+
+console.log(state.scene)
+```
+
+Naar dit:
+
+```ts {2}
+// Correct ✅
+import { useTresContext } from '@tresjs/core'
+
+const { scene, renderer } = useTresContext()
+
+console.log(scene.value)
+```
+
+Voor meer gedetailleerde informatie over het nieuwe contextprovidersysteem kunt u de sectie [API DOCS](/nl/api/composables.md) lezen.

docs/nl/guide/nuxt.md

@@ -0,0 +1,58 @@
+# Nuxt module `@tresjs/nuxt`
+
+![TresJS Nuxt Module](/nuxt-stones.png)
+
+<a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
+
+Een officiele Nuxt module voor TresJS is hier 🎉. 
+
+Repository is [hier](https://github.com/Tresjs/nuxt)
+
+## Installatie
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/nuxt 
+```
+
+```bash [npm]
+npm install three @tresjs/nuxt 
+```
+
+```bash [yarn]
+yarn add three @tresjs/nuxt 
+```
+
+:::
+
+## Functionaliteiten
+
+- 🤓 Auto-import componenten and composables van het [TresJS ecosystem](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` client only, je hoeft niet `.client` toe te voegen aan de component naam of `<ClientOnly />`
+- Configureert automatisch de vue compiler om TresJS componenten te ondersteunen, zie [waarom](/nl/guide/troubleshooting)
+- Alle DX Magie die komt met Nuxt ✨
+
+## Gebruik
+
+ Voeg `@tresjs/nuxt` toe aan de `modules` sectie van `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: ["@tresjs/nuxt"],
+});
+```
+
+Dat is alles! Je kan nu `@tresjs/nuxt` gebruiken in je Nuxt app ✨
+
+Als u elk ander pakket uit het TresJS-ecosysteem wilt gebruiken, kunt u de pakketten die u wilt gebruiken installeren en deze worden automatisch geïmporteerd door de module 🧙🏼‍♂️.
+
+| Package                     | Versie                                                                                            |
+| --------------------------- | :------------------------------------------------------------------------------------------------- |
+| [Cientos](https://github.com/Tresjs/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) |
+| [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) |
+
+```bash
+# Using pnpm
+pnpm add @tresjs/cientos @tresjs/post-processing
+```

docs/nl/guide/troubleshooting.md

@@ -0,0 +1,91 @@
+# De hilarische gids van vaak voorkomende issues en hoe ze op te lossen
+
+![Problemen oplossen](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+
+Welkom bij **TresJS v2 probleemoplossingsgids**. Waar 3D staat voor _"Dazzlingly Delightful Difficulties"_! We weten dat 3D zo complex kan zijn als een verwarde bol garen 🧶 of zo onvoorspelbaar als een kat op een toetsenbord 🐈 ⌨️, maar wees niet bang!
+
+Deze handleiding is bedoeld om u te helpen bij het oplossen van de meest voorkomende problemen die u kunt tegenkomen bij het gebruik van TresJS v2.
+
+## Ik kan mijn 3D scene niet zien 😭!
+
+Je hebt de [Getting started guide](/nl/guide/getting-started.md) gevolgd, maar nog steeds kan je je scene niet gerendered zien.
+
+Dit zijn de meest waarschijnlijke redenen waarom je je scene niet ziet:
+
+### Controleer de hoogte van je canvas 📏
+
+Een ander veelvoorkomend probleem is dat de component `TresCanvas` standaard een `canvas` element aanmaakt dat de `width` en `height` van het bovenliggende element aanneemt. Als het bovenliggende element geen hoogte heeft, heeft het canvas ook geen hoogte.
+
+![No height found](/canvas-height.png)
+
+Je zal ook deze error in de console zien:
+
+![Canvas height warning](/canvas-height-warning.png)
+
+Een gemakkelijke manier om dit te fixen is door de hoogte van de parent op `100%` te zetten:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+Of je kan de `window-size` prop of the `TresCanvas` component zetten:
+
+```vue
+<TresCanvas window-size>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+## Failed resolve component: TresComponent... 🤔
+
+![](/failed-to-resolve-component.png)
+
+Omdat **TresJS v2** een custom Vue-renderer in de main Vue App gebruikt, zal de core Vue renderer die als ouder fungeert de componenten in de component `TresCanvas` niet herkennen. Zelfs als dit geen invloed heeft op de weergave, wordt er een waarschuwing weergegeven in de console.
+
+![](/failed-to-resolve-component.png)
+
+Op dit moment is er geen native Vue-ondersteuning om de renderer te definiëren die wordt gebruikt op de `<template />`, maar er is een snelle oplossing om de waarschuwingen te verwijderen
+
+Ga naar je `vite.config.ts` en voeg de volgende configuratie toe aan `@vitejs/plugin-vue`:
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Andere config
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+Dit zal de waarschuwing verwijderen uit de console.
+
+# Help ons om TresJS Purr-fect te maken! 😼
+
+We weten dat zelfs de beste kattenluiers af en toe fouten maken, en we hebben jouw hulp nodig om TresJS nog beter te maken! Als je een bug vindt, open dan een ticket op [the
+repo](https://github.com/Tresjs/playground) en **geef een reproductielink op**.
+
+::: warning
+Tickets zonder reproductielink worden gesloten.
+:::
+
+Ons team van coderende kattenliefhebbers
+zal in actie komen om die vervelende bugs te elimineren en TresJS voor iedereen te verbeteren. Laten we samen van TresJS de kat maken
+miauw van 3D-weergave in Vue!

docs/nl/guide/your-first-scene.md

@@ -0,0 +1,170 @@
+# Je eerste scene
+
+Deze gids zal jou helpen om je eerste Tres scene te maken. 🍩
+
+<ClientOnly>
+<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+  <DonutExample />
+</div>
+</ClientOnly>
+
+## De Canvas eexperience opzetten
+
+Voordat we een ThreeJS `Scene` kunnen maken, hebben we ruimte nodig om deze weer te geven. Met gewoon [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) zouden we een `canvas` HTML-element moeten maken om de `WebglRenderer` te mounten en de `Scène` te initialiseren.
+
+Met **TresJS** hoef je alleen de standaardcomponent `<TresCanvas />` te importeren en toe te voegen aan de template van uw Vue-component.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+::: warning
+Het is belangrijk dat alle componenten die verband houden met de scène zich tussen de component `<TresCanvas />` bevinden. Anders worden ze niet weergegeven.
+:::
+
+De `TresCanvas` component gaat achter de schermen wat instellingswerk doen:
+
+- Het creëert een [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) die elk frame automatisch bijwerkt.
+- Het stelt de render loop in die op elk frame moet worden aangeroepen op basis van de refresh rate van de browser.
+
+## Canvas grootte
+
+Standaard neemt de component `TresCanvas` de **parent breedte en hoogte** over. Als u een lege pagina ervaart, zorg er dan voor dat het bovenliggende element de juiste grootte heeft.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>
+```
+
+Als je scène geen deel gaat uitmaken van een UI, dan kun je het canvas ook dwingen de breedte en hoogte van het volledige venster te nemen door de `window-size` prop als volgt te gebruiken:
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+
+## Een scene maken
+
+We hebben 4 kernelementen nodig om een 3D-ervaring te creëren:
+
+- Een [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) die de camera en objecten samen houd.
+- Een [**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer) om de scene in de DOM te renderen.
+- Een [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
+- Een [**Object**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
+
+Met **TresJS** hoeft u alleen de component `<TresCanvas />` toe te voegen aan de template van uw Vue-component en deze zal automatisch een `Renderer` (`canvas` DOM-element) en `Scene` voor u maken.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Je scene komt hier -->
+  </TresCanvas>
+</template>
+```
+Vervolgens kunt u een [**PerspectiveCamera**](https://threejs.org/docs/index.html?q=perspectivecamera#api/en/cameras/PerspectiveCamera) toevoegen met behulp van de `<TresPerspectiveCamera />` component.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+::: warning
+Een veel voorkomend probleem is dat de standaardpositie van de camera de oorsprong van de scène is (0,0,0). TresJS zal de positie van uw camera automatisch instellen op `[3,3,3]` als de prop `position` niet door u is ingesteld. Als er in uw scène geen camera is gedefinieerd, wordt er automatisch een perspectiefcamera toegevoegd.
+:::
+
+## Een 🍩 toevoegen
+
+Die scène ziet er een beetje leeg uit, laten we een basisobject toevoegen. Als we gewoon **ThreeJS** zouden gebruiken, zouden we een [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object moeten maken, er een [**Materiaal**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) aan toe moeten voegen en een [**Geometrie**]( https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) zoals dit:
+
+```ts
+const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
+const material = new THREE.MeshBasicMaterial({ color: 'orange' })
+const donut = new THREE.Mesh(geometry, material)
+scene.add(donut)
+```
+
+Een **Mesh** is een basisscèneobject in three.js en wordt gebruikt om de geometrie en het materiaal vast te houden dat nodig is om een vorm in de 3D-ruimte weer te geven.
+
+Laten we nu eens kijken hoe we gemakkelijk hetzelfde kunnen bereiken met **TresJS**. Om dat te doen gaan we de `<TresMesh />` component gebruiken, en tussen de standaard slots gaan we een `<TresTorusGeometry />` en een `<TresMeshBasicMaterial />` component doorgeven.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::: info
+Merk op dat we niets hoeven te importeren, omdat **TresJS** automatisch een **Vue-component genereert op basis van de drie objecten die u in CamelCase wilt gebruiken met een Tres-voorvoegsel**. Als u bijvoorbeeld een 'AmbientLight' wilt gebruiken, gebruikt u de component `<TresAmbientLight />`.
+:::
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    window-size
+  >
+    <TresPerspectiveCamera
+      :position="[3, 3, 3]"
+      :look-at="[0, 0, 0]"
+    />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+
+Vanaf hier kunt u beginnen met het toevoegen van meer objecten aan uw scène en beginnen met spelen met de eigenschappen van de componenten om te zien hoe deze de scène beïnvloeden.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVMtu2kAU/ZWRu8iiYIcQoojSikCjqlXTRi27OIuJfYGBeWlmzKOIf+8d2zhD2kZU8oI5955z3+yiiQF7o3W8KiDqRwObGaYdseAKTTiVs/dp5GwafUglE1oZR3bEU8ZUrqglezI1SpCzoUNsYZNMGTh7l8pBUgkhDR8OhObUAb4IGQT0jAM17UxxZTDOm+uLj6NxL43ImslcrduW/ao4NesejNWQObaCMRVgaGUjpK+VZY4piSoP3Rbx32MaNeapWqHlEqUbiCu1bFPnCect4r+GkIQx78DO63eNTJQp7CdQApzZkj41M+tVOigR91qkc4XBL1Cs0QmURtSy7A5bYRjl5FC4MthoCBiD5EXoUuBGPDGQ7iubzR3pM+lAYtVbFOg03IpZtReBQRL0PmpF1Qzbgup4YZXEie88K60NOOg+KRGPhUP1hjSaO6dtP0myXCI/B85WJpbgEqlFEroPu3EvPk9yZl3iYfROo9Yfwr4cVQY9VbtioPxVKF/Dx1HcGuhSU3lK7o3v8DI+jzu18gGMBfOcUHtu4CRd7zdExd415vsWrAjbgDdXWDi5v4H7sIO7hop4J7CJxXF3az87pwby/xCuCK9Jo2M7B8FOED24+uIv46uEs6dQ0ivuU7nHnXQ2U3LKZi82MlNCMw7mu/aHfbyZlHO1/lJizhTQ5JfNIVv+BV/YTZXyPS4LmBW2+3mUeMDgKvPtz2+wwd+NUai84PVw/mH8AVbxwudYuY0KmWPagV+Z7efywJicTeztprzcuqijRN1WQ4k+HP46ml2rgMeycaV/OY7xK116rqwbd5uG738DogXwDg==" />

docs/nl/index.md

@@ -0,0 +1,35 @@
+---
+layout: home
+
+title: TresJS
+titleTemplate: De oplossing voor 3D in VueJS
+
+hero:
+  name: TresJS
+  text: Breng Three naar het Vue ecosystem
+  tagline: Bouw geweldige 3D ervaringen met het framework waar je van houdt.
+  image:
+    src: /hero.png
+    alt: Tresjs
+  actions:
+    - theme: brand
+      text: Beginnen
+      link: /nl/guide/
+    - theme: alt
+      text: Waarom Tres?
+      link: /nl/guide/#motivation
+
+features:
+  - icon: 💡
+    title: Declaratief
+    details: Bouw een 3D-scène alsof het Vue-componenten zijn.
+  - icon: ⚡️
+    title: Aangedreven door Vite
+    details: Hot Module Replacement (HMR) die snel blijft ongeacht de app grootte.
+  - icon: 🥰
+    title: Blijft up-to-date
+    details: Het biedt meteen alle bijgewerkte functies van ThreeJS.
+  - icon: 🌳
+    title: Ecosysteem
+    details: Breid de kernfunctionaliteit uit met pakketten zoals `cientos` en `postprocessing`. Of voeg je eigen toe.
+---

docs/nl/team.md

@@ -0,0 +1,35 @@
+---
+layout: page
+title: Ontmoet het Team
+description: Het TresJS-ecosysteem wordt ontwikkeld en onderhouden door een wereldwijd team...
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers
+} from 'vitepress/theme'
+import { core } from '../_data/team'
+</script>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Ontmoet het Team</template>
+    <template #lead>
+     Het TresJS-ecosysteem wordt ontwikkeld en onderhouden door een wereldwijd team.
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members="core" />
+  <!-- <VPTeamPageSection>
+    <template #title>Team Emeriti</template>
+    <template #lead>
+      Here we honor some no-longer-active team members who have made valuable
+      contributions in the past.
+    </template>
+    <template #members>
+      <VPTeamMembers size="small" :members="emeriti" />
+    </template>
+  </VPTeamPageSection> -->
+</VPTeamPage>