chore: 629 eslint flat config (#630)

* chore: add flat `eslint-config`

* chore: lint initial autofix

* chore: fix lint statements per line and typing

* chore: fix rest of issues and ignore stagtements per line

* chore: playground lint fix

* chore: fix lint

.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}."
+  }
+}

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,10 +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
 
-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).
+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).

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

@@ -107,41 +107,39 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { 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/',
-              },
-            ],
-          },
-        ],
-      },  
+      { 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',
@@ -174,4 +172,4 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       },
     },
   },
-}
+}

docs/.vitepress/config/index.ts

@@ -4,7 +4,7 @@ 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({
@@ -15,7 +15,7 @@ export default defineConfig({
     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

@@ -106,41 +106,39 @@ export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
       { 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/',
-              },
-            ],
-          },
-        ],
-      },
+      { 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',

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

@@ -151,7 +151,7 @@ Then you can bind the textures to the material.
 `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)
+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.
@@ -202,7 +202,6 @@ This composable aims to provide access to the state model which contains multipl
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
@@ -239,4 +238,3 @@ const context = useTresContext()
 | **scene** | The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
 | **setCameraActive** | A method to set a camera active |
 | **sizes** | Contains width, height and aspect ratio of your canvas |
-

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` |
 | **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` |
 | **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `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/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/extending.md

@@ -10,7 +10,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 ## Étendre un élément dynamiquement
 
-Vous pouvez également l'ajouter dynamiquement dans vos composants :
+Vous pouvez également l'ajouter dynamiquement dans vos composants :
 
 ```vue {2,3,4,7,13,15}
 <script setup lang="ts">

docs/fr/advanced/primitive.md

@@ -7,26 +7,26 @@ Le composant `<primitive />` est un composant polyvalent de bas niveau dans Tres
 ```html
 <script setup lang="ts">
   // Importez les classes three.js nécessaires
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  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 });
+  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);
+  const meshWithMaterial = new Mesh(geometry, material)
 </script>
 
 <template>
   <TresCanvas>
     <primitive :object="meshWithMaterial" />
-  </TresCanvas>  
+  </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é.
+`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
 
@@ -34,9 +34,9 @@ Le composant `<primitive />` est particulièrement utile pour restituer des obje
 
 ```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/fr/api/composables.md

@@ -24,7 +24,7 @@ Veuillez noter les implications en termes de performances lors de l'utilisation
 
 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.
+- `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.
@@ -101,7 +101,7 @@ Le composable `useTexture` vous permet de charger des textures à l'aide du [loa
 const texture = await useTexture(['path/to/texture.png'])
 ```
 
-**useTexture** accepte également un objet avec les propriétés suivantes :
+**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
@@ -161,8 +161,8 @@ 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.
+- `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.
 
@@ -196,7 +196,6 @@ Ce composable vise à donner accès au modèle d'état qui contient plusieurs pr
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
@@ -233,4 +232,3 @@ const context = useTresContext()
 | **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

@@ -17,7 +17,7 @@ Les composants **TresJS** émettent des événements de pointeur lorsqu'ils inte
 
 | 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) |
+| 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)                                                                                                                         |

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

@@ -2,7 +2,7 @@
 
 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`:
+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'
@@ -25,7 +25,7 @@ Cela signifie que vous pouvez utiliser la même [documentation](https://threejs.
 
 ## Déclarer des objets
 
-Si nous suivons cet argument, vous devriez pouvoir définir une instance comme celle-ci : ❌
+Si nous suivons cet argument, vous devriez pouvoir définir une instance comme celle-ci : ❌
 
 ```vue
 <template>
@@ -62,7 +62,7 @@ Certains objets ThreeJS ont des arguments, par exemple le constructeur « Perspe
 - `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` :
+Pour transmettre ces arguments au composant `TresPerspectiveCamera`, vous pouvez utiliser la propriété `args` :
 
 ```vue
 <template>
@@ -81,7 +81,7 @@ 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 :
+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" />
@@ -89,7 +89,7 @@ Vous pouvez également transmettre des propriétés au composant, par exemple `T
 
 ### 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 :
+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]" />
@@ -114,12 +114,11 @@ Il est important de noter que lors de la définition de la propriété rotation
 <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 :
+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" /> ✅
@@ -131,7 +130,7 @@ Un autre raccourci que vous pouvez utiliser consiste à transmettre une valeur s
 
 ### 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 :
+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" /> ✅
@@ -143,7 +142,7 @@ Vous pouvez transmettre des couleurs aux composants en utilisant la propriété
 
 ### 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 :
+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

@@ -102,4 +102,3 @@ Tres essaie d’être aussi neutre que possible. C'est pourquoi il ne définit p
 | Propriété | Descriptif |
 | ---- | ---- |
 | context | voir [useTresContext](composables#usetrescontext) |
-

docs/fr/cookbook/index.md

@@ -2,4 +2,4 @@
 
 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 />
+<Cookbook />

docs/fr/cookbook/lights-shadows.md

@@ -117,7 +117,7 @@ _La lumière ambiante ne génère ici aucun type d'ombre_
     :position="[0, 2, 0]"
     :intensity="1"
   />
-  
+
   //...
 </template>
 ```

docs/fr/cookbook/load-models.md

@@ -16,7 +16,7 @@ Pour ce guide, nous allons nous concentrer sur le téléchargement de modèles g
 
 <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 :
+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.
@@ -24,7 +24,7 @@ Veuillez noter que dans les exemples ci-dessus, nous avons utilisé l'attente de
 
 ## 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.
+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).
 
@@ -82,7 +82,7 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
   >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
-    <primitive :object="nodes.MyModel" /> // "MyModel" ici n'est qu'un placeholder 
+    <primitive :object="nodes.MyModel" /> // "MyModel" ici n'est qu'un placeholder
   </TresCanvas>
 </template>
 ```
@@ -119,7 +119,7 @@ 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 :
+Ensuite, c'est aussi simple que d'ajouter la scène à votre scène :
 
 ```html{2}
 <TresCanvas shadows alpha>

docs/fr/cookbook/load-textures.md

@@ -14,11 +14,11 @@ Les textures tridimensionnelles (3D) sont des images contenant plusieurs couches
 
 <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 :
+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.
+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).
 
@@ -64,7 +64,7 @@ const pbrTexture = await useTexture({
   alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
 })
 ```
-Semblable à l'exemple précédent, nous pouvons transmettre toutes les textures à un matériau via des accessoires :
+Semblable à l'exemple précédent, nous pouvons transmettre toutes les textures à un matériau via des accessoires :
 
 ```html
 <Suspense>

docs/fr/cookbook/orbit-controls.md

@@ -58,14 +58,13 @@ Vous pouvez maintenant utiliser le composant `TresOrbitControls` dans votre scè
 
 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 :
+Le code final ressemblerait donc à ceci :
 
 ```vue
 <script setup lang="ts">

docs/fr/cookbook/shaders.md

@@ -25,7 +25,7 @@ Nous importons tous les modules dont nous avons besoin. Pour plus de commodité,
 
 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.
+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">
@@ -64,24 +64,24 @@ Pour notre blob, nous pourrions utiliser un simple `SphereGeometry` en ajoutant
 
 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 :
+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 :
+Notre fragment shader ressemble à ceci :
 
 ```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);
 }
 `
-//..
+// ..
 ```
 
 Et enfin notre `vertexShader`:
@@ -113,7 +113,7 @@ void main() {
     vUv = uv;
 }
 `
-//..
+// ..
 ```
 
 ## Animer le 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 @@ Une fois que nous avons fait cela, nous pouvons utiliser le rappel `onLoop` pour
 
  ```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.
@@ -171,7 +171,7 @@ _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 :
+Et vous devriez avoir une structure similaire à celle-ci :
 
 ```
 ├── src/
@@ -179,4 +179,4 @@ Et vous devriez avoir une structure similaire à celle-ci :
 │   ├── shaders/
 │       ├── vertexShader.glsl
 │       ├── fragmentShader.glsl
-```
+```

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

@@ -93,14 +93,16 @@ Nous pouvons également transmettre un matcapTexture pour ajouter les derniers d
 
 ```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>
 ```
 
-Le code final ressemblerait donc à ceci :
+Le code final ressemblerait donc à ceci :
 
 ```vue
 <script setup lang="ts">
@@ -184,7 +186,7 @@ Nous pouvons passer les options comme une propriété:
 
 Dans le cas où les options ne sont pas fournies, les valeurs par défaut sont :
 
-```js
+```
 size: 0.5,
 height: 0.2,
 curveSegments: 5,

docs/fr/debug/devtools.md

@@ -17,10 +17,10 @@ A partir de la version <Badge text="^3.7.0" />, nous introduisons TresJS Dev Too
 ### 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.
+- **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 ! 🎉
+Profitez des nouveaux outils de développement et dites-nous ce que vous en pensez ! 🎉

docs/fr/guide/troubleshooting.md

@@ -85,4 +85,4 @@ Nous savons que même les meilleurs font parfois des erreurs, et nous avons beso
 Les tickets sans lien de reproduction seront fermés
 :::
 
-Notre équipe de développeurs amoureux des chats passera à l'action pour éliminer ces bugs embêtants et améliorer TresJS pour tout le monde. Ensemble, faisons de TresJS le miaulement de chat du rendu 3D dans Vue !
+Notre équipe de développeurs amoureux des chats passera à l'action pour éliminer ces bugs embêtants et améliorer TresJS pour tout le monde. Ensemble, faisons de TresJS le miaulement de chat du rendu 3D dans Vue !

docs/guide/getting-started.md

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

docs/guide/index.md

@@ -56,7 +56,7 @@ export default defineConfig({
       ...templateCompilerOptions
     }),
   ],
-}),
+})
 ```
 
 This is required to make the template compiler work with the custom renderer so it does not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
@@ -75,7 +75,6 @@ We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS
 
 ![](/stackblitz-starter.png)
 
-
 ## Labs
 
 We also have a showcase lab of examples made with TresJS. Check it out [here](https://playground.tresjs.org/).

docs/guide/migration-guide.md

@@ -133,6 +133,7 @@ watch(modelRef, ({ getModel }) => {
   model.position.set(0, 0, 0)
 })
 </script>
+
 <template>
   <primitive :object="nodes.MyModel" />
 </template>
@@ -149,11 +150,12 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
 
 const modelRef = ref()
 
-watch(modelRef, model => {
+watch(modelRef, (model) => {
   // Do something with the model
   model.position.set(0, 0, 0)
 })
 </script>
+
 <template>
   <primitive :object="nodes.MyModel" />
 </template>
@@ -191,7 +193,7 @@ To this:
 
 For v3 we reworked the whole state logic to make it more flexible and easier to use for plugin authors and ecosystem packages. Instead of using a store like in v2, we now use a context provider based on `provide/inject`.
 
-The `useTres` function is now an alias of the `useTresContext` function to avoid breaking demos and experiments out there, but consider using `useTresContext` from now on. 
+The `useTres` function is now an alias of the `useTresContext` function to avoid breaking demos and experiments out there, but consider using `useTresContext` from now on.
 
 Instead of a big reactive object, you will now get the `scene` and `renderer` refs, between other properties, directly.
 
@@ -217,4 +219,4 @@ const { scene, renderer } = useTresContext()
 console.log(scene.value)
 ```
 
-For more detailed information about the new context provider system, you can read the [API DOCS](/api/composables.md) section.
+For more detailed information about the new context provider system, you can read the [API DOCS](/api/composables.md) section.

docs/guide/nuxt.md

@@ -4,7 +4,7 @@
 
 <a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
 
-A official Nuxt module for TresJS is here 🎉. 
+A official Nuxt module for TresJS is here 🎉.
 
 Repository is [here](https://github.com/Tresjs/nuxt)
 
@@ -13,15 +13,15 @@ Repository is [here](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
 ```
 
 :::
@@ -39,8 +39,8 @@ yarn add three @tresjs/nuxt
 
 ```js
 export default defineNuxtConfig({
-  modules: ["@tresjs/nuxt"],
-});
+  modules: ['@tresjs/nuxt'],
+})
 ```
 
 That's it! You can now use `@tresjs/nuxt` in your Nuxt app ✨
@@ -55,4 +55,4 @@ If you want to use the any package from the TresJS ecosystem, you can install th
 ```bash
 # Using pnpm
 pnpm add @tresjs/cientos @tresjs/post-processing
-```
+```

docs/nl/advanced/caveats.md

@@ -30,7 +30,10 @@ onLoop(({ _delta, elapsed }) => {
 
 <template>
   <TresMesh
-   ref="boxRef" :scale="1" cast-shadow>
+    ref="boxRef"
+    :scale="1"
+    cast-shadow
+  >
     <TresBoxGeometry :args="[1, 1, 1]" />
     <TresMeshStandardMaterial color="teal" />
   </TresMesh>
@@ -74,11 +77,11 @@ In tegenstelling tot `ref()` wordt de innerlijke waarde van een ondiepe ref opge
 
 ```vue
 <script setup lang="ts">
-const position = reactive({ x: 0, y: 0, z: 0 });
+const position = reactive({ x: 0, y: 0, z: 0 })
 
 onLoop(({ _delta, elapsed }) => {
-  position.x = Math.sin(elapsed * 0.1) * 3;
-});
+  position.x = Math.sin(elapsed * 0.1) * 3
+})
 </script>
 
 <template>
@@ -93,14 +96,14 @@ onLoop(({ _delta, elapsed }) => {
 
 ```vue
 <script setup lang="ts">
-const position = { x: 0, y: 0, z: 0 };
-const boxRef: ShallowRef<TresInstance | null> =
-  shallowRef(null);
+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;
-});
+  boxRef.value.position.x
+    = Math.sin(elapsed * 0.1) * 3
+})
 </script>
 
 <template>

docs/nl/advanced/primitive.md

@@ -7,20 +7,20 @@ De component `<primitive />` is een veelzijdige component op laag niveau in Tres
 ```html
 <script setup lang="ts">
   // Importeer de benodigde three.js-klassen
-  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
 
   // Maak een doosgeometrie en een basismateriaal
-  const geometry = new BoxGeometry(1, 1, 1);
-  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicMaterial({ color: 0x00ff00 })
 
   // Maak een mesh met de geometrie en het materiaal
-  const meshWithMaterial = new Mesh(geometry, material);
+  const meshWithMaterial = new Mesh(geometry, material)
 </script>
 
 <template>
   <TresCanvas>
     <primitive :object="meshWithMaterial" />
-  </TresCanvas>  
+  </TresCanvas>
 </template>
 ```
 
@@ -34,9 +34,9 @@ De component `<primitive />` is vooral handig voor het renderen van complexe obj
 
 ```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/nl/api/composables.md

@@ -196,7 +196,6 @@ Deze composable is om toegang te bieden tot het state model dat meerdere nuttige
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
@@ -233,4 +232,3 @@ const context = useTresContext()
 | **scene** | De [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). |
 | **setCameraActive** | Een methode om de actieve camera te zetten |
 | **sizes** | Bevat breedte, hoogte en aspect ratio van je canvas |
-

docs/nl/api/events.md

@@ -17,7 +17,7 @@
 
 | Event         | wordt afgevuurd, wanneer ...                                                          | Event Handler Parameter Type(s)                                                                                                                                                                       |
 | ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| click         | ... de events pointerdown and pointerup vuurt op hetzelfde object de een na de ander | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
+| click        | ... de events pointerdown and pointerup vuurt op hetzelfde object de een na de ander | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-move  | ... de pointer hangt boven het object                                            | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-enter | ... de pointer gaat het object in                                                | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) |
 | pointer-leave | ... de pointer is uit het object aan het gaan                                                  | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/pointerEvent)                                                                                                                         |

docs/nl/api/tres-canvas.md

@@ -76,7 +76,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **camera** | Een handmatige camera die door de renderer moet worden gebruikt. | |
 | **clearColor** | De kleur die de renderer gebruikt om het canvas leeg te maken. | `#000000` |
 | **context** | Dit kan worden gebruikt om de renderer aan een bestaand [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) te koppelen | |
-| **depth** | Of de drawing buffer een [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) heeft van tenminste 16 bits. | `true` |
+| **depth** | Of de drawing buffer een [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) heeft van tenminste 16 bits. | `true` |
 | **disableRender** | Blokkeer render op requestAnimationFrame, handig voor PostProcessing | `false` |
 | **failIfMajorPerformanceCaveat** | Er wordt gedetecteerd of het maken van de renderer zal mislukken bij lage prestaties. Zie [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` |
 | **logarithmicDepthBuffer** | Of de logarithmic depth buffer gebruikt moet worden. Het kan zijn dat dit noodzakelijk is als je te maken hebt met flinke verschillen in scale in een enkele scene. Merk op dat deze setting gebruik maakt van gl_FragDepth wanneer deze beschikbaar is en deze schakelt [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) uit en kan een verlies in prestaties veroorzaken. | `false` |

docs/nl/cookbook/basic-animations.md

@@ -24,7 +24,7 @@ Voor een gedetailleerde uitleg over hoe het werkt, raadpleegt u de documentatie
 const { onLoop } = useRenderLoop()
 
 onLoop(({ delta, elapsed }) => {
-  // Ik run elke frame op ~ 60FPS (depending of your monitor)
+  // Ik run elke frame op ~ 60FPS (depending of your monitor)
 })
 ```
 
@@ -94,4 +94,4 @@ De onderstaande ingesloten pagina toont de [benchmark van een proxy versus een g
 
 <EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
 
-U kunt hier meer over lezen in de sectie [Caveats](../advanced/caveats.md#reactivity).
+U kunt hier meer over lezen in de sectie [Caveats](../advanced/caveats.md#reactivity).

docs/nl/cookbook/index.md

@@ -2,4 +2,4 @@
 
 Ontdek begeleide recepten om u op weg te helpen met de basisprincipes van het gebruik van Tres. Elk recept is ontworpen om u te helpen de kernconcepten van Tres te begrijpen en hoe u deze in uw projecten kunt gebruiken.
 
-<Cookbook />
+<Cookbook />