Merge branch 'main' into v4

.eslintignore

@@ -1,8 +0,0 @@
-dist
-**.spec.js
-**.test.ts
-**.test.js
-**.cy.js
-**/cypress/**
-docs/.vitepress/cache
-docs/.vitepress/dist

.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tresjs/eslint-config-vue",
-  "rules": {
-    "@typescript-eslint/no-use-before-define": "off"
-  }
-}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: "Bug report \U0001F41B"
+name: Bug report 🐛
 description: Report an issue with TresJS
 labels: [pending triage]
 body:

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,6 @@
-name: "New feature proposal \U0001FA90"
+name: New feature proposal 🪐
 description: Propose a new feature to be added to TresJS
-labels: ["enhancement"]
+labels: [enhancement]
 body:
   - type: markdown
     attributes:
@@ -10,7 +10,7 @@ body:
     id: feature-description
     attributes:
       label: Description
-      description: "Clear and concise description of the problem. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks!"
+      description: 'Clear and concise description of the problem. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
       placeholder: As a developer using TresJS I want [goal / wish] so that [benefit].
     validations:
       required: true
@@ -18,7 +18,7 @@ body:
     id: suggested-solution
     attributes:
       label: Suggested solution
-      description: "In module [xy] we could provide following implementation..."
+      description: 'In module [xy] we could provide following implementation...'
     validations:
       required: true
   - type: textarea

.github/workflows/actions/pnpm/action.yml

@@ -1,18 +1,18 @@
 # From https://github.com/remirror/template/blob/4f8c5f5629a081217672a8cce1df085510f43913/.github/actions/pnpm/action.yml
-name: 'pnpm installation'
-description: 'Install and audit dependencies for pnpm'
+name: pnpm installation
+description: Install and audit dependencies for pnpm
 inputs:
   cache: # id of input
-    description: 'The location of the pnpm cache'
+    description: The location of the pnpm cache
     required: true
-    default: '.pnpm-store'
+    default: .pnpm-store
   version: # id of input
-    description: 'The version to use'
+    description: The version to use
     required: false
     default: 6.10.0
 
 runs:
-  using: 'composite'
+  using: composite
   steps:
     - name: install pnpm
       run: npm install pnpm@${{ inputs.version }} -g

.github/workflows/lint-pr.yml

@@ -1,4 +1,4 @@
-name: 'Lint PR'
+name: Lint PR
 
 on:
   pull_request_target:

.github/workflows/lint.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Lint

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Unit Tests

.release-it.json

@@ -1,21 +1,21 @@
 {
-    "git": {
-        "commitMessage": "chore: release v${version}"
-    },
-    "github": {
-        "release": true,
-        "releaseName": "v${version}"
-    },
-    "plugins": {
-        "@release-it/conventional-changelog": {
-        "preset": "conventionalcommits",
-        "infile": "CHANGELOG.md"
-        }
-    },
-    "hooks": {
-        "before:init": ["pnpm run lint", "pnpm test:ci"],
-        "after:bump": "pnpm run build",
-        "after:git:release": "echo After git push, before github release",
-        "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+  "git": {
+    "commitMessage": "chore: release v${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "v${version}"
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "conventionalcommits",
+      "infile": "CHANGELOG.md"
     }
-}
+  },
+  "hooks": {
+    "before:init": ["pnpm run lint", "pnpm test:ci"],
+    "after:bump": "pnpm run build",
+    "after:git:release": "echo After git push, before github release",
+    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
+  }
+}

CHANGELOG.md

@@ -1,13 +1,32 @@
+## [4.0.0-next.2](https://github.com/Tresjs/tres/compare/4.0.0-next.1...4.0.0-next.2) (2024-03-27)
+
+## [4.0.0-next.1](https://github.com/Tresjs/tres/compare/3.7.0...4.0.0-next.1) (2024-03-18)
+* correct type exporting issues ([#625](https://github.com/Tresjs/tres/issues/625)) ([8e52cf1](https://github.com/Tresjs/tres/commit/8e52cf1935d7b725b87c9a41e44ba61e33bd3e85))
 
 
-## [4.0.0-next.2](https://github.com/Tresjs/tres/compare/4.0.0-next.1...4.0.0-next.2) (2024-03-27)
+## [3.8.1](https://github.com/Tresjs/tres/compare/3.8.0...3.8.1) (2024-04-08)
 
 
 ### Bug Fixes
 
 * refactor nodeOps to return methods at the end of the function ([#602](https://github.com/Tresjs/tres/issues/602)) ([cd0c3bc](https://github.com/Tresjs/tres/commit/cd0c3bcd891f019cf91f30e5fdd547630332a065))
 
-## [4.0.0-next.1](https://github.com/Tresjs/tres/compare/3.7.0...4.0.0-next.1) (2024-03-18)
+
+## [3.8.0](https://github.com/Tresjs/tres/compare/3.7.0...3.8.0) (2024-04-03)
+
+
+### Features
+
+* allow custom loading manager to useTexture ([#585](https://github.com/Tresjs/tres/issues/585)) ([a04c802](https://github.com/Tresjs/tres/commit/a04c8022201c1dcccde8029d5d409e596c498526)), closes [#432](https://github.com/Tresjs/tres/issues/432)
+
+
+### Bug Fixes
+
+* explicitely add `@vue/devtools-api` dep to package.json ([#604](https://github.com/Tresjs/tres/issues/604)) ([98109af](https://github.com/Tresjs/tres/commit/98109af7d501da1ae5f817e7dc61c6d6ad902891))
+* **useLogger:** avoid string substitution in non-strings ([3e2233c](https://github.com/Tresjs/tres/commit/3e2233c61b507a6681a97733d03291db9a34eb89))
+* **useLogger:** remove '<empty string>' from log, allow any args and string substitution ([a482ebe](https://github.com/Tresjs/tres/commit/a482ebe3d3d82ae54ff8999fae1693cd218dbdbd))
+
+## [3.7.0](https://github.com/Tresjs/tres/compare/3.6.1...3.7.0) (2024-01-29)
 
 
 ### Features

CODE_OF_CONDUCT.md

@@ -28,16 +28,16 @@ Project maintainers are responsible for clarifying the standards of acceptable b
 
 Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
 
-## Scope
+## Scope
 
 This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
 
-## Enforcement
+## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [TresJS Discord](https://discord.gg/UCr96AQmWn). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.
 
-## Attribution
+## Attribution
 
 This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

CONTRIBUTING.md

@@ -19,7 +19,6 @@ All the packages in the ecosystem use [pnpm workspaces](https://pnpm.io/workspac
 
 The `workspace` has the following structure:
 
-
 ```
 .
 ├── docs // The documentation
@@ -44,25 +43,20 @@ If you have the package manager installed, you can install pnpm using the follow
 brew install pnpm
 ```
 
-
 ## Development
 
 To start developing, you can run `pnpm run playground` in the root folder.
 
-This will start the dev server for the playground at `http://localhost:5173/` where you can test the changes you are making in the `src` folder. 
-
+This will start the dev server for the playground at `http://localhost:5173/` where you can test the changes you are making in the `src` folder.
 
 > **Important**
 > There is no need to run anything in the `src` folder or in the root, the `playground` will take care of it
 
-
 Whenever you are working on a new feature or fixing a bug, make sure to add a demo under `playground/src/pages` and create a route in the `playground/src/router.ts` to test the changes you are making.
 
 > **Warning**
 > Make sure to check if there is already a demo for the feature you are working on. If so, feel free to add your changes to the existing demo.
 
-
-
 ### Docs
 
 The docs are built using [vitepress](https://vitepress.vuejs.org/).
@@ -95,6 +89,10 @@ Before opening a pull request, make sure to run `pnpm lint` to make sure the cod
 
 Adding a new third party library is generally discouraged, unless it is absolutely necessary. If you want to add a new library, please open an issue first to discuss the best approach.
 
-## Keep core small
+## Keep core small
+
+The core package should be as small as possible, it should only contain the core functionality of the library. If you are adding a new feature, please consider adding it as a plugin instead. for example, if you want to add support for [Effect Composer](https://threejs.org/examples/?q=compo#webgl_postprocessing_effectcomposer) you should create a new package called `@tresjs/post-processing` and add it as a plugin. If it's a smaller scope you can always add it to the `cientos` package.
+
+### Assets
 
-The core package should be as small as possible, it should only contain the core functionality of the library. If you are adding a new feature, please consider adding it as a plugin instead. for example, if you want to add support for [Effect Composer](https://threejs.org/examples/?q=compo#webgl_postprocessing_effectcomposer) you should create a new package called `@tresjs/post-processing` and add it as a plugin. If it's a smaller scope you can always add it to the `cientos` package.
+If you need/want to add assets like models, videos, musics, textures, etc. Please consider adding to our [official assets repo](https://github.com/Tresjs/assets).

README.md

@@ -4,6 +4,7 @@
   <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA&logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjY4NTQgMy40MjkxNkMxMi4wNzM4IDIuNzgxODIgMTMuMDEyIDIuNzgxODIgMTMuNDAwNCAzLjQyOTE1TDE5LjE3NzEgMTMuMDU2OUMxOS41NzcgMTMuNzIzNSAxOS4wOTY5IDE0LjU3MTQgMTguMzE5NiAxNC41NzE0SDYuNzY2MjRDNS45ODg5NCAxNC41NzE0IDUuNTA4ODMgMTMuNzIzNSA1LjkwODc1IDEzLjA1NjlMMTEuNjg1NCAzLjQyOTE2WiIgZmlsbD0iIzgyREJDNSIvPgo8cGF0aCBkPSJNMTUuNjg1NyAxMC41NDI5QzE1LjY4NTcgOS45OTA1OSAxNi4xMzM0IDkuNTQyODggMTYuNjg1NyA5LjU0Mjg4SDI2QzI2LjU1MjIgOS41NDI4OCAyNyA5Ljk5MDU5IDI3IDEwLjU0MjlWMTkuODU3MkMyNyAyMC40MDk0IDI2LjU1MjIgMjAuODU3MiAyNiAyMC44NTcySDE2LjY4NTdDMTYuMTMzNCAyMC44NTcyIDE1LjY4NTcgMjAuNDA5NCAxNS42ODU3IDE5Ljg1NzJWMTAuNTQyOVoiIGZpbGw9IiM0RjRGNEYiLz4KPGNpcmNsZSBjeD0iMTYiIGN5PSIyMiIgcj0iNiIgZmlsbD0iI0VGQUMzNSIvPgo8L3N2Zz4K" alt="npm package"></a>
   <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/dm/@tresjs/core?color=%2382DBCA" alt="npm downloads"></a>
   <a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+  <a href="https://app.netlify.com/sites/tresjs-docs/deploys"><img src="https://api.netlify.com/api/v1/badges/5a59eb67-67f1-4c9d-bdf4-2f9a5899a531/deploy-status" alt="netlify status"></a>
 </p>
 
 # TresJS `@tresjs/core`

components.d.ts

@@ -1 +1 @@
-export * from './dist/components/index.js'
+export * from './dist/src/components/index.js'

composables.d.ts

@@ -1 +1 @@
-export * from './dist/composables/index.js'
+export * from './dist/src/composables/index.js'

docs/.eslintrc.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@tresjs/eslint-config-vue"
-}
-  

docs/.vitepress/config/en.ts

@@ -106,41 +106,39 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { text: 'API', link: '/api/tres-canvas' },
       /*       { text: 'API', link: '/api/' },
       { text: 'Config', link: '/config/' }, */
-      { text: 'Resources',
-        items: [
-          { text: 'Team', link: '/team' },
-          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Issues',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Ecosystem',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Nuxt module',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
+      { text: 'Resources', items: [
+        { text: 'Team', link: '/team' },
+        { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
+        {
+          text: 'Playground',
+          link: 'https://play.tresjs.org/',
+        },
+        {
+          text: 'Github',
+          link: 'https://github.com/Tresjs/tres/',
+        },
+        {
+          text: 'Issues',
+          link: 'https://github.com/Tresjs/tres/issues',
+        },
+        {
+          text: 'Ecosystem',
+          items: [
+            {
+              text: 'Cientos 💛',
+              link: 'https://cientos.tresjs.org/',
+            },
+            {
+              text: 'Nuxt module',
+              link: 'https://github.com/Tresjs/nuxt',
+            },
+            {
+              text: 'TresLeches 🍰',
+              link: 'https://tresleches.tresjs.org/',
+            },
+          ],
+        },
+      ] },
     ],
   },
 }

docs/.vitepress/config/es.ts

@@ -106,41 +106,39 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { text: 'API', link: '/es/api/tres-canvas' },
       /*       { text: 'API', link: '/es/api/' },
       { text: 'Configuración', link: '/es/config/' }, */
-      { text: 'Recursos',
-        items: [
-          { text: 'Equipo', link: '/es/team' },
-          { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
-          {
-            text: 'Playground',
-            link: 'https://play.tresjs.org/',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/Tresjs/tres/',
-          },
-          {
-            text: 'Problemas',
-            link: 'https://github.com/Tresjs/tres/issues',
-          },
-          {
-            text: 'Ecosistema',
-            items: [
-              {
-                text: 'Cientos 💛',
-                link: 'https://cientos.tresjs.org/',
-              },
-              {
-                text: 'Módulo Nuxt',
-                link: 'https://github.com/Tresjs/nuxt',
-              },
-              {
-                text: 'TresLeches 🍰',
-                link: 'https://tresleches.tresjs.org/',
-              },
-            ],
-          },
-        ],
-      },
+      { text: 'Recursos', items: [
+        { text: 'Equipo', link: '/es/team' },
+        { text: 'Versiones', link: 'https://github.com/Tresjs/tres/releases' },
+        {
+          text: 'Playground',
+          link: 'https://play.tresjs.org/',
+        },
+        {
+          text: 'Github',
+          link: 'https://github.com/Tresjs/tres/',
+        },
+        {
+          text: 'Problemas',
+          link: 'https://github.com/Tresjs/tres/issues',
+        },
+        {
+          text: 'Ecosistema',
+          items: [
+            {
+              text: 'Cientos 💛',
+              link: 'https://cientos.tresjs.org/',
+            },
+            {
+              text: 'Módulo Nuxt',
+              link: 'https://github.com/Tresjs/nuxt',
+            },
+            {
+              text: 'TresLeches 🍰',
+              link: 'https://tresleches.tresjs.org/',
+            },
+          ],
+        },
+      ] },
     ],
     search: {
       provider: 'local',

docs/.vitepress/config/fr.ts

@@ -0,0 +1,175 @@
+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,9 +1,11 @@
 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' 
+import { zhConfig } from './zh'
+import { nlConfig } from './nl'
 
 export default defineConfig({
   ...sharedConfig,
@@ -11,7 +13,9 @@ 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 }, 
+    zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig },
+    nl: { label: 'Nederlands', lang: 'nl-NL', link: '/nl/', ...nlConfig },
   },
 })

docs/.vitepress/config/nl.ts

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

docs/.vitepress/config/shared.ts

@@ -26,7 +26,7 @@ export const sharedConfig = defineConfig({
         content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
       },
     ],
-    ['script', { defer: 'true', 'data-domain': 'tresjs.org', src: 'https://plausible.io/js/script.js' }],
+    ['script', { 'defer': 'true', 'data-domain': 'tresjs.org', 'src': 'https://plausible.io/js/script.js' }],
   ],
   themeConfig: {
     logo: '/logo.svg',
@@ -57,7 +57,7 @@ export const sharedConfig = defineConfig({
               },
             },
           },
-          
+
         },
       },
     },

docs/.vitepress/theme/components/Cookbook.vue

@@ -22,8 +22,8 @@ const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang ===
           :src="recipe.thumbnail"
           :alt="recipe.title"
           class="aspect-video object-cover rounded-lg"
-        >
-    
+        />
+
         <h3>
           {{ recipe.title }}
           <span
@@ -33,9 +33,9 @@ const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang ===
             role="img"
             class="text-sm"
           >🌶️</span>
-        
+
         </h3></a>
       <p>{{ recipe.excerpt }}</p>
     </li>
   </ul>
-</template>
+</template>

docs/.vitepress/theme/components/DonutExample.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { OrbitControls } from '@tresjs/cientos'
 

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -9,5 +9,5 @@ defineProps<{
     frameborder="0"
     class="w-full aspect-video border-inset-0 b-1 b-gray-500 border-opacity-50 rounded"
     src="https://playground.tresjs.org/experiments/tres-donut/"
-  />
+  ></iframe>
 </template>

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -18,7 +18,7 @@ const { data } = useSponsor()
       target="_blank"
       rel="noreferrer"
     >
-      Become a sponsor <i class="i-carbon-heart" />
+      Become a sponsor <i class="i-carbon-heart"></i>
     </a>
   </div>
 </template>

docs/.vitepress/theme/components/LocalOrbitControls.vue

@@ -1,252 +1,251 @@
 <script lang="ts" setup>
 import type { Camera } from 'three'
 import { OrbitControls } from 'three-stdlib'
-import { ref, unref, onUnmounted, onMounted, watchEffect } from 'vue'
+import { onMounted, onUnmounted, ref, unref } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
 import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
 import { useEventListener } from '@vueuse/core'
 
 export interface OrbitControlsProps {
   /**
-      * Whether to make this the default controls.
-      *
-      * @default false
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      */
+   * Whether to make this the default controls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   */
   makeDefault?: boolean
   /**
-      * The camera to control.
-      *
-      * @type {Camera}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
-      */
+   * The camera to control.
+   *
+   * @type {Camera}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
+   */
   camera?: Camera
   /**
-      * The dom element to listen to.
-      *
-      * @type {HTMLElement}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
-      */
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
+   */
   domElement?: HTMLElement
   /**
-      * The target to orbit around.
-      *
-      * @type {TresVector3}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
-      */
+   * The target to orbit around.
+   *
+   * @type {TresVector3}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
+   */
   target?: TresVector3
   /**
-      * Whether to enable damping (inertia)
-      *
-      * @default false
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
-      */
+   * Whether to enable damping (inertia)
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
+   */
   enableDamping?: boolean
   /**
-      * The damping inertia used if `.enableDamping` is set to true
-      *
-      * @default 0.05
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
-      */
+   * The damping inertia used if `.enableDamping` is set to true
+   *
+   * @default 0.05
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
+   */
   dampingFactor?: number
   /**
-      * Set to true to automatically rotate around the target.
-      *
-      * @default false
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
-      */
+   * Set to true to automatically rotate around the target.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
+   */
   autoRotate?: boolean
   /**
-      * How fast to rotate around the target if `.autoRotate` is true.
-      *
-      * @default 2
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
-      */
+   * How fast to rotate around the target if `.autoRotate` is true.
+   *
+   * @default 2
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
+   */
   autoRotateSpeed?: number
   /**
-      * Whether to enable panning.
-      *
-      * @default true
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
-      */
+   * Whether to enable panning.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
+   */
   enablePan?: boolean
   /**
-      * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
-      *
-      * @default 7.0
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
-      */
+   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
+   *
+   * @default 7.0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
+   */
   keyPanSpeed?: number
   /**
-      * This object contains references to the keycodes for controlling camera panning.
-      * Default is the 4 arrow keys.
-      *
-      * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
-      * @type Record<string, string>
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
-      */
+   * This object contains references to the keycodes for controlling camera panning.
+   * Default is the 4 arrow keys.
+   *
+   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
+   * @type Record<string, string>
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
+   */
   keys?: Record<string, string>
   /**
-      * How far you can orbit horizontally, upper limit.
-      * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-      * with ( max - min < 2 PI ). Default is Infinity.
-      *
-      * @default Infinity
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
-      */
+   * How far you can orbit horizontally, upper limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ). Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
+   */
   maxAzimuthAngle?: number
   /**
-      * How far you can orbit horizontally, lower limit.
-      * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-      * with ( max - min < 2 PI ).
-      * Default is - Infinity.
-      *
-      * @default -Infinity
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
-      */
+   * How far you can orbit horizontally, lower limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ).
+   * Default is - Infinity.
+   *
+   * @default -Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
+   */
   minAzimuthAngle?: number
   /**
-      * How far you can orbit vertically, upper limit.
-      * Range is 0 to Math.PI radians, and default is Math.PI.
-      *
-      * @default Math.PI
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
-      */
+   * How far you can orbit vertically, upper limit.
+   * Range is 0 to Math.PI radians, and default is Math.PI.
+   *
+   * @default Math.PI
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
+   */
   maxPolarAngle?: number
   /**
-      * How far you can orbit vertically, lower limit.
-      * Range is 0 to Math.PI radians, and default is 0.
-      *
-      * @default 0
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
-      */
+   * How far you can orbit vertically, lower limit.
+   * Range is 0 to Math.PI radians, and default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
+   */
   minPolarAngle?: number
   /**
-      * The minimum distance of the camera to the target.
-      * Default is 0.
-      *
-      * @default 0
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
-      */
+   * The minimum distance of the camera to the target.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
+   */
   minDistance?: number
   /**
-      * The maximum distance of the camera to the target.
-      * Default is Infinity.
-      *
-      * @default Infinity
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
-      */
+   * The maximum distance of the camera to the target.
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
+   */
   maxDistance?: number
   /**
-      * The minimum field of view angle, in radians.
-      * Default is 0.
-      *
-      * @default 0
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
-      */
+   * The minimum field of view angle, in radians.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
+   */
   minZoom?: number
   /**
-      * The maximum field of view angle, in radians.
-      * ( OrthographicCamera only ).
-      * Default is Infinity.
-      *
-      * @default Infinity
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
-      */
+   * The maximum field of view angle, in radians.
+   * ( OrthographicCamera only ).
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
+   */
   maxZoom?: number
   touches?: {
     ONE?: number
     TWO?: number
   }
   /**
-      * Whether to enable zooming.
-      *
-      * @default true
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
-      */
+   * Whether to enable zooming.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
+   */
   enableZoom?: boolean
   /**
-      * How fast to zoom in and out. Default is 1.
-      *
-      * @default 1
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
-      */
+   * How fast to zoom in and out. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
+   */
   zoomSpeed?: number
   /**
-      * Whether to enable rotating.
-      *
-      * @default true
-      * @type {boolean}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
-      */
+   * Whether to enable rotating.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
+   */
   enableRotate?: boolean
   /**
-      * How fast to rotate around the target. Default is 1.
-      *
-      * @default 1
-      * @type {number}
-      * @memberof OrbitControlsProps
-      * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
-      */
+   * How fast to rotate around the target. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
+   */
   rotateSpeed?: number
 }
 
 // TODO: remove disable once eslint is updated to support vue 3.3
-// eslint-disable-next-line vue/no-setup-props-destructure
+
 const {
-  makeDefault = false,
   autoRotate = false,
   autoRotateSpeed = 2,
   enableDamping = false,
   dampingFactor = 0.05,
   enablePan = true,
   keyPanSpeed = 7,
-  maxAzimuthAngle = Infinity,
-  minAzimuthAngle = -Infinity,
+  maxAzimuthAngle = Number.POSITIVE_INFINITY,
+  minAzimuthAngle = Number.NEGATIVE_INFINITY,
   maxPolarAngle = Math.PI,
   minPolarAngle = 0,
   minDistance = 0,
-  maxDistance = Infinity,
+  maxDistance = Number.POSITIVE_INFINITY,
   minZoom = 0,
-  maxZoom = Infinity,
+  maxZoom = Number.POSITIVE_INFINITY,
   enableZoom = true,
   zoomSpeed = 1,
   enableRotate = true,

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-///<reference types="vite-svg-loader" />
+/// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, ref } from 'vue'
 import Triangle from '../assets/triangle.svg'

docs/.vitepress/theme/components/SandboxDemo.vue

@@ -6,5 +6,5 @@ defineProps<{ url: string }>()
   <iframe
     :src="url"
     class="w-full my-16 rounded shadow-lg outline-none border-none aspect-4/3"
-  />
-</template>
+  ></iframe>
+</template>

docs/.vitepress/theme/composables/sponsor.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const data = ref()
 
@@ -7,7 +7,7 @@ export function useSponsor() {
     if (data.value) {
       return
     }
-    /* 
+    /*
     const result = await fetch(dataUrl)
     const json = await result.json() */
 
@@ -17,4 +17,4 @@ export function useSponsor() {
   return {
     data,
   }
-}
+}

docs/.vitepress/theme/recipes.data.ts

@@ -25,4 +25,4 @@ export default createContentLoader('/**/cookbook/*.md', {
       })).filter(recipe => recipe.title)
       .sort((a, b) => b.title - a.title)
   },
-})
+})

docs/_data/team.js

@@ -34,4 +34,4 @@ export const core = [
       { icon: 'twitter', link: 'https://twitter.com/@ichbintino' },
     ],
   },
-]
+]

docs/advanced/caveats.md

@@ -79,6 +79,7 @@ onLoop(({ _delta, elapsed }) => {
   position.x = Math.sin(elapsed * 0.1) * 3
 })
 </script>
+
 <template>
   <TresMesh :position="position" cast-shadow>
     <TresBoxGeometry :args="[1, 1, 1]" />
@@ -98,6 +99,7 @@ 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]" />

docs/advanced/primitive.md

@@ -7,20 +7,20 @@ The `<primitive />` component is a versatile low-level component in TresJS that
 ```html
 <script setup lang="ts">
   // Import necessary three.js classes
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
 
   // Create a box geometry and a basic material
-  const geometry = new BoxGeometry(1, 1, 1);
-  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicMaterial({ color: 0x00ff00 })
 
   // Create a mesh with the geometry and material
-  const meshWithMaterial = new Mesh(geometry, material);
+  const meshWithMaterial = new Mesh(geometry, material)
 </script>
 
 <template>
   <TresCanvas>
     <primitive :object="meshWithMaterial" />
-  </TresCanvas>  
+  </TresCanvas>
 </template>
 ```
 
@@ -28,15 +28,15 @@ The `<primitive />` component is a versatile low-level component in TresJS that
 
 `object`: This prop expects a three.js Object3D or any of its derived classes. It is the primary object that the `<primitive />` component will render. In the updated example, a `Mesh` object with an associated `Material` is passed to this prop.
 
-## Usage with Models 
+## Usage with Models
 
 The `<primitive />` component is especially useful for rendering complex objects like models loaded from external sources. The following example shows how to load a model from a GLTF file and render it using the `<primitive />` component.
 
 ```html
 <script lang="ts" setup>
-import { useGLTF } from '@tresjs/cientos'
+  import { useGLTF } from '@tresjs/cientos'
 
-const { nodes } = await useGLTF('/models/AkuAku.gltf')
+  const { nodes } = await useGLTF('/models/AkuAku.gltf')
 </script>
 
 <TresCanvas>

docs/api/composables.md

@@ -148,6 +148,12 @@ Then you can bind the textures to the material.
 </template>
 ```
 
+`useTexture` by default takes the second argument 'manager' as LoadingManager. When omitted, it will automatically be added to `THREE.DefaultLoadingManager`. Of course, you can also add your own LoadingManager, like this:
+```ts
+const loadingManager = new LoadingManager()
+const texture = await useTexture({ map: 'path/to/texture.png' }, loadingManager)
+```
+
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
 ## useSeek
@@ -196,7 +202,6 @@ This composable aims to provide access to the state model which contains multipl
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
@@ -235,5 +240,3 @@ const context = useTresContext()
 | **sizes** | contains width, height and aspect ratio of your canvas |
 | **invalidate** | a method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`. |
 | **advance** | a method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`. |
-
-

docs/api/events.md

@@ -17,7 +17,7 @@
 
 | Event         | fires when ...                                                                        | Event Handler Parameter Type(s)                                                                                                                                                                       |
 | ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| click        | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-move  | ... the pointer is moving above the object                                            | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-enter | ... the pointer is entering the object                                                | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-leave | ... the pointer is leaves the object                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)                                                                                                                         |

docs/api/tres-canvas.md

@@ -76,7 +76,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **camera** | A manual camera to be used by the renderer. | |
 | **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
 | **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
-| **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
+| **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` |
 | **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance)  | `always` |
 | **disableRender** | Disable render on requestAnimationFrame, useful for PostProcessing | `false` |
 | **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |

docs/blog/announcing-v-2-1-0.md

@@ -90,8 +90,15 @@ This was highly requested by the community, so thanks to everyone that contribut
 ```vue
 <template>
   <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000] />
-    <OrbitControls enable-damping :damping-factor="0.1" @start="onOrbitControlStart" />
+    <TresPerspectiveCamera
+      :args="[45, 1, 0.1, 1000]"
+    />
+    <OrbitControls
+      enable-damping
+      :damping-factor="
+        0.1"
+      @start="onOrbitControlStart"
+    />
   </TresCanvas>
 </template>
 ```

docs/cookbook/basic-animations.md

@@ -24,7 +24,7 @@ To see a detailed explanation of how it works, please refer to the [useRenderLoo
 const { onLoop } = useRenderLoop()
 
 onLoop(({ delta, elapsed }) => {
-  // I will run at every frame ~ 60FPS (depending of your monitor)
+  // I will run at every frame ~ 60FPS (depending of your monitor)
 })
 ```
 

docs/cookbook/index.md

@@ -2,4 +2,4 @@
 
 Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.
 
-<Cookbook />
+<Cookbook />

docs/cookbook/lights-shadows.md

@@ -116,7 +116,7 @@ _The AmbientLight doesn't generate any type of shadow here_
     :position="[0, 2, 0]"
     :intensity="1"
   />
-  
+
   //...
 </template>
 ```

docs/cookbook/load-models.md

@@ -82,7 +82,7 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder 
+    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
   </TresCanvas>
 </template>
 ```

docs/cookbook/orbit-controls.md

@@ -104,13 +104,12 @@ import OrbitControls from './OrbitControls.vue'
 ```
 :::
 
-
 ## OrbitControls from `cientos`
 
-Here is where the fancy part begins. ✨  
+Here is where the fancy part begins. ✨
 The `cientos` package provides a component called `<OrbitControls />` which is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
 
-The nicest part? You don't need to extend the catalog or pass any arguments.  
+The nicest part? You don't need to extend the catalog or pass any arguments.
 It just works. 💯
 
 ```vue {3,12}

docs/cookbook/shaders.md

@@ -61,19 +61,19 @@ For this example, our uniforms look like this:
 ```ts
 import { Vector2 } from 'three'
 
-//...
+// ...
 const uniforms = {
   uTime: { value: 0 },
   uAmplitude: { value: new Vector2(0.1, 0.1) },
   uFrequency: { value: new Vector2(20, 5) },
 }
-//..
+// ..
 ```
 
 Our fragment shader looks like this:
 
 ```ts
-//...
+// ...
 const fragmentShader = `
 precision mediump float;
 varying vec2 vUv;
@@ -82,7 +82,7 @@ void main() {
     gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
 }
 `
-//..
+// ..
 ```
 
 And lastly our vertexShader:
@@ -105,7 +105,7 @@ void main() {
     vUv = uv;
 }
 `
-//..
+// ..
 ```
 
 ## Animating the blob
@@ -119,7 +119,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
 const blobRef = shallowRef(null)
-//...
+// ...
 </script>
 
 <template>
@@ -134,7 +134,7 @@ const blobRef = shallowRef(null)
       :position="[0, 4, 0]"
     >
       <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms"/>
+      <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
     </TresMesh>
   </TresCanvas>
 </template>
@@ -143,16 +143,16 @@ const blobRef = shallowRef(null)
 
  ```ts
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
- 
- //...
+
+ // ...
  const { onLoop } = useRenderLoop()
- 
+
 onLoop(({ elapsed }) => {
    if (blobRef.value) {
      blobRef.value.material.uniforms.uTime.value = elapsed
    }
 })
- //...
+ // ...
 ```
 
 And that's it, we have our basic shader running smoothly. 🎉

docs/cookbook/text-3d.md

@@ -93,11 +93,13 @@ We can also pass a matcapTexture to add final details, using the TresMeshNormalM
 
 ```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>
+```html
+<TresMesh>
+  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+  <TresMeshNormalMaterial :matcap="matcapTexture" />
+</TresMesh>
 ```
 
 So the final code would look something like this:
@@ -184,7 +186,7 @@ We can pass the options as props
 
 in case the options are not provided, the default values will be:
 
-```js
+```
 size: 0.5,
 height: 0.2,
 curveSegments: 5,

docs/de/advanced/caveats.md

@@ -16,7 +16,6 @@ Warum? Weil Tres die Szene deklarativ aufbaut. Das bedeutet, dass es die Instanz
 
 Obwohl ein minimaler Aufräummechanismus implementiert wurde, ist er nicht perfekt. Das bedeutet, dass du manchmal die Seite neu laden musst, um die Änderungen korrekt zu sehen, insbesondere wenn du Instanzen über [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html) referenzierst.
 
-
 ```vue
 <script setup lang="ts">
 const boxRef: Ref<TresInstance | null> = ref(null)

docs/de/advanced/primitive.md

@@ -7,14 +7,14 @@ Die `<primitive />`-Komponente ist eine vielseitige Low-Level-Komponente in Tres
 ```html
 <script setup lang="ts">
   // Importieren der notwendigen Klassen von three.js
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
 
   // Geometry und Material erstellen
-  const geometry = new BoxGeometry(1, 1, 1);
-  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicMaterial({ color: 0x00ff00 })
 
   // Mesh mit der Geometrie und dem Material erstellen
-  const meshWithMaterial = new Mesh(geometry, material);
+  const meshWithMaterial = new Mesh(geometry, material)
 </script>
 
 <template>
@@ -34,9 +34,9 @@ Die `<primitive />`-Komponente ist besonders nützlich, um komplexe Objekte wie
 
 ```html
 <script lang="ts" setup>
-import { useGLTF } from '@tresjs/cientos'
+  import { useGLTF } from '@tresjs/cientos'
 
-const { nodes } = await useGLTF('/models/AkuAku.gltf')
+  const { nodes } = await useGLTF('/models/AkuAku.gltf')
 </script>
 
 <TresCanvas>

docs/de/api/composables.md

@@ -233,4 +233,4 @@ const context = useTresContext()
 | **renderer** | der [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) deiner Szene |
 | **scene** | die [Szene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
 | **setCameraActive** | eine Methode, um eine Kamera als aktiv zu setzen |
-| **sizes** | enthält die Breite, Höhe und das Seitenverhältnis deines Canvas |
+| **sizes** | enthält die Breite, Höhe und das Seitenverhältnis deines Canvas |

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

@@ -97,7 +97,6 @@ Alle Properties, die in der zugrundeliegenden Klasse eine `.set()`-Methode haben
 
 Um Transformations-Properties wie Position, Rotation und Skalierung anzugeben, gibt es eine Kurzform, die es dir erlaubt, direkt die Achse anzugeben, die du innerhalb der Eigenschaften setzen möchtest. Eine ähnliche Kurzform ist auch für die Farb-Property verfügbar.
 
-
 <!-- Wir haben die Farbsyntax von Vue zu HTML geändert, da Vue verschachtelte Komponenten nicht einfärbt -->
 ```html
 <TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">

docs/de/cookbook/basic-animations.md

@@ -58,7 +58,6 @@ const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
 
 Jetzt, wo wir eine Referenz zum Würfel haben, können wir ihn animieren. Wir werden den `onLoop`-Callback verwenden, um die Rotation des Würfels zu aktualisieren.
 
-
 ```ts
 onLoop(({ delta, elapsed }) => {
   if (boxRef.value) {

docs/de/cookbook/index.md

@@ -2,4 +2,4 @@
 
 In diesem "Kochbuch" findest du erlesene Rezepte, um den Einstieg in die Grundlagen von Tres zu erleichtern. Jedes Rezept ist darauf ausgelegt, Kernkonzepte von Tres zu vermitteln und zu zeigen, wie die Anwendung aussieht.
 
-<Cookbook />
+<Cookbook />

docs/de/cookbook/lights-shadows.md

@@ -107,7 +107,6 @@ Wir können einfach das Boolean `cast-shadow` hinzufügen. Vue interpretiert es
 
 _Umgebungslicht erzeugt hier keine Art von Schatten_
 
-
 ```vue{6}
 //...
 

docs/de/cookbook/load-models.md

@@ -18,7 +18,6 @@ In dieser Anleitung konzentrieren wir uns auf das Laden von gLTF-Modellen (GL Tr
 
 Es gibt verschiedene Möglichkeiten, Modelle in TresJS zu laden.
 
-
 ::: warning
 Bitte beachte, dass wir in den vorherigen Beispielen das "top-level" `await` verwendet haben. Stelle sicher, dass du es mit einer [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense)-Komponente umgibst.
 :::

docs/de/cookbook/orbit-controls.md

@@ -102,7 +102,6 @@ import OrbitControls from './OrbitControls.vue'
 ```
 :::
 
-
 ## OrbitControls von `cientos`
 
 Jetzt wird es interessant. ✨

docs/de/cookbook/shaders.md

@@ -68,19 +68,19 @@ Für dieses Beispiel sehen unsere Uniforms so aus:
 ```ts
 import { Vector2 } from 'three'
 
-//...
+// ...
 const uniforms = {
   uTime: { value: 0 },
   uAmplitude: { value: new Vector2(0.1, 0.1) },
   uFrequency: { value: new Vector2(20, 5) },
 }
-//..
+// ..
 ```
 
 Unser Fragment-Shader sieht so aus:
 
 ```ts
-//...
+// ...
 const fragmentShader = `
 precision mediump float;
 varying vec2 vUv;
@@ -89,7 +89,7 @@ void main() {
     gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
 }
 `
-//..
+// ..
 ```
 
 Und schließlich unser `vertexShader`:
@@ -112,7 +112,7 @@ void main() {
     vUv = uv;
 }
 `
-//..
+// ..
 ```
 
 ## Animieren des Blobs
@@ -127,7 +127,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
 const blobRef = shallowRef(null)
-//...
+// ...
 </script>
 
 <template>
@@ -157,7 +157,7 @@ Nun können wir den `onLoop`-Callback nutzen, um `uTime` zu animieren.
  ```ts
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 
- //...
+ // ...
  const { onLoop } = useRenderLoop()
 
 onLoop(({ elapsed }) => {
@@ -165,7 +165,7 @@ onLoop(({ elapsed }) => {
      blobRef.value.material.uniforms.uTime.value = elapsed
    }
 })
- //...
+ // ...
 ```
 
 Somit haben unseren ersten grundlegenden Shader zum Laufen gebracht!
@@ -184,4 +184,4 @@ Dann könnte man den Code zum Beispiel so organisieren:
 │   ├── shaders/
 │       ├── vertexShader.glsl
 │       ├── fragmentShader.glsl
-```
+```

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

@@ -93,11 +93,13 @@ Wir können auch eine matcapTexture übergeben, um feine Details hinzuzufügen,
 
 ```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>
+```html
+<TresMesh>
+  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+  <TresMeshNormalMaterial :matcap="matcapTexture" />
+</TresMesh>
 ```
 
 Also würde der finale Code so aussehen:

docs/de/debug/devtools.md

@@ -21,4 +21,4 @@ Ab Version <Badge text="^3.7.0" />, führen wir die TresJS-Entwicklerwerkzeuge e
 
 ![](/devtools-scene-inspector.png)
 
-Probiere die neuen Entwicklerwerkzeuge aus und gib uns Feedback! 🎉
+Probiere die neuen Entwicklerwerkzeuge aus und gib uns Feedback! 🎉

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

@@ -33,4 +33,4 @@ Die Verwendung von `v-distance-to` ist reaktiv, sodass sie perfekt mit `@tres/le
 
 ::: warning
 `v-distance-to` wird kein bewegtes Objekt innerhalb des RenderLoops messen.
-:::
+:::

docs/de/guide/getting-started.md

@@ -44,7 +44,6 @@ pnpm add @types/three -D
 
 Du kannst TresJS wie jedes andere Vue-Plugin installieren.
 
-
 ```ts
 import { createApp } from 'vue'
 import Tres from '@tresjs/core'
@@ -74,7 +73,6 @@ import { TresCanvas } from '@tresjs/core'
 Aufgrund von Performance und Bundlegröße ist dieser Ansatz zu empfehlen, da durch das Tree-Shaking nur die tatsächlich verwendeten Komponenten importiert werden.
 :::
 
-
 ## Vite
 
 Da die Version 2 ein benutzerdefinierter Renderer ist, müssen wir dem `vue-compiler` deiner Anwendung mitteilen, die Tres-Komponenten miteinzubeziehen, um die Warnung `[Vue warn]: Failed to resolve component` zu vermeiden.
@@ -93,4 +91,3 @@ export default defineConfig({
   ]
 })
 ```
-

docs/de/guide/index.md

@@ -61,7 +61,6 @@ export default defineConfig({
 
 Das ist notwendig, damit der Templatecompiler mit dem benutzerdefinierten Renderer funktioniert und keine Warnungen in der Konsole ausgibt. Für weitere Informationen siehe [hier](/de/guide/troubleshooting.html).
 
-
 ## Probiere es online aus
 
 ### Playground
@@ -76,7 +75,6 @@ Wir haben einen neuen [StackBlitz](https://stackblitz.com/) Startpunkt, um TresJ
 
 ![](/stackblitz-starter.png)
 
-
 ## Labs
 
 Wir haben auch ein Showroom-Labor mit Beispielen, die mit TresJS erstellt wurden. Probiere es [hier](https://playground.tresjs.org/) aus.

docs/de/guide/troubleshooting.md

@@ -83,4 +83,4 @@ Wir wissen, dass selbst die besten Schlafkatzen gelegentlich Fehler machen und w
 Tickets ohne einen Reproduktionslink werden geschlossen.
 :::
 
-Unser Team aus katzenliebenden Entwicklern wird in Aktion treten, um diese lästigen Fehler zu beseitigen und TresJS für alle zu verbessern. Zusammen können wir TresJS zum Schnurren des 3D-Renderings in Vue machen!
+Unser Team aus katzenliebenden Entwicklern wird in Aktion treten, um diese lästigen Fehler zu beseitigen und TresJS für alle zu verbessern. Zusammen können wir TresJS zum Schnurren des 3D-Renderings in Vue machen!

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

@@ -8,7 +8,6 @@ Dieser Leitfaden hilft dir, deine erste Szene in Tres zu erstellen. 🍩
 </div>
 </ClientOnly>
 
-
 ## Das Canvas einrichten
 
 Bevor wir eine Szene erstellen können, benötigen wir einen Ort, um sie anzuzeigen. Würden wir nur reines [Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) verwenden, müssten wir ein HTML-`canvas`-Element erstellen, um mit dem `WebglRenderer` eine `scene` zu initialisieren.
@@ -120,7 +119,6 @@ Ein **Mesh** ist ein grundlegendes Szenenobjekt in three.js und wird verwendet,
 
 Jetzt sehen wir, wie wir dasselbe mit **TresJS** erreichen können. Dazu verwenden wir die Komponente `<TresMesh />` und fügen im Standard-Slot eine `<TresTorusGeometry />` und ein `<TresMeshBasicMaterial />` ein.
 
-
 ```vue
 <template>
   <TresCanvas window-size>
@@ -137,7 +135,6 @@ Jetzt sehen wir, wie wir dasselbe mit **TresJS** erreichen können. Dazu verwend
 Beachte, dass wir nichts importieren müssen, da **TresJS** automatisch eine **Vue-Komponente basierend auf dem Three-Objekt, das du verwenden möchtest, im PascalCase mit einem Tres-Prefix** generiert. Wenn du zum Beispiel ein `AmbientLight` verwenden möchtest, würdest du die `TresAmbientLight`-Komponente nutzen.
 :::
 
-
 ```vue
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'

docs/de/team.md

@@ -32,4 +32,4 @@ import { core } from '../_data/team'
       <VPTeamMembers size="small" :members="emeriti" />
     </template>
   </VPTeamPageSection> -->
-</VPTeamPage>
+</VPTeamPage>

docs/debug/devtools.md

@@ -1,8 +1,6 @@
 # Devtools
 
-
-
-One of the most difficult things a developer faces when creating 3D experiences on the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. The imperative nature of [ThreeJS](https://threejs.org/) makes it incredibly difficult to debug, having to depend on `console.log` to see what's going on, or third party to fine-tune and inspect the scene.
+One of the most difficult things a developer faces when creating 3D experiences in the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. A developer might come to rely on a series of `console.log`s or third-party tools just to inspect the scene.
 
 Don't make me get started with checking the performance of your scene. 😱
 

docs/es/advanced/primitive.md

@@ -7,20 +7,20 @@ El componente `<primitive />` es un componente versátil de bajo nivel en TresJS
 ```html
 <script setup lang="ts">
   // Importa las clases necesarias de three.js
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
 
   // Crea una geometría de caja y un material básico
-  const geometry = new BoxGeometry(1, 1, 1);
-  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicMaterial({ color: 0x00ff00 })
 
   // Crea un mesh con la geometría y el material
-  const meshWithMaterial = new Mesh(geometry, material);
+  const meshWithMaterial = new Mesh(geometry, material)
 </script>
 
 <template>
   <TresCanvas>
     <primitive :object="meshWithMaterial" />
-  </TresCanvas>  
+  </TresCanvas>
 </template>
 ```
 
@@ -34,9 +34,9 @@ El componente `<primitive />` es especialmente útil para renderizar objetos com
 
 ```html
 <script lang="ts" setup>
-import { useGLTF } from '@tresjs/cientos'
+  import { useGLTF } from '@tresjs/cientos'
 
-const { nodes } = await useGLTF('/models/AkuAku.gltf')
+  const { nodes } = await useGLTF('/models/AkuAku.gltf')
 </script>
 
 <TresCanvas>

docs/es/api/composables.md

@@ -196,7 +196,6 @@ Este composable tiene como objetivo proporcionar acceso al modelo de estado que
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
@@ -233,4 +232,3 @@ const context = useTresContext()
 | **scene** | la [escena](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) |
 | **setCameraActive** | un método para establecer una cámara activa |
 | **sizes** | contiene el ancho, alto y relación de aspecto de tu lienzo |
-

docs/es/api/events.md

@@ -17,7 +17,7 @@
 
 | Event         | se dispara cuando ...                                                                 | Tipo(s) de parámetro del controlador de eventos                                                                                                                                                                       |
 | ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... los eventos pointerdown y pointerup se disparan en el mismo objeto uno tras otro | [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) |
+| click        | ... los eventos pointerdown y pointerup se disparan en el mismo objeto uno tras otro | [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  | ... el puntero se mueve sobre el objeto                                               | [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 | ... el puntero entra en el objeto                                                     | [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 | ... el puntero sale del objeto                                                        | [PointerEvent](https://developer.mozilla.org/es/docs/Web/API/PointerEvent)                                                                                                                         |

docs/es/api/tres-canvas.md

@@ -102,4 +102,3 @@ Tres intenta ser lo menos opinado posible. Es por eso que no establece casi ning
 | Propiedad | Descripción |
 | ---- | ---- |
 | context | ver [useTresContext](composables#usetrescontext) |
-

docs/es/cookbook/index.md

@@ -2,4 +2,4 @@
 
 Descubre recetas guiadas para ayudarte a comenzar con los conceptos básicos de usar Tres. Cada receta está diseñada para ayudarte a comprender los conceptos fundamentales de Tres y cómo utilizarlos en tus proyectos.
 
-<Cookbook />
+<Cookbook />

docs/es/cookbook/lights-shadows.md

@@ -117,7 +117,7 @@ _La luz ambiental no genera ningún tipo de sombra aquí_
     :position="[0, 2, 0]"
     :intensity="1"
   />
-  
+
   //...
 </template>
 ```

docs/es/cookbook/load-models.md

@@ -82,7 +82,7 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder 
+    <primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
   </TresCanvas>
 </template>
 ```

docs/es/cookbook/orbit-controls.md

@@ -104,13 +104,12 @@ import OrbitControls from './OrbitControls.vue'
 ```
 :::
 
-
 ## OrbitControls de `cientos`
 
-Aquí es donde comienza la parte interesante. ✨  
+Aquí es donde comienza la parte interesante. ✨
 El paquete `cientos` proporciona un componente llamado `<OrbitControls />` que es un envoltorio de los `OrbitControls` del módulo [`three-stdlib`](https://github.com/pmndrs/three-stdlib).
 
-¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.  
+¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.
 Simplemente funciona. 💯
 
 ```vue {3,12}

docs/es/cookbook/shaders.md

@@ -69,19 +69,19 @@ Para este ejemplo, nuestros uniforms se ven así:
 ```ts
 import { Vector2 } from 'three'
 
-//...
+// ...
 const uniforms = {
   uTime: { value: 0 },
   uAmplitude: { value: new Vector2(0.1, 0.1) },
   uFrequency: { value: new Vector2(20, 5) },
 }
-//..
+// ..
 ```
 
 Nuestro fragment shader se ve así:
 
 ```ts
-//...
+// ...
 const fragmentShader = `
 precision mediump float;
 varying vec2 vUv;
@@ -90,7 +90,7 @@ void main() {
     gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
 }
 `
-//..
+// ..
 ```
 
 Y finalmente nuestro `vertexShader`:
@@ -113,7 +113,7 @@ void main() {
     vUv = uv;
 }
 `
-//..
+// ..
 ```
 
 ## Animando el blob
@@ -127,7 +127,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
 const blobRef = shallowRef(null)
-//...
+// ...
 </script>
 
 <template>
@@ -151,16 +151,16 @@ Una vez que hayamos hecho eso, podemos usar el callback `onLoop` para animar nue
 
  ```ts
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
- 
- //...
+
+ // ...
  const { onLoop } = useRenderLoop()
- 
+
 onLoop(({ elapsed }) => {
    if (blobRef.value) {
      blobRef.value.material.uniforms.uTime.value = elapsed
    }
 })
- //...
+ // ...
 ```
 
 Y eso es todo, tenemos nuestro shader básico funcionando sin problemas.
@@ -179,4 +179,4 @@ Y podrías tener una estructura similar a esta:
 │   ├── shaders/
 │       ├── vertexShader.glsl
 │       ├── fragmentShader.glsl
-```
+```

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

@@ -93,11 +93,13 @@ También podemos pasar una matcapTexture para agregar detalles finales, utilizan
 
 ```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>
+```html
+<TresMesh>
+  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+  <TresMeshNormalMaterial :matcap="matcapTexture" />
+</TresMesh>
 ```
 
 Entonces, el código final sería algo como esto:
@@ -184,15 +186,17 @@ Podemos pasar las opciones como props
 
 en caso de que no se proporcionen las opciones, los valores predeterminados son:
 
-```js
-size: 0.5,
-height: 0.2,
-curveSegments: 5,
-bevelEnabled: true,
-bevelThickness: 0.05,
-bevelSize: 0.02,
-bevelOffset: 0,
-bevelSegments: 4,
+```
+{
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
 ```
 
 De forma predeterminada, el texto en ThreeJS comienza en la posición inicial de la malla, por lo que si es [0,0,0], el texto comenzará allí, pero podemos centrarlo simplemente pasando la bandera "center".

docs/es/guide/getting-started.md

@@ -90,4 +90,4 @@ export default defineConfig({
     }),
   ]
 })
-```
+```

docs/es/guide/index.md

@@ -9,15 +9,15 @@
 ::: code-group
 
 ```bash [npm]
-npm install @tresjs/core three 
+npm install @tresjs/core three
 ```
 
 ```bash [yarn]
-yarn add @tresjs/core three 
+yarn add @tresjs/core three
 ```
 
 ```bash [pnpm]
-pnpm add @tresjs/core three 
+pnpm add @tresjs/core three
 ```
 
 :::
@@ -56,7 +56,7 @@ export default defineConfig({
       ...templateCompilerOptions
     }),
   ],
-}),
+})
 ```
 
 Esto es necesario para que el compilador de plantillas funcione con el renderizador personalizado y no lance advertencias en la consola. Para obtener más información, consulta [aquí](/guide/troubleshooting.html).
@@ -109,4 +109,3 @@ lunchboxApp.mount('#lunchbox')
 ```
 
 Así que me inspiré en ambas bibliotecas para crear un renderizador personalizado de Vue para ThreeJS. Eso es **TresJS v2**.
-

docs/es/guide/nuxt.md

@@ -13,15 +13,15 @@ El repositorio está [aquí](https://github.com/Tresjs/nuxt)
 ::: code-group
 
 ```bash [pnpm]
-pnpm add three @tresjs/nuxt 
+pnpm add three @tresjs/nuxt
 ```
 
 ```bash [npm]
-npm install three @tresjs/nuxt 
+npm install three @tresjs/nuxt
 ```
 
 ```bash [yarn]
-yarn add three @tresjs/nuxt 
+yarn add three @tresjs/nuxt
 ```
 
 :::
@@ -55,4 +55,4 @@ Si deseas utilizar cualquier paquete del ecosistema de TresJS, puedes instalar l
 ```bash
 # Usando pnpm
 pnpm add @tresjs/cientos @tresjs/post-processing
-```
+```

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,234 @@
+# 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,149 @@
+# 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,104 @@
+# 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,111 @@
+---
+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,204 @@
+---
+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'])
+```
+
+```html
+<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 :
+
+```
+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` 😍