Two first pages should be okay

Author: AminGtt

docs/.vitepress/config/fr.ts

@@ -60,7 +60,7 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         text: 'Exemples',
         collapsed: true,
         items: [
-          { text: 'Orbit Controls', link: '/fr/examples/orbit-controls' },
+          { text: 'Controles des orbites', link: '/fr/examples/orbit-controls' },
           { text: 'Animations de base', link: '/fr/examples/basic-animations' },
           { text: 'Groupes', link: '/fr/examples/groups' },
           { text: 'Charger des textures', link: '/fr/examples/load-textures' },

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'utilisez 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é sans retourné 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,114 @@
+# 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 renvoi 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 bibliothèque merveilleuse pour faire de superbe site 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 est que mélanger les compilateurs et les moteurs de rendu en Vue3 est un sujet sur lequel la communauté Vue travail 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èque m'ont donc inspiré pour créer un moteur de rendu personnalisé Vue pour ThreeJS. Il s'appel **TresJS v2**.
+