docs: french translation (#555)

* Initial commit for french lang

* Two first pages should be okay

* Fix typo

* Fix forgotten word

* Import all the basic layout

* Your first scene done

* nuxt done

* troubleshooting done

* Typos correction /guide/getting-started.md

* Typos correction /guide/index.md

* Typos correction /guide/nuxt.md

* Typos correction /guide/troubleshooting.md

* Typos correction /guide/your-first-scene.md

* Typos correction /index.md

* Typos correction /team.md

* FR-translate guide/migration-guide

* Fix typo - migration guide

* Directives ok, need review

* Devtools seems ok

* advanced seems ok

* API seems ok // todo examples + global review

* Follow Alvaro's request about cookbook, everything set up well

* Cookbook seems ok // FR translation seems ok, need review

* Fix typo

* fix dead links

* fix search for french

---------

Co-authored-by: Laeti-dev <laetdi@gmail.com>
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

docs/.vitepress/config/fr.ts

@@ -0,0 +1,177 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Suggérer un changement à cette page.',
+    },
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introduction', link: '/fr/guide/' },
+          { text: 'Commencer', link: '/fr/guide/getting-started' },
+          { text: 'Votre première scene', link: '/fr/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/fr/guide/nuxt' },
+          { text: 'Résolution de problèmes', link: '/fr/guide/troubleshooting' },
+          { text: 'Migration depuis la v1', link: '/fr/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/fr/api/tres-canvas' },
+          {
+            text: 'Instances, arguments et props',
+            link: '/fr/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/fr/api/composables',
+          },
+          {
+            text: 'Évenements',
+            link: '/fr/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Avancé',
+
+        items: [
+          { text: 'Étendre', link: '/fr/advanced/extending' },
+          { text: 'primitive', link: '/fr/advanced/primitive' },
+          {
+            text: 'Mise en garde',
+            link: '/fr/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debug',
+        items: [
+          { text: 'Outils de développement', link: '/fr/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Cookbook',
+        link: '/fr/cookbook/',
+        collapsed: true,
+        items: [
+          { text: 'Controles des orbites', link: '/fr/cookbook/orbit-controls' },
+          { text: 'Animations de base', link: '/fr/cookbook/basic-animations' },
+          { text: 'Groupes', link: '/fr/cookbook/groups' },
+          { text: 'Charger des textures', link: '/fr/cookbook/load-textures' },
+          { text: 'Charger des modèles', link: '/fr/cookbook/load-models' },
+          { text: 'Charger du texte', link: '/fr/cookbook/text-3d' },
+          { text: 'Éclairages et ombres', link: '/fr/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/fr/cookbook/shaders' },
+        ],
+      },
+      {
+        text: 'Directives',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/fr/directives/v-log' },
+          { text: 'v-light-helper', link: '/fr/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/fr/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/fr/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ecosystème',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: 'https://cientos.tresjs.org/',
+          },
+          {
+            text: 'Module Nuxt',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Post-processing (Bientôt)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guide', link: '/fr/guide/' },
+      { text: 'API', link: '/fr/api/tres-canvas' },
+      /*       { text: 'API', link: '/api/' },
+      { text: 'Config', link: '/config/' }, */
+      { text: 'Resources',
+        items: [
+          { text: 'Équipe', link: '/fr/team.md' },
+          { text: 'Versions', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Playground',
+            link: 'https://playground.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Problèmes',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosystème',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Module Nuxt',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },  
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          fr: {
+            translations: {
+              button: {
+                buttonText: 'Chercher',
+                buttonAriaLabel: 'Chercher',
+              },
+              modal: {
+                displayDetails: 'Afficher la liste détaillée',
+                resetButtonTitle: 'Réinitialiser la recherche',
+                backButtonTitle: 'Fermer la recherche',
+                noResultsText: 'Aucun résultat pour',
+                footer: {
+                  selectText: 'Pour selectionner',
+                  selectKeyAriaLabel: 'entrer',
+                  navigateText: 'Pour naviguer',
+                  navigateUpKeyAriaLabel: 'Flèche du haut',
+                  navigateDownKeyAriaLabel: 'Flèche du bas',
+                  closeText: 'Pour fermer',
+                  closeKeyAriaLabel: 'quitter',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+}

docs/.vitepress/config/index.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { enConfig } from './en'
 import { esConfig } from './es'
+import { frConfig } from './fr'
 import { deConfig } from './de'
 import { sharedConfig } from './shared'
 import { zhConfig } from './zh' 
@@ -12,6 +13,7 @@ export default defineConfig({
   locales: {
     root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
     es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
+    fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
     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/fr/advanced/caveats.md

@@ -0,0 +1,81 @@
+# Mise en garde 😱
+
+Notre objectif est de fournir un moyen simple d'utiliser ThreeJS dans VueJS avec la meilleure expérience de développement possible. Cependant, vous devez être conscient de certaines mises en garde.
+
+## ~~HMR et ThreeJS~~
+
+:::info
+
+Cela a été corrigé dans **TresJS** v1.7.0 🎉. Vous pouvez désormais utiliser HMR sans avoir à recharger la page 🥹.
+
+:::
+
+## Réactivité
+
+Nous aimons tous la réactivité 💚. C'est l'une des fonctionnalités les plus puissantes de VueJS. Cependant, il faut être prudent lors de l’utilisation de ThreeJS.
+
+La réactivité de Vue est basée sur [Proxy](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Cela permet à Vue 3 de suivre automatiquement les modifications apportées aux objets de données et de mettre à jour les éléments DOM correspondants chaque fois que les données changent.
+
+Puisque nous rendons une scène et la mettons à jour à chaque image (60 FPS), cela signifie que nous mettons à jour la scène 60 fois par seconde. Si l'objet à mettre à jour est réactif, Vue tentera de mettre à jour cet objet autant de fois. Ce n'est pas une bonne idée 😅 et cela nuira aux performances.
+
+Voici un test de performances de la différence entre l'utilisation d'un objet Proxy et d'un objet plat.
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
+  <figcaption>Fig.1 - Exécutions par seconde Objet plat vs proxy. </figcaption>
+</figure>
+
+Source: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Si vous êtes obligé d'utiliser la réactivité, utilisez [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+Contrairement à `ref()`, la valeur interne d'une shallowRef est stockée et exposée telle quelle, et aucune réactivité profonde n'est effectuée. Seul l'accès à `.value` est réactif.
+ Source [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### Exemple
+
+❌ 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/fr/advanced/extending.md

@@ -0,0 +1,44 @@
+# Étendre 🔌
+
+Tres offre les fonctionnalités de base, mais il est facile d'ajouter des éléments tiers et de les étendre dans votre catalogue interne.
+
+La plupart des expériences 3D utilisent « OrbitControls », qui ne fait pas partie de la bibliothèque principale. Vous pouvez l'ajouter à votre projet en l'important depuis le module`three/addons/controls/OrbitControls`.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Étendre un élément dynamiquement
+
+Vous pouvez également l'ajouter dynamiquement dans vos composants :
+
+```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'
+
+// Nous ajoutons OrbitControls au catalogue interne
+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/fr/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+Le composant `<primitive />` est un composant polyvalent de bas niveau dans TresJS qui vous permet d'utiliser directement n'importe quel objet three.js dans votre application Vue sans abstraction. Il agit comme un pont entre le système de réactivité de Vue et le graphe de scène de three.js.
+
+## Usage
+
+```html
+<script setup lang="ts">
+  // Importez les classes three.js nécessaires
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+
+  // Créer une géométrie de boîte et un matériau de base
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+
+  // Créer un mesh avec la géométrie et le matériau
+  const meshWithMaterial = new Mesh(geometry, material);
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>  
+</template>
+```
+
+## Props
+
+`object` : cette propriété attend un objet `Object3D` de three.js ou de l'une de ses classes dérivées. C'est l'objet principal que le composant `<primitive />` rendra. Dans l'exemple mis à jour, un objet « Mesh » avec son « Material » correspondant est transmis à cette propriété.
+
+## Utiliser avec des modèles
+
+Le composant `<primitive />` est particulièrement utile pour restituer des objets complexes tels que des modèles chargés à partir de sources externes. L'exemple suivant montre comment charger un modèle à partir d'un fichier GLTF et le restituer à l'aide du composant `<primitive />`.
+
+```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/fr/api/composables.md

@@ -0,0 +1,236 @@
+# Composables
+
+L'API de composition Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) vous permet de créer une logique réutilisable qui peut être partagée entre les composants. Il vous permet également de créer des hooks personnalisés qui peuvent être utilisés dans vos composants.
+
+**TresJS** tire pleinement parti de cette API pour créer un ensemble de fonctions composables qui peuvent être utilisées pour créer des animations, interagir avec la scène, etc. Il vous permet également de créer des scènes plus complexes qui pourraient ne pas être possibles en utilisant uniquement les composants Vue (textures, loaders, etc.).
+
+Le noyau **TresJS** utilise ces composables en interne, vous utiliserez donc la même API que celle utilisée par le noyau. Par exemple, les composants qui doivent être mis à jour dans la boucle de rendu interne utilisent le composable `useRenderLoop` pour enregistrer un rappel qui sera appelé à chaque fois que le moteur de rendu met à jour la scène.
+
+## useRenderLoop
+
+Le composable `useRenderLoop` est le cœur des animations dans **TresJS**. Permet d'enregistrer un rappel qui sera appelé au taux de rafraîchissement natif. Il s'agit du composable le plus important de **TresJS**.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+onLoop(({ delta, elapsed, clock, dt }) => {
+  // ~60FPS (depend de votre écran)
+})
+```
+
+::: warning
+Veuillez noter les implications en termes de performances lors de l'utilisation de ce composable. Il sera exécuté à chaque image, donc si vous avez beaucoup de logique dans votre rappel, cela pourrait affecter les performances de votre application. Surtout si vous mettez à jour des états ou des références réactives.
+:::
+
+La fonction callback `onLoop` reçoit un objet avec les propriétés suivantes basées sur [l'horloge de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock):
+
+- `delta` : Le temps écoulé entre la trame actuelle et la dernière trame. Il s'agit du temps en secondes depuis la dernière image.
+- `elapsed` : Le temps écoulé depuis le début de la boucle de rendu.
+
+Ce composable est basé sur `useRafFn` de [vueuse](https://vueuse.org/core/useRafFn/). Merci à [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) pour son incroyable contribution.
+
+### Avant et après le rendu
+
+Vous pouvez également enregistrer un rappel qui sera appelé avant et après que le moteur de rendu ait mis à jour la scène. Ceci est utile si vous ajoutez un profileur pour mesurer les FPS, par exemple.
+
+```ts
+const { onBeforeLoop, onAfterLoop } = useRenderLoop()
+
+onBeforeLoop(({ delta, elapsed }) => {
+  // Il sera exécuté avant le rendu de la scène.
+  fps.begin()
+})
+
+onAfterLoop(({ delta, elapsed }) => {
+  // Il sera exécuté après le rendu de la scène.
+  fps.end()
+})
+```
+
+### Pause et reprise
+
+Vous pouvez suspendre et reprendre la boucle de rendu en utilisant les méthodes `pause` et `resume`.
+
+```ts
+const { pause, resume } = useRenderLoop()
+
+// Pause la boucle de rendu
+pause()
+
+// Relance la boucle de rendu
+resume()
+```
+
+Vous pouvez également obtenir l'état d'activité de la boucle de rendu en utilisant la propriété `isActive`.
+
+```ts
+const { resume, isActive } = useRenderLoop()
+
+console.log(isActive) // false
+
+resume()
+
+console.log(isActive) // true
+```
+
+## useLoader
+
+Le composable `useLoader` vous permet de charger des ressources à l'aide du [loader THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Renvoie une promesse avec la ressource chargée.
+
+```ts
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+```
+
+Puisque le composable `useLoader` renvoie une promesse, vous pouvez l'utiliser avec `async/await` ou `then/catch`. Si vous l'utilisez dans un composant, assurez-vous de l'envelopper avec un composant `Suspense`. Voir [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) pour plus d'informations.
+
+```vue
+<template>
+  <Suspense>
+    <TheComponentUsingLoader />
+  </Suspense>
+</template>
+```
+
+## useTexture
+
+Le composable `useTexture` vous permet de charger des textures à l'aide du [loader de texture THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader). Renvoi une promesse avec la(les) texture(s) chargée(s).
+
+```ts
+const texture = await useTexture(['path/to/texture.png'])
+```
+
+**useTexture** accepte également un objet avec les propriétés suivantes :
+
+- `map`: une texture de base appliquée à la surface d'un objet
+- `displacementMap`: une texture utilisée pour ajouter des bosses ou des indentations à la surface de l'objet
+- `normalMap`: une texture utilisée pour ajouter des détails de surface et des variations d'ombrage à l'objet
+- `roughnessMap`: une texture utilisée pour ajouter de la rugosité ou une finition mate à la surface de l'objet
+- `metalnessMap`: une texture utilisée pour ajouter un effet métallique à la surface de l'objet
+- `aoMap`: Une texture utilisée pour ajouter une occlusion ambiante (ombrage dans les zones où la lumière est bloquée par d'autres objets) à l'objet.
+- `alphaMap`: Une texture utilisée pour ajouter de la transparence (la partie noire est rendue transparente) à l'objet. Vous devez définir :transparent="true" sur le matériau pour utiliser cette carte.
+- `matcap`: cette texture code la couleur et les nuances du matériau.
+
+Dans ce cas, il renverra un objet avec les textures chargées.
+
+```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',
+})
+```
+
+Vous pouvez ensuite lier les textures au `material`.
+
+```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>
+```
+
+Semblable au composable précédent, le composable `useTexture` renvoie une promesse, vous pouvez l'utiliser avec `async/await` ou `then/catch`. Si vous l'utilisez dans un composant, assurez-vous de l'envelopper avec un composant `Suspense`.
+
+## useSeek
+
+Le composable `useSeek` fournit des utilitaires permettant de parcourir et de parcourir facilement des scènes ThreeJS et des graphiques d'objets complexes. Exporte 4 fonctions qui vous permettent de rechercher des objets enfants en fonction de propriétés spécifiques.
+
+```ts
+const { seek, seekByName, seekAll, seekAllByName } = useSeek()
+```
+
+La fonction `seek` accepte trois paramètres:
+
+- `parent` : Une scène ThreeJS ou Object3D.
+- `property` : La propriété à utiliser dans la condition de recherche.
+- `value` : La valeur de la propriété à correspondre.
+
+Les fonctions `seek` et `seekByName` parcourent l'objet et renvoient l'objet enfant avec la propriété et la valeur spécifiées. Si aucun enfant avec la propriété et la valeur données n'est trouvé, il renvoie null et enregistre un avertissement.
+
+```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'))
+  }
+})
+```
+
+De même, les fonctions `seekAll` et `seekAllByName` renvoient un tableau d'objets enfants dont la propriété inclut la valeur donnée. Si aucune correspondance n'est trouvée, ils renvoient un tableau vide et un avertissement est enregistré.
+
+```ts
+const character = ref(null)
+
+watch(character, ({ model }) => {
+  if (model) {
+    const bones = seekAll(character, type, 'Bone')
+  }
+})
+```
+
+## useTresContext
+Ce composable vise à donner accès au modèle d'état qui contient plusieurs propriétés utiles.
+
+```ts
+const { camera, renderer, camera, cameras } = useTresContext()
+
+```
+
+::: warning
+`useTresContext` ne peut être utilisé que dans un `TresCanvas`, puisque `TresCanvas` agit en tant que fournisseur des données de contexte. Utiliser [le contexte fourni par TresCanvas](tres-canvas) si vous avez besoin d'y accéder dans des composants supérieurs à TresCanvas.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+
+const context = useTresContext()
+</script>
+```
+
+### Propriétés du contexte
+| Propriété | Descriptif |
+| --- | --- |
+| **camera** | la caméra actuellement active |
+| **cameras** | les caméras qui existent dans la scène |
+| **controls** | loes controles de la scène |
+| **deregisterCamera** | une méthode pour désenregistrer une caméra. Cela n'est nécessaire que si vous créez une caméra manuellement. Les caméras du modèle sont automatiquement enregistrées. |
+| **extend** | Étend le catalogue de composants. Voir [étendre](/fr/advanced/extending) |
+| **raycaster** | le raycaster global utilisé pour les événements de pointeur |
+| **registerCamera** | une méthode d’enregistrement d’une caméra. Cela n'est nécessaire que si vous créez une caméra manuellement. Les caméras du modèle sont automatiquement enregistrées. |
+| **renderer** | le [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) de votre scène |
+| **scene** | la [scène](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
+| **setCameraActive** | une méthode pour définir une caméra active |
+| **sizes** | contient la largeur, la hauteur et les proportions de votre toile |
+

docs/fr/api/events.md

@@ -0,0 +1,27 @@
+# Évenements
+
+Les composants **TresJS** émettent des événements de pointeur lorsqu'ils interagissent avec eux. Cela est vrai pour les composants qui représentent les classes three.js dérivées de [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (comme les mailles, les groupes, ...).
+
+<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         | se produit quand ...                                                                             | Type(s) de paramètre(s) du gestionnaire d'événements                                                                                                                                                                      |
+| ------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... les événements pointerdown et pointerup sont déclenchés sur le même objet l'un après l'autre | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-move  | ... le pointeur se déplace sur l'objet                                                           | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-enter | ... le pointeur entre dans l'objet                                                               | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent) |
+| pointer-leave | ... le pointeur quitte l'objet                                                                   | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent)                                                                                                                         |
+
+L'[Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) renvoyée inclut le [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) qui a déclenché l'événement. Vous pouvez y accéder via `intersection.object`.
+
+Par défaut, les objets positionnés devant les autres avec des gestionnaires d'événements n'empêchent pas le déclenchement de ces événements. Ce comportement peut être obtenu en utilisant la propriété `blocks-pointer-events`.

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

@@ -0,0 +1,150 @@
+# Instances
+
+L'idée principale de **Tres** est un _catalogue généré automatiquement_ de tous les éléments ThreeJS. Ce catalogue est généré à partir du code source ThreeJS, il est donc toujours à jour.
+
+Lorsque vous utilisez ThreeJS, vous devez importer les éléments que vous souhaitez utiliser. Par exemple, si vous souhaitez utiliser une « PerspectiveCamera », vous devez l'importer depuis le package `three`:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+Avec **Tres**, vous n'avez pas besoin d'importer quoi que ce soit, car **Tres** génère automatiquement un composant **Vue basé sur l'objet Three que vous souhaitez utiliser dans CamelCase avec un préfixe Tres**. Par exemple, si vous souhaitez utiliser une `PerspectiveCamera`, vous pouvez utiliser le composant `<TresPerspectiveCamera />`.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+Cela signifie que vous pouvez utiliser la même [documentation](https://threejs.org/docs/) que celle que vous utiliseriez lors de l'utilisation de ThreeJS de base, mais avec la puissance de Vue.
+
+## Déclarer des objets
+
+Si nous suivons cet argument, vous devriez pouvoir définir une instance comme celle-ci : ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="new THREE.Vector3(1, 2, 3)"
+    />
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+Mais avec **Tres** ce n'est pas nécessaire, vous pouvez définir les propriétés de manière déclarative comme suit : ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="[1, 2, 3]"
+    />
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+## Arguments
+
+Certains objets ThreeJS ont des arguments, par exemple le constructeur « PerspectiveCamera » a les arguments suivants :
+
+- `fov` - Champ de vision vertical de la caméra.
+- `aspect` - Rapport hauteur/largeur du tronc de la caméra.
+- `near` - Plan rapproché du tronc de la caméra.
+- `far` - Plan lointain du tronc de la caméra.
+
+Pour transmettre ces arguments au composant `TresPerspectiveCamera`, vous pouvez utiliser la propriété `args` :
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+C'est la même chose que de faire ceci :
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+## Propriétés
+
+Vous pouvez également transmettre des propriétés au composant, par exemple `TresAmbientLight` a une propriété `intensity`, vous pouvez donc la transmettre au composant comme ceci :
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Set
+
+Toutes les propriétés dont l'objet sous-jacent a une méthode `.set()` ont un raccourci pour recevoir la valeur sous forme de tableau. Par exemple, `TresPerspectiveCamera` a une propriété `position`, qui est un objet `Vector3`, vous pouvez donc la transmettre au composant comme ceci :
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+Pour spécifier les propriétés de transformation telles que la position, la rotation et l'échelle, un raccourci est disponible qui vous permet d'indiquer directement l'axe que vous souhaitez définir dans les propriétés. Un raccourci similaire est également disponible pour la propriété color.
+
+<!-- J'ai changé la syntaxe des couleurs de Vue en HTML, car Vue semble être cassé et ne colore pas les composants imbriqués -->
+```html
+<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
+  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
+</TresMesh>
+```
+
+::: warning
+Lorsque vous définissez la propriété de rotation avec [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), l'ordre 'XYZ' sera utilisé par défaut.
+Il est important de noter que lors de la définition de la propriété rotation avec le raccourci, l'ordre dans lequel vous définissez les angles est important. Pour plus d'informations sur ce sujet, voir [Angle d'Euler](https://fr.wikipedia.org/wiki/Angles_d%27Euler)
+:::
+
+<!-- Notez que l'ordre des propriétés de rotation est important et que la modification de cet ordre peut conduire à des résultats différents. -->
+```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" />
+
+```
+
+### Scalaire
+
+Un autre raccourci que vous pouvez utiliser consiste à transmettre une valeur scalaire à une propriété qui attend un objet « Vector3 », en utilisant la même valeur pour le reste du vecteur :
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Couleurs
+
+Vous pouvez transmettre des couleurs aux composants en utilisant la propriété `color`, qui accepte une chaîne avec le nom de la couleur ou une valeur hexadécimale :
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Méthodes
+
+Certaines propriétés sous-jacentes sont en fait des méthodes, le `TresPerspectiveCamera` a une méthode `lookAt` héritée de [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), vous pouvez donc transmettre les coordonnées au composant comme ceci :
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/fr/api/tres-canvas.md

@@ -0,0 +1,105 @@
+# TresCanvas
+
+Le composant `TresCanvas` est le composant principal de Tres. C'est celui qui crée le `WebGLRenderer` ThreeJS.
+
+```vue{2,5}
+<template>
+  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+    <TresPerspectiveCamera />
+      <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+## Taille du canva
+
+Le composant `TresCanvas` utilisera la taille de l'élément parent comme taille du canevas. Si vous souhaitez utiliser la taille de la fenêtre comme taille du canevas, vous pouvez définir la propriété « window-size » sur « true »
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+Ou vous pouvez utiliser CSS pour définir la taille de votre canevas.
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#canvas {
+  height: 100%;
+  width: 100%;
+}
+```
+
+## Presets
+
+Tres est livré avec quelques préréglages pour le composant `TresCanvas`. Vous pouvez les utiliser en définissant la propriété `preset`.
+
+### Réaliste
+
+Le preset `réaliste` facilite la configuration du moteur de rendu pour des scènes 3D plus réalistes.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Votre scène -->
+  </TresCanvas>
+</template>
+```
+
+C'est équivalent à:
+
+```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 | Description | Valeur par défaut |
+| ---- | ---- | --- |
+| **alpha** | Contrôle la valeur alpha par défaut. Lorsqu'elle est définie sur true, la valeur est 0. Sinon, elle est 1. | false |
+| **antialias** | Indique si un anticrénelage doit être effectué. | `true` |
+| **camera** | Une caméra manuelle à utiliser par le moteur de rendu. | |
+| **clearColor** | La couleur que le moteur de rendu utilisera pour effacer le canevas. | `#000000` |
+| **context** | Ceci peut être utilisé pour attacher le moteur de rendu à un [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) existente. | |
+| **depth** | Indique si le tampon de dessin a une [profondeur du tampon](https://en.wikipedia.org/wiki/Z-buffering) de au moins 16 bits. | `true` |
+| **disableRender** | Désactive le rendu sur requestAnimationFrame, utile pour le post-traitement. | `false` |
+| **failIfMajorPerformanceCaveat** | Indique si la création du moteur de rendu échouera si de mauvaises performances sont détectées. Voir la [spécification WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) para más detalles. | `false` |
+| **logarithmicDepthBuffer** | Indique s’il faut utiliser un tampon de profondeur logarithmique. Il peut être nécessaire de l'utiliser s'il s'agit de différences d'échelle énormes dans une seule scène. Notez que ce paramètre utilise gl_FragDepth s'il est disponible, ce qui désactive l'optimisation [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) et peut entraîner une baisse des performances. | `false` |
+| **outputColorSpace** | Définit l'encodage de sortie. | `LinearEncoding` |
+| **powerPreference** | Fournit un indice à l'agent utilisateur indiquant quelle configuration GPU est appropriée pour ce contexte WebGL. Il peut être « haute performance », « faible consommation » ou « par défaut ». | `default` |
+| **precision** | Précision du shader. Il peut être « élevé », « moyen » ou « faible ». | "highp" si pris en charge par l'appareil |
+| **premultipliedAlpha** | Indique si le moteur de rendu supposera que les couleurs ont [alpha prémultiplié](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
+| **preserveDrawingBuffer** | Indique si les tampons doivent être conservés jusqu'à ce qu'ils soient effacés ou écrasés manuellement. | `false` |
+| **shadows** | Activez les ombres dans le moteur de rendu. | `false` |
+| **shadowMapType** | Définit le type de carte d'ombrage. | `PCFSoftShadowMap` |
+| **stencil** | Indique si le tampon de dessin possède un [tampon de pochoir](https://en.wikipedia.org/wiki/Stencil_buffer) de au moins 8 bits. | `true` |
+| **toneMapping** | Définit l’exposition du mappage de tons utilisée par le moteur de rendu. | `NoToneMapping` |
+| **toneMappingExposure** | Niveau d'exposition du mappage de tons. | `1` |
+| **useLegacyLights** | Indique s’il faut utiliser ou non le mode d’éclairage existant. | `true` |
+| **windowSize** | Indique s’il faut utiliser la taille de la fenêtre comme taille du canevas ou de l’élément parent. | `false` |
+
+### Valeurs par défaut
+
+Tres essaie d’être aussi neutre que possible. C'est pourquoi il ne définit presque aucune valeur par défaut pour le composant `TresCanvas`. Utilisez les valeurs par défaut de [Three.js](https://threejs.org/). La seule exception est la propriété « antialias », qui est définie par défaut sur « true ».
+
+## Propriétés publiques exposées
+
+| Propriété | Descriptif |
+| ---- | ---- |
+| context | voir [useTresContext](composables#usetrescontext) |
+

docs/fr/cookbook/basic-animations.md

@@ -0,0 +1,97 @@
+---
+title: Animations de bases
+description: Comment utiliser le composable useRenderLoop pour animer vos objets.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Animations de bases
+
+Ce guide vous aidera à démarrer avec les animations de base dans TresJS.
+
+Nous allons construire une scène simple avec un cube. Nous animerons ensuite le cube pour qu'il tourne autour des axes Y et Z.
+
+<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
+
+Le composable `useRenderLoop` est le cœur des animations dans TresJS. Vous permet d'enregistrer une fonction de rappel qui sera exécutée chaque fois que le moteur de rendu met à jour la scène à la fréquence de rafraîchissement du navigateur.
+
+Pour une explication détaillée de son fonctionnement, consultez la documentation de [useRenderLoop](/api/composables#userenderloop).
+
+```ts
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  // ~60FPS (Dépend de votre moniteur)
+})
+```
+
+## Donner la référence au cube
+
+Pour animer le cube, nous devons lui donner une référence. Nous pouvons le faire en passant un [Template Reference](https://vuejs.org/guide/essentials/template-refs.html) en utilisant la propriété `ref` dans le composant `TresMesh`. Cela renverra l’instance de THREE.
+
+Pour améliorer les performances, nous utiliserons une [Shallow Reference](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) pour stocker la référence au lieu d'une référence régulière. Vous pouvez voir pourquoi [ici](../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>
+```
+
+## Animer le cube
+
+Maintenant que nous avons une référence au cube, nous pouvons l'animer. Nous utiliserons le rappel `onLoop` pour mettre à jour la rotation du cube.
+
+```ts
+onLoop(({ delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += delta
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+```
+
+Vous pouvez également utiliser `delta` de [horloge interne de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) ou `elapsed` pour animer le cube.
+
+## Mais pourquoi ne pas utiliser la réactivité ?
+
+Vous vous demandez peut-être pourquoi nous n'utilisons pas la réactivité pour animer le cube. La réponse est simple : la performance.
+
+```vue
+// Esto es una mala idea ❌
+<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>
+```
+
+On peut être tenté d'utiliser la réactivité pour animer le cube. Mais ce serait une mauvaise idée.
+La raison en est que [la réactivité de Vue est basée sur des proxys](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) et n'est pas conçue pour être utilisée dans une boucle de rendu qui se met à jour 60 fois ou plus par seconde.
+
+La page intégrée ci-dessous montre le [test de performances d'un proxy par rapport à un objet standard](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Comme vous pouvez le constater, le proxy est 5 fois plus lent que l'objet standard.
+
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+Vous pouvez en savoir plus à ce sujet dans la section de [Mise en garde](../advanced/caveats.md#reactivity).

docs/fr/cookbook/groups.md

@@ -0,0 +1,40 @@
+---
+title: Groupes
+description: Apprenez à regrouper plusieurs objets dans la scène.
+author: alvarosabu
+thumbnail: /recipes/groups.png
+difficulty: 0
+---
+
+# Groupes
+
+Un `<TresGroup>` est une instance de la classe [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) qui est quasiment la même que [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) mais qui permet de **regrouper plusieurs objets dans la scène** afin qu'ils puissent être manipulés comme une seule unité (transformation, rotation, etc.).
+
+## Usage
+
+```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/fr/cookbook/index.md

@@ -0,0 +1,5 @@
+# Livre de recette 🍳🧑‍🍳
+
+Découvrez des recettes guidées pour vous aider à démarrer avec les bases de l'utilisation de Tres. Chaque recette est conçue pour vous aider à comprendre les concepts fondamentaux de Tres et comment les utiliser dans vos projets.
+
+<Cookbook />

docs/fr/cookbook/lights-shadows.md

@@ -0,0 +1,183 @@
+---
+title: Lumières et ombres
+description: Apprenez à ajouter des lumières et des ombres à votre scène.
+author: alvarosabu
+thumbnail: /recipes/lights-and-shadows.png
+difficulty: 0
+---
+
+# Lumières et ombres
+
+Ce guide vous aidera à démarrer avec des lumières et des ombres simples dans TresJS.
+
+Nous allons construire une scène simple avec trois maillages et un plan, mais seulement deux auront des ombres.
+
+<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==" />
+
+## Configurer la scène (facultatif)
+
+Nous importons tous les modules dont nous avons besoin, pour plus de commodité nous pouvons utiliser des centaines de contrôles d'orbite,
+[voir ici pour savoir comment](/cookbook/orbit-controls).
+
+Plaçons quatre objets dans notre scène, l'un sera le plan qui recevra les ombres, deux d'entre eux projetteront des ombres et le dernier ne projettera aucune ombre.
+
+Nous allons utiliser [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Tout simplement parce que l’on voit facilement le « soft overlay ».
+
+```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>
+```
+
+## Lumières (explication)
+
+Comme vous le savez, chaque instance dans [ThreeJs](https://threejs.org/) est disponible dans **TresJs**, donc tous les types de lumières sont également disponibles, il suffit d'ajouter le préfixe `Tres` pour les utiliser.
+
+Mais toutes les lumières ne peuvent pas projeter des ombres, cette définition vient directement de ThreeJs et est logique. Par exemple, le but d'un [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) est d'éclairer tous les côtés de votre scène, cela n'a donc aucun sens de projeter des ombres. D'un autre côté, une [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper) qui imite le soleil peut et doit générer des ombres.
+
+## Ombres (explication)
+
+Il existe également de nombreux types d'ombres, par exemple une "ombre douce" est générée automatiquement lorsqu'un objet reçoit plus de lumière d'un côté, mais en bref, une "ombre par défaut ThreeJS" qui est dirigée vers une autre surface doit être projetée par un maillage et une autre maille doit le recevoir. Comme nous le voyons dans notre exemple, le `Plan` reçoit une ombre mais ne la projette pas. Gardez à l’esprit que tous les matériaux ne peuvent pas projeter ou recevoir des ombres.
+
+En interne, ThreeJS génère automatiquement un nouveau maillage avec un [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial) qui met à jour chaque image, donc si vous appliquez des animations, l'ombre s'anime également, mais c'est aussi pourquoi vous devez utiliser les ombres avec précaution car elles peuvent ralentir les performances.
+
+::: warning
+Une utilisation excessive des ombres de cette manière peut affecter les performances. Il existe cependant des moyens d’améliorer les performances. Pour plus d'informations, regardez [cette vidéo](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+:::
+
+## Activation des ombres
+
+Nous pouvons décomposer cela en trois étapes :
+
+### Activer les ombres dans le moteur de rendu
+
+```vue
+//...
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    shadows
+    window-size
+  />
+  //...
+</template>
+```
+### Réglez la lumière pour projeter des ombres
+
+Nous pouvons simplement ajouter le booléen `cast-shadow`, Vue l'interprète comme un `prop` avec la valeur `true`.
+
+_La lumière ambiante ne génère ici aucun type d'ombre_
+
+```vue
+//...
+
+<template>
+  <TresAmbientLight :intensity="1" />
+  <TresDirectionalLight
+    cast-shadow
+    :position="[0, 2, 0]"
+    :intensity="1"
+  />
+  
+  //...
+</template>
+```
+### Définir des objets pour projeter ou recevoir des ombres
+
+Semblable à l'étape précédente, nous définissons le maillage sur lequel nous voulons projeter l'ombre (notre sphère) avec la propriété `cast-shadow`, et nous définissons l'objet pour qu'il reçoive l'ombre (notre plan) avec la propriété `receive-shadow`.
+
+```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>
+```
+
+Nous avons maintenant toutes les étapes nécessaires pour ajouter des ombres à notre scène, et si nous appliquons ce que nous avons appris dans [animations de base](/cookbook/basic-animations) et ajoutons du mouvement à notre cube, vous verrez que l'ombre s'anime bien 🤩
+
+```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>
+```
+
+_Notez que je n'ai intentionnellement pas appliqué `cast-shadow` au `Cone` afin qu'il ne projette aucune ombre_

docs/fr/cookbook/load-models.md

@@ -0,0 +1,148 @@
+---
+title: Charger des Modèles
+description: Charger des modèles 3D dans votre scène Tres.
+author: alvarosabu
+thumbnail: /recipes/gltf-model.png
+difficulty: 1
+---
+
+# Charger des Modèles
+
+> Tous les modèles utilisés dans ce guide proviennent de [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
+
+Les modèles 3D sont disponibles dans des centaines de formats de fichiers, chacun ayant des objectifs différents, des fonctionnalités variées et une complexité variable.
+
+Pour ce guide, nous allons nous concentrer sur le téléchargement de modèles gLTF (GL Transmission Format), qui sont le format le plus courant pour les modèles 3D sur le 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==" />
+
+Il existe plusieurs façons de charger des modèles dans TresJS :
+
+::: warning
+Veuillez noter que dans les exemples ci-dessus, nous avons utilisé l'attente de niveau supérieur, assurez-vous de l'envelopper avec un composant [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense). Voir Suspense pour plus d'informations.
+:::
+
+## Avec `useLoader`
+
+Le composable `useLoader` vous permet de transmettre n'importe quel type de loader three.js et une URL pour charger la ressource. Renvoie une « Promesse » avec la ressource chargée.
+
+Pour une explication détaillée de la façon d'utiliser `useLoader`, consultez la documentation [useLoader](/api/composables#useloader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
+```
+
+Ensuite, vous pouvez transmettre la scène du modèle à un composant [`primitive`](/advanced/primitive) de TresJS pour le restituer:
+
+```html{2}
+<TresCanvas>
+    <primitive :object="scene" />
+</TresCanvas>
+```
+
+> Le composant `<primitive />` n'est pas un composant autonome dans le code source de Tres. Au lieu de cela, cela fait partie des fonctionnalités de base de Tres. Lorsque vous utilisez `<primitive>`, cela se traduit par un appel à `createElement`, qui crée l'objet three.js approprié en fonction de la propriété "object" fournie.
+
+Notez dans l'exemple ci-dessus que nous utilisons le composant `Suspense` pour envelopper le composant `TresCanvas`. En effet, `useLoader` renvoie une `Promesse` et nous devons attendre qu'elle soit résolue avant de restituer la scène.
+
+## Avec `useGLTF`
+
+Un moyen plus pratique de charger des modèles consiste à utiliser le composable `useGLTF` disponible dans le package [@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')
+```
+
+Un avantage de l'utilisation de `useGLTF` est que vous pouvez transmettre une propriété `draco` pour activer la [compression Draco](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) pour le modèle. Cela réduira la taille du modèle et améliorera les performances.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+Alternativement, vous pouvez facilement sélectionner des objets dans le modèle à l'aide de la propriété `nodes`.
+
+```vue
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+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" /> // "MyModel" ici n'est qu'un placeholder 
+  </TresCanvas>
+</template>
+```
+
+## Avec `GLTFModel`
+
+Le composant `GLTFModel` est un wrapper autour de `useGLTF` qui est disponible dans le package [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+
+```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>
+```
+
+Cette approche particulière est plus simple mais vous donne moins de contrôle sur le modèle.
+
+## useFBX
+
+Le composable `useFBX` est disponible dans le package [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos).
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+const model = await useFBX('/models/AkuAku.fbx')
+```
+
+Ensuite, c'est aussi simple que d'ajouter la scène à votre scène :
+
+```html{2}
+<TresCanvas shadows alpha>
+    <primitive :object="scene" />
+</TresCanvas>
+```
+
+## FBXModel
+
+Le composant `FBXModel` est un wrapper autour de `useFBX` qui est disponible dans le package [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos). Son utilisation est similaire à celle de `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/fr/cookbook/load-textures.md

@@ -0,0 +1,84 @@
+---
+title: Charger des textures
+description: Ajoutez des texture à vos objets TresJS.
+author: alvarosabu
+thumbnail: /recipes/load-textures.png
+difficulty: 1
+---
+
+# Charger des textures
+
+> Toutes les textures utilisées dans cet exemple proviennent de [ambientcg](https://ambientcg.com/).
+
+Les textures tridimensionnelles (3D) sont des images contenant plusieurs couches de données, leur permettant de représenter du volume ou de simuler des structures tridimensionnelles. Ces textures sont couramment utilisées dans les graphiques 3D et les effets visuels pour améliorer le réalisme et la complexité des scènes et des objets.
+
+<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==" />
+
+Il existe deux façons de charger des textures 3D dans TresJS :
+
+## Avec `useLoader`
+
+Le composable `useLoader` vous permet de transmettre tout type de loader three.js et une URL pour charger la ressource. Renvoie une « Promesse » avec la ressource chargée.
+
+Pour une explication détaillée de la façon d'utiliser `useLoader`, consultez la documentation [useLoader](/api/composables#use-loader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three'
+
+const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+```
+
+Ensuite vous pouvez passer la texture à un matériau :
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+  </TresCanvas>
+</Suspense>
+```
+
+Notez dans l'exemple ci-dessus que nous utilisons le composant `Suspense` pour envelopper le composant `TresCanvas`. En effet, `useLoader` renvoie une `Promise` et nous devons attendre qu'elle soit résolue avant de restituer la scène.
+
+## Avec `useTexture`
+
+Un moyen plus pratique de charger des textures consiste à utiliser le composable `useTexture`. Accepte à la fois un tableau d'URL et un seul objet avec des chemins de texture mappés.
+
+Pour plus d'informations sur `useTexture`, consultez la documentation [useTexture](/api/composables#use-texture).
+
+```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'
+})
+```
+Semblable à l'exemple précédent, nous pouvons transmettre toutes les textures à un matériau via des accessoires :
+
+```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/fr/cookbook/orbit-controls.md

@@ -0,0 +1,112 @@
+---
+title: OrbitControls
+description: Comment utiliser OrbitControls pour intéragir avec votre scène.
+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) est un contrôleur de caméra qui vous permet d'orbiter autour d'une cible. C'est une excellente façon d'explorer votre scène.
+
+Cependant, cela ne fait pas partie du cœur de ThreeJS. Par conséquent, pour l'utiliser, vous devrez l'importer depuis le module `three/addons/controls/OrbitControls`.
+
+Cela crée un problème car **TresJS** crée automatiquement un catalogue du cœur de ThreeJS afin que vous puissiez les utiliser comme composants.
+
+Heureusement, **TresJS** offre un moyen d'étendre le catalogue de composants. Vous pouvez le faire en utilisant la méthode `extend` de la bibliothèque principale.
+
+Pour plus d'informations sur la façon d'étendre votre catalogue TresJS, consultez la section [extension](/advanced/extending.md).
+
+## Usage de OrbitControls
+
+Pour utiliser `OrbitControls`, vous devez d'abord importer le module `three/addons/controls/OrbitControls`.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+Ensuite, vous devez étendre le catalogue de composants à l'aide de la méthode `extend`.
+
+```js
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+```
+
+Vous pouvez maintenant utiliser le composant `TresOrbitControls` dans votre scène.
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+  </TresCanvas>
+</template>
+```
+
+Étant donné que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) a besoin d'une référence à la caméra et au moteur de rendu, vous devez les transmettre comme arguments.
+
+Vous pouvez utiliser le composable [useTres](/api/composables#usetres) pour obtenir la caméra et le moteur de rendu.
+
+
+```ts
+import { useTres } from '@tresjs/core'
+
+const { state } = useTres()
+```
+
+Le code final ressemblerait donc à ceci :
+
+```vue
+<script setup lang="ts">
+import { extend, useTres } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+
+const { state } = useTres()
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+  </TresCanvas>
+</template>
+```
+
+## OrbitControls de `cientos`
+
+C’est là que commence la partie intéressante. ✨
+Le package `cientos` fournit un composant appelé `<OrbitControls />` qui est un wrapper pour `OrbitControls` du module [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+
+Le meilleur? Vous n'avez pas besoin de développer le catalogue ni de transmettre d'arguments.
+Cela fonctionne tout simplement. 💯
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/fr/cookbook/shaders.md

@@ -0,0 +1,182 @@
+---
+title: Shaders
+description: Les shaders ouvrent un monde de possibilités.
+author: alvarosabu
+thumbnail: /recipes/shaders.png
+difficulty: 2
+---
+
+# Shaders
+
+Ce guide vous aidera à démarrer avec les shaders dans TresJS.
+
+Nous allons construire une scène simple avec un blob. Ensuite, nous l'animerons pour le déformer doucement.
+
+::: warning
+_Il est nécessaire d’avoir des connaissances de base sur le fonctionnement des shaders_
+:::
+
+<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==" />
+
+## Configurer la scène (facultatif)
+
+Nous importons tous les modules dont nous avons besoin. Pour plus de commodité, nous pouvons utiliser les orbit-controls de cientos.
+[Voir ici comment](/cookbook/orbit-controls).
+
+Mettons notre caméra en position `[11,11,11]`.
+
+Enfin, pour nous aider avec le placement, ajoutons un plan simple, tourné sur l'axe X, avec une mesure de `[10, 10]` unités.
+
+```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
+
+Comme vous le savez, chaque instance dans [ThreeJs](https://threejs.org/) est disponible dans **TresJs**, nous pouvons donc également utiliser le `ShaderMaterial`, il suffit d'ajouter le préfixe `Tres` pour l'utiliser.
+
+Pour notre blob, nous pourrions utiliser un simple `SphereGeometry` en ajoutant des `widthSegments` et `heightSegments` pour créer un effet fluide et positionner notre blob 4 unités sur l'axe Y positif.
+
+```vue
+<TresMesh :position="[0, 4, 0]">
+  <TresSphereGeometry :args="[2, 32, 32]" />
+  <TresShaderMaterial />
+</TresMesh>
+```
+
+Le `ShaderMaterial` accepte des propriétés spéciales, telles que `uniforms`, `vertexShader` et `fragmentShader`, afin que nous puissions le créer dans notre section de script et établir la connexion à notre instance.
+
+Pour cet exemple, nos uniformes ressemblent à ceci :
+
+```ts
+import { Vector2 } from 'three'
+
+//...
+const uniforms = {
+  uTime: { value: 0 },
+  uAmplitude: { value: new Vector2(0.1, 0.1) },
+  uFrequency: { value: new Vector2(20, 5) },
+}
+//..
+```
+
+Notre fragment shader ressemble à ceci :
+
+```ts
+//...
+const fragmentShader = `
+precision mediump float;
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
+}
+`
+//..
+```
+
+Et enfin notre `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;
+}
+`
+//..
+```
+
+## Animer le blob
+
+Semblable à ce que nous avons appris dans l'exemple des [Animations de bases](/cookbook/basic-animations), Nous commençons par référencer notre blob en utilisant [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 />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+Une fois que nous avons fait cela, nous pouvons utiliser le rappel `onLoop` pour animer notre `uTime`.
+
+ ```ts
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+ 
+ //...
+ const { onLoop } = useRenderLoop()
+ 
+onLoop(({ elapsed }) => {
+   if (blobRef.value) {
+     blobRef.value.material.uniforms.uTime.value = elapsed
+   }
+})
+ //...
+```
+
+Et voilà, notre shader de base fonctionne correctement.
+
+## Avec GLSL vite-plugin (optionel)
+
+_Cette étape est totalement facultative et hors du cadre de l'équipe **TresJs**._
+
+Définir notre shader en ligne n'est pas toujours la meilleure idée, mais si vous utilisez [vite](https://vitejs.dev/), vous pouvez mettre vos fichiers `GLSL` dans un fichier différent en utilisant le [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl). (voir lien pour la documentation officielle)
+
+Et vous devriez avoir une structure similaire à celle-ci :
+
+```
+├── src/
+│   ├── myTresJsComponent.vue
+│   ├── shaders/
+│       ├── vertexShader.glsl
+│       ├── fragmentShader.glsl
+```

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

@@ -0,0 +1,202 @@
+---
+title: Texte 3D
+description: Ajoutez facilement du texte 3D
+author: alvarosabu
+thumbnail: /recipes/text-3d.png
+difficulty: 1
+---
+
+# Texte 3D
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) est l'un des moyens par lesquels nous pouvons ajouter du texte 3D à notre scène.
+
+<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=="/>
+
+Cependant, cela ne fait pas partie du cœur de ThreeJS. Par conséquent, pour l'utiliser, vous devrez l'importer depuis le module `three/addons/controls/TextGeometry`.
+
+Cela crée un problème car **TresJS** crée automatiquement un catalogue des trois cœurs afin que vous puissiez les utiliser comme composants.
+
+Heureusement, **TresJS** offre un moyen d'étendre le catalogue de composants. Vous pouvez le faire en utilisant la méthode `extend` de la bibliothèque principale.
+
+Pour plus d'informations sur la façon d'étendre votre catalogue TresJS, consultez la section [extending](/advanced/extending.md).
+
+## Avec TextGeometry
+
+Pour utiliser `TextGeometry`, vous devez d'abord importer `three/addons/geometries/TextGeometry`.
+
+```js
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+```
+
+Ensuite, vous devez étendre le catalogue de composants à l'aide de la méthode `extend`.
+
+```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) n'a besoin que d'un seul argument obligatoire, la source. Vous pouvez voir un exemple ci-dessous.
+
+```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))
+  }
+})
+```
+
+Vous pouvez maintenant utiliser le composant `TresTextGeometry` dans un TresMesh dans votre scène.
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+puis, comme dans l'exemple, vous pouvez passer un objet avec les paramètres souhaités.
+
+```ts
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+```
+
+Nous pouvons également transmettre un matcapTexture pour ajouter les derniers détails, en utilisant TresMeshNormalMaterial dans 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>
+```
+
+Le code final ressemblerait donc à ceci :
+
+```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>
+```
+
+Je sais que cela semble demander beaucoup de travail, mais j'ai une bonne nouvelle, il existe un moyen beaucoup plus simple.
+
+## TextGeometry de `cientos`
+
+Le package `cientos` fournit un composant appelé `<Text3D />` qui est un wrapper pour `TextGeometry` du module [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
+
+Le meilleur? Vous n'avez pas besoin d'étendre le catalogue, transmettez simplement l'argument source.
+Cela fonctionne tout simplement. 💯 (si aucun texte n'est fourni, le texte sera TresJS)
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <Text3D :font="fontPath" />
+  </TresCanvas>
+</template>
+```
+
+Nous pouvons passer les options comme une propriété:
+
+```html
+<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
+```
+
+Dans le cas où les options ne sont pas fournies, les valeurs par défaut sont :
+
+```js
+size: 0.5,
+height: 0.2,
+curveSegments: 5,
+bevelEnabled: true,
+bevelThickness: 0.05,
+bevelSize: 0.02,
+bevelOffset: 0,
+bevelSegments: 4,
+```
+
+Par défaut, le texte dans ThreeJS commence à la position de départ du maillage, donc s'il vaut [0,0,0], le texte commencera là, mais nous pouvons le centrer en passant simplement la props "center".
+
+```vue
+<Text3D :font="fontPath" :text="my 3d text" center />
+```

docs/fr/debug/devtools.md

@@ -0,0 +1,26 @@
+# Outils de développement
+
+L'une des tâches les plus difficiles auxquelles un développeur est confronté lors de la création d'expériences 3D dans le navigateur est le débogage. Le `canvas` du navigateur est une boite noire et il est difficile de savoir ce qui se passe à l’intérieur. La nature impérative de [ThreeJS](https://threejs.org/) rend le débogage incroyablement difficile, car il faut s'appuyer sur « console.log » pour voir ce qui se passe, ou sur des tiers pour ajuster et inspecter la scène.
+
+Ne me demandez pas dans la vérification des performances de votre scène. 😱
+
+![développeur débogage 3D](/debug-3D.png)
+
+L'un de nos objectifs avec TresJS est d'offrir **la meilleure expérience de développement (DX)** lorsque vous travaillez avec des scènes 3D dans le navigateur. Grâce à la nature déclarative de l'écosystème et à la variété de solutions proposées par l'écosystème Vue, telles que Vue Devtools, Nuxt et Vite, nous pouvons offrir de meilleurs outils aux développeurs pour déboguer leurs scènes.
+
+## Présentation des outils de développement
+
+A partir de la version <Badge text="^3.7.0" />, nous introduisons TresJS Dev Tools, un onglet d'inspecteur personnalisé pour les [outils de développement officiels de Vue Chrome](https://devtools.vuejs.org/guide/installation.html) qui vous permet d'inspecter vos scènes et composants TresJS.
+
+![Outils de développement TresJS](/vue-chrome-devtools.png)
+
+### Caracteristique
+
+- **Inspecteur de scène**: Inspectez la scène actuelle et ses composants à l'aide d'une arborescence similaire à l'inspecteur de composants de Vue Devtools.
+- **Allocation de mémoire** : indique la quantité de mémoire utilisée par chaque composant.
+- **Inspecteur d'objet** : Inspecte les propriétés de l'objet sélectionné dans la scène, y compris ses enfants.
+- **Propriétés modifiables** : Et oui, vous pouvez modifier les propriétés de l'objet sélectionné et voir les modifications en temps réel.
+
+![](/devtools-scene-inspector.png)
+
+Profitez des nouveaux outils de développement et dites-nous ce que vous en pensez ! 🎉

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

@@ -0,0 +1,61 @@
+# v-always-look-at 👀
+
+ Avec la nouvelle directive v-always-look-at fournie par **TresJS**, vous pouvez facilement ajouter une commande à un [Objet 3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) pour toujours regarder une position spécifique, cela pourrait être passé en tant que Vector3 ou Array..
+
+## Usage
+
+```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>
+```
+Peu importe où la boîte se déplace, elle regardera toujours la position [0,0,0]
+
+### Pourquoi ne pas utiliser la méthode intégrée look-at?
+
+Vous pourriez demander, c'est bien mais je peux utiliser la méthode `:look-at` directement dans le composant, pourquoi aurais-je besoin de ça?
+
+La réponse est qu'avec la méthode `:look-at`, vous indiquerez de regarder cette position une seule fois, lorsque l'instance est montée, puis si l'objet change, il ne sera pas mis à jour.
+
+### Vous pouvez également consulter une autre instance!
+
+Un autre avantage est que vous pouvez regarder une instance en mouvement, par exemple avec la caméra, comme ceci:
+
+```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()
+
+// ici nous mettons à jour la position de la sphère et la caméra suivra toujours l'objet
+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/fr/directives/v-distance-to.md

@@ -0,0 +1,36 @@
+# v-distance-to
+
+Avez-vous déja essayé de calculer la distance entre deux objets 3D?
+
+Avec la nouvelle directive `v-distance-to` c'est plus facile que jamais, vous devez uniquement indiquer l'objet cible pour effectuer la mesure et le résultat apparaîtra dans votre console.
+
+De plus, une flèche sera créée pour indiquer les objets que vous mesurez.
+
+```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>
+```
+
+L'utilisation de `v-distance-to` est réactive, donc ça marche parfaitement avec @tres/leches 🍰.
+
+::: warning
+`v-distance-to` ne mesurera pas un objet en mouvement dans la renderLoop.
+:::

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

@@ -0,0 +1,34 @@
+# v-light-helper 🔆
+
+Avec la nouvelle directive v-light-helper fourni par **TresJS**, vous pouvez ajouter rapidement l'assistant correspondant à vos lumières avec une seule ligne de code 😍.
+
+Les lumières suivantes sont prises en charge:
+- DirectionalLight
+- PointLight
+- SpotLight
+- HemisphereLight
+
+## Usage
+
+```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/fr/directives/v-log.md

@@ -0,0 +1,53 @@
+# v-log
+
+### Problème
+
+Lorsque vous devez logger votre instance, vous devez utiliser la référence du modèle, puis vous pouvez logger:
+
+```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>
+```
+
+Ça fait BEAUCOUP de code pour un simple log non?
+
+## Usage
+
+Avec la nouvelle directive v-log fourni par **TresJS**, vous pouvez le faire en ajoutant simmplement `v-log` à votre instance.
+
+```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  <!-- will print just the material 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Notez que vous pouvez passer un modificateur avec le nom d'une propriété, par exemple `v-log:material`, et loggez directement la propriété `material` 😍

docs/fr/guide/getting-started.md

@@ -0,0 +1,93 @@
+# Installation
+
+Apprennez comment installer TresJS
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/core
+```
+
+```bash [npm]
+npm install three @tresjs/core
+```
+
+```bash [yarn]
+yarn add three @tresjs/core
+```
+
+:::
+
+> Meilleur usage avec Vue 3.x et Composition API
+
+## Typescript
+
+TresJS est écrit en TypeScript et est entièrement typé. Si vous utilisez Typescript, vous pouvez obtenir tous les bénéfices du typage. Assurez vous seulement d'installer les types pour Three.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Commencer
+
+Vous pouvez installer TresJS comme n'importe quel autre plugin Vue
+
+```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')
+```
+
+Ou vous pouvez l'utiliser directement dans vos composants
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Votre scene ici -->
+  </TresCanvas>
+</template>
+```
+
+::: tip
+Ceci est recommandé pour des raisons de performances et de taille du projet. Le tree-shaking fonctionnera mieux et seuls les composants utilisé seront importés.
+:::
+
+## Vite
+
+Depuis que v2 es un moteur de rendu personnalisé, il nous faut informer le `vue-compiler` de votre application que les composants de Tres sont autorisés à être importés sans retourner l'erreur : `[Vue warn]: Failed to resolve component`.
+
+Vous devez seulement ajouter ceci à votre `vite.config.ts` dans le plugin Vue:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ]
+})
+```

docs/fr/guide/index.md

@@ -0,0 +1,113 @@
+# Introduction
+
+<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 est écrit en TypeScript et est entièrement typé. Si vous utilisez Typescript, vous pouvez obtenir tous les bénéfices du typage. Assurez-vous seulement d'installer les types pour Three.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Vite
+
+Si vous utilisez Vite, vous devez ajoutez ceci à votre `vite.config.ts`:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+})
+```
+
+Ceci est nécessaire afin que le compilateur de template fonctionne avec le moteur de rendu personnalisé et ne renvoie pas d'erreur dans la console. Pour plus d'informations, consultez [cet article](/guide/troubleshooting.html).
+
+## Essayer en ligne
+
+### Sandbox
+
+Vous pouvez essayer TresJS en ligne en utilisant la [sandbox](https://play.tresjs.org/) officielle. Testez ici:
+
+<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
+
+### StackBlitz
+
+Nous avons un nouveau starter [StackBlitz](https://stackblitz.com/) afin d'essayer TresJS en ligne. Testez ici:
+
+![](/stackblitz-starter.png)
+
+<StackBlitzEmbed projectId="tresjs-basic" />
+
+## Playground
+
+Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez [ici](https://playground.tresjs.org/).
+
+![](/playground.png)
+
+## Motivation
+
+[ThreeJS](https://threejs.org/) est une merveilleuse bibliothèque pour faire de superbes sites en 3D avec WebGL. C'est aussi une bibliothèque en perpétuelle évolution, ce qui rend complèxe le maintien de wrapper comme [TroisJS](https://troisjs.github.io/) afin de le garder constamment à jour.
+
+L'écosytème React possède un impréssionnant **moteur de rendu personnalisé** appellé [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) qui permet de créer des scènes 3D, de manière déclarative, avec des composants réutilisables et autonomes qui réagissent aux états.
+
+Dans ma recherche d'un outil similaire dans l'écosytème VueJS j'ai trouvé cette incroyable bibliothèque nommée [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) qui fonctionne de la même manière que R3F, il propose un [moteur de rendu personnalisé Vue3](https://vuejs.org/api/custom-renderer.html). Je contribue aussi à améliorer cette bibliothèque afin qu'elle devienne aussi mature et complète que R3F.
+
+Le seul problème concerne le mélange des compilateurs et des moteurs de rendu en Vue3. C'est un sujet sur lequel la communauté Vue travaille encore. Pour plus d'informations voir [ici](https://github.com/vuejs/vue-loader/pull/1645).
+
+```ts
+// Example 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)
+// assuming there's an element with ID `lunchbox` in your HTML app
+lunchboxApp.mount('#lunchbox')
+```
+
+Ces deux bibliothèques m'ont donc inspiré pour créer un moteur de rendu personnalisé Vue pour ThreeJS. Il s'appel **TresJS v2**.

docs/fr/guide/migration-guide.md

@@ -0,0 +1,223 @@
+# Guide de migration
+
+Ce guide a pour objectif de vous aider à faire la migration de la version 1 aux versions les plus récentes de TresJS 🤩✨.
+
+::: code-group
+
+```bash [pnpm]
+pnpm update @tresjs/core
+```
+
+```bash [npm]
+npm update @tresjs/core
+```
+
+```bash [yarn]
+yarn upgrade @tresjs/core
+```
+
+:::
+
+## Nouveautés
+
+### Vue Custom Renderer
+
+**TresJS** est pour le moment une [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉 que l'on retrouve dans un composant englobant `TresCanvas`, qui se charge de créer pour vous le `WebGLRenderer` et la `Scene`, et de créer une **nouvelle instance de l'application Vue** pour retourner la scène.
+
+### Prise en charge de Typescript et Intellisense 🦾
+
+![TresJS Intellisense](/v2-intellisense.gif)
+
+Il s'agit probablement de la caractéristique **la plus attendue de TresJS**. Désormais, les composants Tres fonctionnent avec Volar et fournissent un type intellisense.
+
+### Le Plugin de Tres devient optionnel 👍
+
+Le `TresPlugin` est désormais optionnel. Vous pouvez utiliser TresJS sans ce Plugin en important les composants directement depuis `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
+Ceci est recommandé pour des raisons de performances et de tailles de Bundle, le tree-shaking fonctionnera mieux et vous n'aurez qu'à importer les composants que vous utilisez.
+:::
+
+### TresScene n'est plus nécessaire
+
+Le composant `<TresScene />` est désormais obsolète, étant donné qu'il est maintenant possible de créer une scène via le `<TresCanvas />`.
+
+Au début, je pensais que ce serait une bonne idée en terme de verbosité d'avoir un composant disctinct pour la scène, mais il s'est avéré que ce ne soit pas vraiment utile.
+
+Vous pouvez désormais créer une scène de cette façon :
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh
+      :geometry="geometry"
+      :material="material"
+    />
+  </TresCanvas>
+</template>
+```
+
+Pour migrer votre code, il vous suffit simplement de supprimer le composant `<TresScene />` et de déplacer les composants enfants dans le `<TresCanvas />`.
+
+### Le `useCatalog` est désormais obsolète
+
+La fonction `useCatalog` est désormais obsolète. Vous pouvez maintenant importer le catalogue directement depuis `@tresjs/core`.
+
+Vous pouvez en apprendre d'avantage ici: [Extending](/advanced/extending.md)
+
+Changez ceci:
+
+```ts {2,5,7}
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+Par :
+
+```ts {2,6}
+// Correction ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Ajoutez l'élément au catalogue
+extend({ TextGeometry })
+```
+
+### La valeur référant au modèle `getModel` est désormais obsolète
+
+La fonction `getModel` est désormais obsolète. Vous pouvez maintenant utiliser la propriété `model`.
+
+Changez ceci:
+
+```vue {7,9-12}
+// Incorrect ❌
+<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>
+```
+
+Par :
+
+```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) => {
+  // Faites quelque chose avec le modèle
+  model.position.set(0, 0, 0)
+})
+</script>
+
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+### Les caméras doivent être instanciées avant tout control 🎥
+
+Le composant `TresOrbitControls` doit se situer après la caméra dans l'arbre. En effet, il faut que les controls aient connaissance de la caméra pour fonctionner.
+
+Changez ceci:
+
+```vue {3,5}
+// Incorrect ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+Par :
+
+```vue {3,5}
+// Correct ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```
+
+## UseTres devient useTresContext <Badge type="warning" text="^3.0.0" />
+
+Pour la version 3, nous avons repensé toute la logique des états (state) pour la rendre plus flexible et pour faciliter leur utilisation par les auteurs et les écosystèmes de packages. Au lieu d'utiliser une boutique comme pour la version 2, nous utilisons désormais un fournisseur basé sur `provide/inject`.
+
+La fonction `useTres` est désormais un alias de la fonction `useTresContext` pour éviter de planter les démos et les expériences éxistantes. Toutefois, préférez l'appellation `useTresContext` à partir de maintenant.
+
+Au lieu de retourner un objet complexe réactif, vous obtiendrez désormais les refs de `scene` et de `renderer`, directement entre les différentes propriétés.
+
+Changez ceci :
+
+```ts {2}
+// Incorrect ❌
+import { useTres } from '@tresjs/core'
+
+const { state, setState } = useTres()
+
+console.log(state.scene)
+```
+
+Par :
+
+```ts {2}
+// Correct ✅
+import { useTresContext } from '@tresjs/core'
+
+const { scene, renderer } = useTresContext()
+
+console.log(scene.value)
+```
+
+Si vous souhaitez avoir plus d'informmations sur le nouveau fournisseur de contexte, vous pouvez vous référer à la section [API DOCS](/api/composables.md). -->

docs/fr/guide/nuxt.md

@@ -0,0 +1,58 @@
+# Module Nuxt `@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>
+
+Voici le module Nuxt officiel pour TresJS! 🎉.
+
+Le dépôt se trouve [ici](https://github.com/Tresjs/nuxt)
+
+## Installation
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/nuxt
+```
+
+```bash [npm]
+npm install three @tresjs/nuxt
+```
+
+```bash [yarn]
+yarn add three @tresjs/nuxt
+```
+
+:::
+
+## Fonctionnalités
+
+- 🤓 Importation automatique des composants et des composables de [l'écosystème TresJS](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` est disponible uniquement dans le client, pas besoin d'ajouter `.client` au nom du composant ou `<ClientOnly />`
+- Configuration automatique du compilateur de Vue pour accepter les composants de TresJS, voir [pourquoi?](/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
+- Toute la magie de DX qui vient avec Nuxt ✨
+
+## Usage
+
+Ajoutez `@tresjs/nuxt` à la section `modules` de votre `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt'],
+})
+```
+
+C'est tout! Maintenant vous pouvez utiliser `@tresjs/nuxt` dans votre application Nuxt ✨
+
+Si vous souhaitez utiliser n'importe quel autre paquet de l'écosytème TresJS, installez simplement le paquet et il sera automatiquement importé par le module 🧙🏼‍♂️.
+
+| Package                     | Version                                                                                            |
+| --------------------------- | :------------------------------------------------------------------------------------------------- |
+| [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
+# Avec pnpm
+pnpm add @tresjs/cientos @tresjs/post-processing
+```

docs/fr/guide/troubleshooting.md

@@ -0,0 +1,88 @@
+# Le drôle de guide sur les problèmes communs et comment les résoudre
+
+![Solution aux problemes](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+
+Bienvenue dans le guide de résolution de problèmes de **TresJS v2**. Où 3D veux dire _"Difficulté Déraisonnablement Délicieuse"_! Nous savons que la 3D peut être aussi complèxe qu'une pelotte de laine 🧶 ou aussi imprévisible qu'un chat sur un clavier 🐈 ⌨️, mais n'ayez crainte!
+
+Ce guide a pour vocation de vous aider à résoudre les problèmes les plus communs que vous pourriez rencontrer en utilisant TresJS v2.
+
+## Je ne vois pas ma scène 3D 😭!
+
+Vous avez suivi l'[introduction](/guide/getting-started.md) mais vous n'avez toujours aucun rendu de votre scène.
+
+Voici les raisons les plus courantes qui pourraient expliquer pourquoi votre scène n'est toujours pas visible:
+
+### Verifiez la taille de votre canvas 📏
+
+Rappelez vous que l'élément `TresCanvas` prendra la `hauteur` et la `largeur` de l'élément parent. Si l'élément parent n'a pas de hauteur, le canvas n'en aura pas non plus.
+
+![Pas de hauteur](/canvas-height.png)
+
+Vous aurez aussi cette erreur dans la console:
+
+![Avertissement sur la hauteur du canvas](/canvas-height-warning.png)
+
+Le plus simple pour résoudre ce souci est de donner à l'élément parent une hauteur de `100%`:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+Ou vous pouvez utiliser la propriété `window-size` du composant `TresCanvas`:
+
+```vue
+<TresCanvas window-size>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+## Impossible de résoudre le composant: TresComponent...
+
+![](/failed-to-resolve-component.png)
+
+Étant donné que **TresJS v2** utilise un moteur de rendu Personnalisé au sein de l'instance principale de l'application Vue, le moteur de rendu principal de Vue, agissant comme un parent, ne reconnaitra pas les composants au sein de `TresCanvas`. Même si cela n'a aucun effet sur le rendu, cela affichera un avertissement dans la console.
+
+![](/failed-to-resolve-component.png)
+
+Actuellement, il n'est pas possible de définir nativement un autre moteur de rendu pour le `<template />`, mais voici la solution pour éviter les avertissements.
+
+Dans votre `vite.config.ts`, ajoutez la configuration pour le plugin `@vitejs/plugin-vue`:
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Autres configs
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+Ceci retirera les avertissements dans la console.
+
+# Aidez nous à faire en sorte que TresJS soit purr-fait! 😼
+
+Nous savons que même les meilleurs font parfois des erreurs, et nous avons besoin de votre aide pour rendre TresJS encore meilleur ! Si vous trouvez un bug, veuillez ouvrir un ticket sur [le dépôt](https://github.com/Tresjs/playground) et **fournir un lien de reproduction.**
+
+::: warning
+Les tickets sans lien de reproduction seront fermés
+:::
+
+Notre équipe de développeurs amoureux des chats passera à l'action pour éliminer ces bugs embêtants et améliorer TresJS pour tout le monde. Ensemble, faisons de TresJS le miaulement de chat du rendu 3D dans Vue !

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

@@ -0,0 +1,170 @@
+# Votre première scene
+
+Ce guide a pour but de vous aider à construire votre première scène avec Tres. 🍩
+
+<ClientOnly>
+<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+  <DonutExample />
+</div>
+</ClientOnly>
+
+## Configuration du Canvas
+
+Avant de pouvoir créer un scène, nous avons besoin d'un espace où l'afficher. Avec [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) tel quel, nous aurions besoin de créer un élément HTML `canvas` pour monter le `WebglRenderer` afin d'initialiser la `scène`.
+
+Avec **TresJS**, il vous faut simplement importer le composant prédéfini `<TresCanvas />` et l'ajouter au template de votre composant Vue.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Votre scène ici -->
+  </TresCanvas>
+</template>
+```
+
+::: Attention :
+Il est important que tous les composants relatifs à la scène soient à l'intérieur de la balise `<TresCanvas />`. Dans le cas contraire, ils ne seront pas affichés lors du rendu.
+:::
+
+Le composant `TresCanvas` s'occupe de certaines configurations pour vous:
+
+- Il crée un [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer) qui s'actualise à chaque image.
+- Il définit la boucle de rendu à appeler à chaque image en fonction du taux de rafraîchissement du navigateur.
+
+## Taille du `TresCanvas`
+
+Par défaut, le composant `TresCanvas` prendra **la hauteur et la largeur de l'élément parent**. Si vous vous retrouvez avec une page blanche, assurez vous que l'élément parent possède bien une taille définie.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Votre scène ici -->
+  </TresCanvas>
+</template>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>
+```
+
+Si votre scène ne fait pas partie de votre UI, vous pouvez forcer le canvas à prendre la taille de la fenêtre entière en utilisant `window-size` comme cela:
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Votre scène ici -->
+  </TresCanvas>
+</template>
+```
+
+## Créer une scène
+
+Nous avons besoin de 4 éléments principaux pour créer une expérience 3D:
+
+- Une [**scène**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) pour contenir la caméra et le/les objet(s).
+- Un [**moteur de rendu**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer) pour faire le rendu de la scene dans le DOM.
+- Une [**caméra**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
+- Un [**Objet**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
+
+Avec **TresJS**, il vous suffit d'ajouter le composant `<TresCanvas />` au template de votre composant Vue et il créera automatiquement un `moteur de rendu` (élément DOM `canvas`) et une `scène` pour vous.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Votre scène ici -->
+  </TresCanvas>
+</template>
+```
+
+Ensuite, vous pouvez ajouter une [**PerspectiveCamera**](https://threejs.org/docs/index.html?q=perspectivecamera#api/en/cameras/PerspectiveCamera) en utilisant le composant `<TresPerspectiveCamera />`.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+::: Attention :
+Un problème commun est que la position par défaut de la caméra se trouve être l'origine de la scène (0,0,0). TresJS va donc automatiquement positionner la caméra en `[3,3,3]` si la propriété `position` n'est pas définie. Si aucune caméra n'est définie dans votre scène, il se chargera automatiquement de mettre une **PerspectiveCamera**.
+:::
+
+## Ajouter un 🍩
+
+Cette scène semble un peu vide, nous allons y ajouter un objet basique. Si nous utilisions du **ThreeJS** pur, nous aurions besoin de créer un objet [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) et d'y ajouter un [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) et une [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) comme ceci:
+
+```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)
+```
+
+Un **Mesh** est un objet basique de la scène en three.js, son rôle est de contenir la `geometry` et le `material` pour représenter une forme dans un espace 3D.
+
+Maintenant, voyons à quel point il peux être simple de faire la même chose avec **TresJS**. Pour ce faire, nous allons utiliser le composant `<TresMesh />` et entre les balises, nous allons y mettre un `<TresTorusGeometry />` et un `<TresMeshBasicMaterial />`.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::: Info :
+Comme vous l'aurez surement constaté, nous n'avons rien besoin d'importer, car **TresJS** genère automatiquement un **composant Vue basé sur l'objet Three que vous souhaitez en CamelCase avec le préfixe Tres**. Par exemple, si vous voulez une `AmbientLight`, vous pouvez utiliser le composant `<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>
+```
+
+À partir de là, vous pouvez commencer à ajouter plus d'objets à votre scène et jouer avec les propriétés des composants pour voir comment ils affectent la scène.
+<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/fr/index.md

@@ -0,0 +1,35 @@
+---
+layout: home
+
+title: TresJS
+titleTemplate: La solution pour faire de la 3D avec VueJS
+
+hero:
+  name: TresJS
+  text: Utilisez Three dans l'écosysteme Vue
+  tagline: Créez d'incroyables expériences 3D avec le framework que vous aimez.
+  image:
+    src: /hero.png
+    alt: Tresjs
+  actions:
+    - theme: brand
+      text: Commencer
+      link: /fr/guide/
+    - theme: alt
+      text: Pourquoi Tres?
+      link: /fr/guide/#motivation
+
+features:
+  - icon: 💡
+    title: Déclaratif
+    details: Construisez des scenes 3D comme s'il s'agissait de composants Vue.
+  - icon: ⚡️
+    title: Propulsé par Vite
+    details: Un remplacement de module à chaud (HMR) qui reste rapide quelle que soit la taille de l'application.
+  - icon: 🥰
+    title: Restez à jour
+    details: Apporte toutes les fonctionnalités de ThreeJS dès leurs sortie.
+  - icon: 🌳
+    title: Ecosystème
+    details: Encore plus de fonctionnalités avec des packets comme "cientos" et "postprocessing". Ou bien ajoutez les vôtres.
+---

docs/fr/team.md

@@ -0,0 +1,35 @@
+---
+layout: page
+title: Meet the Team
+description: The TresJS ecosystem is develop and maintain by a global team..
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers
+} from 'vitepress/theme'
+import { core } from '../_data/team'
+</script>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Rencontrez l'équipe</template>
+    <template #lead>
+      L'écosystème TresJS est développé et maintenu par une équipe internationale.
+    </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>