Merge branch 'main' into feature/vRotate

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

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.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
@@ -25,3 +25,8 @@ runs:
     - name: install dependencies
       run: pnpm install --shamefully-hoist
       shell: bash
+
+# Avoid running husky hooks on Github
+# http://typicode.github.io/husky/how-to.html
+env:
+  HUSKY: 0

.github/workflows/lint-pr.yml

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

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -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

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -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

.husky/install.mjs

@@ -0,0 +1,8 @@
+// Skip Husky install in production and CI
+// http://typicode.github.io/husky/how-to.html
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+const husky = (await import('husky')).default
+// eslint-disable-next-line no-console
+console.log(husky())

.husky/pre-push

@@ -0,0 +1,25 @@
+# NOTE: Don't fail immediately after error
+# This allows us to echo messages even if the linter exits with an error.
+set +e  
+
+# NOTE: --silent to keep pnpm from echoing, e.g., "> @tresjs/core[...] lint" 
+# --max-warnings=0 to fail on errors *and* warnings
+pnpm --silent lint --max-warnings=0
+
+# NOTE: Capture linter exit status.
+LINT_STATUS=$?
+
+# NOTE: If linting failed, inform user how to proceed.
+if [[ $LINT_STATUS != 0 ]]; then
+  echo "
+To fix linter problems:
+  pnpm lint --fix  – fix automatically fixable problems
+  pnpm lint        – print a list of problems to fix by hand
+
+To skip this verification and push anyway (not recommended):
+  git push --no-verify <...>
+"
+fi
+
+# NOTE: +e was set, so we have to return an exit status.
+exit $LINT_STATUS

.release-it.json

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

CHANGELOG.md

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

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

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

README.md

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

components.d.ts

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

composables.d.ts

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

docs/.eslintrc.json

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

docs/.vitepress/config.ts

@@ -1,203 +0,0 @@
-import { defineConfig } from 'vitepress'
-import { resolve } from 'pathe'
-
-export default defineConfig({
-  title: 'TresJS',
-  description: 'Declarative ThreeJS using Vue Components',
-  head: [
-    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
-    ['meta', { name: 'theme-color', content: '#82DBC5' }],
-    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
-    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
-    ['meta', { property: 'og:type', content: 'website' }],
-    ['meta', { property: 'og:site_name', content: 'TresJS' }],
-    [
-      'meta',
-      {
-        property: 'og:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    [
-      'meta',
-      {
-        property: 'twitter:image',
-        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
-      },
-    ],
-    ['script', { defer: 'true', 'data-site': 'OWBUVCJK', src: 'https://cdn.usefathom.com/script.js' }],
-  ],
-  themeConfig: {
-    logo: '/logo.svg',
-    search: {
-      provider: 'local',
-    },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          // This shows `/guide/index.md` page.
-          { text: 'Introduction', link: '/guide/' },
-          { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Your first Scene', link: '/guide/your-first-scene' },
-          { text: 'Nuxt', link: '/guide/nuxt' },
-          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
-          { text: 'Migrate from v1', link: '/guide/migration-guide' },
-        ],
-      },
-      {
-        text: 'API',
-        items: [
-          { text: 'TresCanvas', link: '/api/tres-canvas' },
-          {
-            text: 'Instances, arguments and props',
-            link: '/api/instances-arguments-and-props',
-          },
-          {
-            text: 'Composables',
-            link: '/api/composables',
-          },
-          {
-            text: 'Events',
-            link: '/api/events',
-          },
-        ],
-      },
-
-      {
-        text: 'Advanced',
-
-        items: [
-          { text: 'Extending', link: '/advanced/extending' },
-          { text: 'primitive', link: '/advanced/primitive' },
-          {
-            text: 'Caveats',
-            link: '/advanced/caveats',
-          },
-        ],
-      },
-      {
-        text: 'Debug',
-        items: [
-          { text: 'Devtools', link: '/debug/devtools' },
-        ],
-      },
-      {
-        text: 'Examples',
-        collapsed: true,
-        items: [
-          { text: 'Orbit Controls', link: '/examples/orbit-controls' },
-          { text: 'Basic Animations', link: '/examples/basic-animations' },
-          { text: 'Groups', link: '/examples/groups' },
-          { text: 'Load Textures', link: '/examples/load-textures' },
-          { text: 'Load Models', link: '/examples/load-models' },
-          { text: 'Load Text', link: '/examples/text-3d' },
-          { text: 'Lights & Shadows', link: '/examples/lights-shadows' },
-          { text: 'Shaders', link: '/examples/shaders' },
-        ],
-      },
-      {
-        text: 'Directives',
-        collapsed: true,
-        items: [
-          { text: 'v-log', link: '/directives/v-log' },
-          { text: 'v-light-helper', link: '/directives/v-light-helper' },
-          { text: 'v-always-look-at', link: '/directives/v-always-look-at' },
-          { text: 'v-distance-to', link: '/directives/v-distance-to' },
-          { text: 'v-rotate', link: '/directives/v-rotate' },
-        ],
-      },
-      {
-        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: 'Post-processing (Soon)',
-          },
-        ],
-      },
-    ],
-    nav: [
-      { text: 'Guide', link: '/guide/' },
-      { 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://playground.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/',
-              },
-            ],
-          },
-        ],
-      },  
-    ],
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/tresjs/tres' },
-      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
-      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
-    ],
-  },
-  vite: {
-    optimizeDeps: {
-      exclude: ['vitepress'],
-      include: ['three'],
-    },
-    server: {
-      hmr: {
-        overlay: false,
-      },
-    },
-    resolve: {
-      alias: {
-        '@tresjs/core': resolve(__dirname, '../../dist/tres.js'),
-      },
-      dedupe: ['@tresjs/cientos', 'three'],
-    },
-  },
-  vue: {
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
-      },
-    },
-  },
-})

docs/.vitepress/config/de.ts

@@ -0,0 +1,176 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Änderungen an dieser Seite vorschlagen',
+    },
+    sidebar: [
+      {
+        text: 'Anleitung',
+        items: [
+          // Dies zeigt die Seite `/guide/index.md`.
+          { text: 'Einführung', link: '/de/guide/' },
+          { text: 'Loslegen', link: '/de/guide/getting-started' },
+          { text: 'Deine erste Szene', link: '/de/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/de/guide/nuxt' },
+          { text: 'Fehlerbehebung', link: '/de/guide/troubleshooting' },
+          { text: 'Migration von v1', link: '/de/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/de/api/tres-canvas' },
+          {
+            text: 'Instanzen, Argumente und Props',
+            link: '/de/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/de/api/composables',
+          },
+          {
+            text: 'Events',
+            link: '/de/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Fortgeschritten',
+        items: [
+          { text: 'Erweitern', link: '/de/advanced/extending' },
+          { text: 'Primitive', link: '/de/advanced/primitive' },
+          {
+            text: 'Warnhinweise',
+            link: '/de/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debugging',
+        items: [
+          { text: 'Entwicklungstools', link: '/de/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Kochbuch 🍳🧑‍🍳',
+        link: '/de/cookbook/',
+        items: [
+          { text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' },
+          { text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' },
+          { text: 'Gruppen', link: '/de/cookbook/groups' },
+          { text: 'Texturen laden', link: '/de/cookbook/load-textures' },
+          { text: 'Modelle laden', link: '/de/cookbook/load-models' },
+          { text: 'Text laden', link: '/de/cookbook/text-3d' },
+          { text: 'Lichter und Schatten', link: '/de/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/de/cookbook/shaders' },
+        ],
+      },
+      {
+        text: 'Direktiven',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/de/directives/v-log' },
+          { text: 'v-light-helper', link: '/de/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/de/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/de/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ökosystem',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: 'https://cientos.tresjs.org/',
+          },
+          {
+            text: 'Nuxt-Modul',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Nachbearbeitung (Demnächst)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Anleitung', link: '/de/guide/' },
+      { text: 'API', link: '/de/api/tres-canvas' },
+      /*       { text: 'API', link: '/de/api/' },
+      { text: 'Konfiguration', link: '/de/config/' }, */
+      {
+        text: 'Ressourcen',
+        items: [
+          { text: 'Team', link: '/de/team' },
+          { text: 'Versionen', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Spielplatz',
+            link: 'https://play.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Probleme',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ökosystem',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt-Modul',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          de: {
+            translations: {
+              button: {
+                buttonText: 'Suchen',
+                buttonAriaLabel: 'Suchen',
+              },
+              modal: {
+                displayDetails: 'Detaillierte Liste anzeigen',
+                resetButtonTitle: 'Suche zurücksetzen',
+                backButtonTitle: 'Suche schließen',
+                noResultsText: 'Keine Ergebnisse für',
+                footer: {
+                  selectText: 'zur Auswahl',
+                  selectKeyAriaLabel: 'enter',
+                  navigateText: 'zum Navigieren',
+                  navigateUpKeyAriaLabel: 'Pfeil nach oben',
+                  navigateDownKeyAriaLabel: 'Pfeil nach unten',
+                  closeText: 'zum Schließen',
+                  closeKeyAriaLabel: 'escape',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+}

docs/.vitepress/config/en.ts

@@ -0,0 +1,144 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Suggest changes to this page',
+    },
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Your first Scene', link: '/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/guide/nuxt' },
+          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
+          { text: 'Migrate from v1', link: '/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/api/tres-canvas' },
+          {
+            text: 'Instances, arguments and props',
+            link: '/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/api/composables',
+          },
+          {
+            text: 'Events',
+            link: '/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Advanced',
+
+        items: [
+          { text: 'Extending', link: '/advanced/extending' },
+          { text: 'Primitive', link: '/advanced/primitive' },
+          {
+            text: 'Caveats',
+            link: '/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debug',
+        items: [
+          { text: 'Devtools', link: '/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Cookbook 🍳🧑‍🍳',
+        link: '/cookbook/',
+        items: [
+          { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
+          { text: 'Basic Animations', link: '/cookbook/basic-animations' },
+          { text: 'Groups', link: '/cookbook/groups' },
+          { text: 'Load Textures', link: '/cookbook/load-textures' },
+          { text: 'Load Models', link: '/cookbook/load-models' },
+          { text: 'Load Text', link: '/cookbook/text-3d' },
+          { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/cookbook/shaders' },
+        ],
+      },
+      {
+        text: 'Directives',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/directives/v-log' },
+          { text: 'v-light-helper', link: '/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/directives/v-distance-to' },
+        ],
+      },
+      {
+        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: 'Post-processing (Soon)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      { 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/',
+            },
+          ],
+        },
+      ] },
+    ],
+  },
+}

docs/.vitepress/config/es.ts

@@ -0,0 +1,174 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Sugerir cambios a esta página',
+    },
+    sidebar: [
+      {
+        text: 'Guía',
+        items: [
+          // Esto muestra la página `/guide/index.md`.
+          { text: 'Introducción', link: '/es/guide/' },
+          { text: 'Empezando', link: '/es/guide/getting-started' },
+          { text: 'Tu primera Escena', link: '/es/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/es/guide/nuxt' },
+          { text: 'Solución de problemas', link: '/es/guide/troubleshooting' },
+          { text: 'Migración desde v1', link: '/es/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/es/api/tres-canvas' },
+          {
+            text: 'Instancias, argumentos y props',
+            link: '/es/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/es/api/composables',
+          },
+          {
+            text: 'Eventos',
+            link: '/es/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Avanzado',
+
+        items: [
+          { text: 'Extender', link: '/es/advanced/extending' },
+          { text: 'Primitive', link: '/es/advanced/primitive' },
+          {
+            text: 'Advertencias',
+            link: '/es/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Depuración',
+        items: [
+          { text: 'Herramientas de desarrollo', link: '/es/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Recetario 🍳🧑‍🍳',
+        link: '/es/cookbook/',
+        items: [
+          { text: 'Controles de órbita', link: '/es/cookbook/orbit-controls' },
+          { text: 'Animaciones básicas', link: '/es/cookbook/basic-animations' },
+          { text: 'Grupos', link: '/es/cookbook/groups' },
+          { text: 'Cargar texturas', link: '/es/cookbook/load-textures' },
+          { text: 'Cargar modelos', link: '/es/cookbook/load-models' },
+          { text: 'Cargar texto', link: '/es/cookbook/text-3d' },
+          { text: 'Luces y sombras', link: '/es/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/es/cookbook/shaders' },
+        ],
+      },
+      {
+        text: 'Directivas',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/es/directives/v-log' },
+          { text: 'v-light-helper', link: '/es/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/es/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/es/directives/v-distance-to' },
+        ],
+      },
+      {
+        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: 'Post-procesamiento (Próximamente)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guía', link: '/es/guide/' },
+      { 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/',
+            },
+          ],
+        },
+      ] },
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          es: {
+            translations: {
+              button: {
+                buttonText: 'Buscar',
+                buttonAriaLabel: 'Buscar',
+              },
+              modal: {
+                displayDetails: 'Mostrar lista detallada',
+                resetButtonTitle: 'Restablecer búsqueda',
+                backButtonTitle: 'Cerrar búsqueda',
+                noResultsText: 'Sin resultados para',
+                footer: {
+                  selectText: 'para seleccionar',
+                  selectKeyAriaLabel: 'entrar',
+                  navigateText: 'para navegar',
+                  navigateUpKeyAriaLabel: 'flecha arriba',
+                  navigateDownKeyAriaLabel: 'flecha abajo',
+                  closeText: 'para cerrar',
+                  closeKeyAriaLabel: 'escape',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+}

docs/.vitepress/config/fr.ts

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

docs/.vitepress/config/index.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitepress'
+import { enConfig } from './en'
+import { esConfig } from './es'
+import { frConfig } from './fr'
+import { deConfig } from './de'
+import { sharedConfig } from './shared'
+import { zhConfig } from './zh'
+import { nlConfig } from './nl'
+
+export default defineConfig({
+  ...sharedConfig,
+
+  locales: {
+    root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
+    es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
+    fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
+    de: { label: 'Deutsch', lang: 'de-DE', link: '/de/', ...deConfig },
+    zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig },
+    nl: { label: 'Nederlands', lang: 'nl-NL', link: '/nl/', ...nlConfig },
+  },
+})

docs/.vitepress/config/nl.ts

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

docs/.vitepress/config/shared.ts

@@ -0,0 +1,94 @@
+import { defineConfig } from 'vitepress'
+import { resolve } from 'pathe'
+
+export const sharedConfig = defineConfig({
+  title: 'TresJS',
+  description: 'Declarative ThreeJS using Vue Components',
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
+    ['meta', { name: 'theme-color', content: '#82DBC5' }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
+    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:site_name', content: 'TresJS' }],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:image',
+        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' }],
+  ],
+  themeConfig: {
+    logo: '/logo.svg',
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          root: {
+            translations: {
+              button: {
+                buttonText: 'Search',
+                buttonAriaLabel: 'Search',
+              },
+              modal: {
+                displayDetails: 'Display detailed list',
+                resetButtonTitle: 'Reset search',
+                backButtonTitle: 'Close search',
+                noResultsText: 'No results for',
+                footer: {
+                  selectText: 'to select',
+                  selectKeyAriaLabel: 'enter',
+                  navigateText: 'to navigate',
+                  navigateUpKeyAriaLabel: 'up arrow',
+                  navigateDownKeyAriaLabel: 'down arrow',
+                  closeText: 'to close',
+                  closeKeyAriaLabel: 'escape',
+                },
+              },
+            },
+          },
+
+        },
+      },
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/tresjs/tres' },
+      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
+      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
+    ],
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: ['vitepress'],
+      include: ['@tresjs/cientos', '@stackblitz/sdk', '@vueuse/core', 'three'],
+    },
+    server: {
+      hmr: {
+        overlay: false,
+      },
+    },
+    resolve: {
+      alias: {
+        '@tresjs/core': resolve(__dirname, '../../../dist/tres.js'),
+      },
+      dedupe: ['@tresjs/cientos', 'three'],
+    },
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  },
+})

docs/.vitepress/config/zh.ts

@@ -0,0 +1,186 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: '对本页内容给出建议',
+    },
+    sidebar: [
+      {
+        text: '使用指南',
+        items: [
+          { text: '简介', link: '/zh/guide/' },
+          { text: '入门指南', link: '/zh/guide/getting-started' },
+          { text: '你的第一个场景', link: '/zh/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/zh/guide/nuxt' },
+          { text: '故障排除', link: '/zh/guide/troubleshooting' },
+          { text: '从 v1 迁移', link: '/zh/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/zh/api/tres-canvas' },
+          {
+            text: '实例, 参数和 props',
+            link: '/zh/api/instances-arguments-and-props',
+          },
+          {
+            text: '组合式函数',
+            link: '/zh/api/composables',
+          },
+          {
+            text: '事件',
+            link: '/zh/api/events',
+          },
+        ],
+      },
+
+      {
+        text: '进阶',
+
+        items: [
+          { text: '扩展', link: '/zh/advanced/extending' },
+          { text: '原语', link: '/zh/advanced/primitive' },
+          {
+            text: '注意事项',
+            link: '/zh/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debug',
+        items: [
+          { text: 'Devtools', link: '/zh/debug/devtools' },
+        ],
+      },
+      {
+        text: '专题手册 🍳🧑‍🍳',
+        link: '/zh/cookbook/',
+        items: [
+          { text: '轨道控制器', link: '/zh/cookbook/orbit-controls' },
+          { text: '基础动画', link: '/zh/cookbook/basic-animations' },
+          { text: '组', link: '/zh/cookbook/groups' },
+          { text: '加载纹理', link: '/zh/cookbook/load-textures' },
+          { text: '加载模型', link: '/zh/cookbook/load-models' },
+          { text: '加载文本', link: '/zh/cookbook/text-3d' },
+          { text: '光照和阴影', link: '/zh/cookbook/lights-shadows' },
+          { text: '着色器', link: '/zh/cookbook/shaders' },
+        ],
+      },
+      {
+        text: '指令',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/zh/directives/v-log' },
+          { text: 'v-light-helper', link: '/zh/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/zh/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/zh/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: '生态系统',
+        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: 'Post-processing (Soon)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: '使用指南', link: '/zh/guide/' },
+      { text: 'API', link: '/zh/api/tres-canvas' },
+      /*       { text: 'API', link: '/api/' },
+      { text: 'Config', link: '/config/' }, */
+      {
+        text: '资源',
+        items: [
+          { text: '团队', link: '/zh/team' },
+          { text: '版本发布', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: '演练场',
+            link: 'https://play.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: '议题',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: '生态系统',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt 模块',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          zh: {
+            translations: {
+              button: {
+                buttonText: '搜索',
+                buttonAriaLabel: '搜索',
+              },
+              modal: {
+                displayDetails: '显示详细列表',
+                resetButtonTitle: '重制搜索',
+                backButtonTitle: '关闭搜索',
+                noResultsText: '没有找到相关结果',
+                footer: {
+                  selectText: '选择',
+                  selectKeyAriaLabel: 'enter',
+                  navigateText: '切换',
+                  navigateUpKeyAriaLabel: '上方向键',
+                  navigateDownKeyAriaLabel: '下方向键',
+                  closeText: '关闭',
+                  closeKeyAriaLabel: 'esc',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    darkModeSwitchLabel: '外观',
+    sidebarMenuLabel: '菜单',
+    returnToTopLabel: '返回顶部',
+    langMenuLabel: '更改语言',
+    lastUpdatedText: '最近更新',
+    outlineTitle: '此页面上',
+    docFooter: {
+      next: '下一页',
+      prev: '上一页',
+    },
+  },
+}

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

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { data as recipes } from '../recipes.data.ts'
+
+const { lang } = useData()
+
+const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang === lang.value.split('-')[0]))
+</script>
+
+<template>
+  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 -mx-4 pt-8">
+    <li
+      v-for="recipe of filteredRecipes"
+      :key="recipe.title"
+      class="list-none important-m-0"
+    >
+      <a
+        :href="recipe.url"
+      >
+        <img
+          :src="recipe.thumbnail"
+          :alt="recipe.title"
+          class="aspect-video object-cover rounded-lg"
+        />
+
+        <h3>
+          {{ recipe.title }}
+          <span
+            v-for="n in recipe.difficulty"
+            :key="n"
+            aria-label="chili"
+            role="img"
+            class="text-sm"
+          >🌶️</span>
+
+        </h3></a>
+      <p>{{ recipe.excerpt }}</p>
+    </li>
+  </ul>
+</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

@@ -14,11 +14,11 @@ const { data } = useSponsor()
   <div class="action">
     <a
       class="sponsor"
-      href="https://github.com/sponsors/vitejs"
+      href="https://github.com/sponsors/tresjs"
       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/config.css → docs/.vitepress/theme/custom.css

@@ -1,6 +1,7 @@
 :root {
   --vp-home-hero-name-color: #82dbc5;
   --vp-c-brand: #82dbc5;
+  --vp-c-brand-1: #75c5b1;
   --vp-c-dark: #1f1f1e;
 }
 

docs/.vitepress/theme/index.ts

@@ -1,12 +1,10 @@
-import 'uno.css'
-import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import VPTheme from 'vitepress/theme'
 
-// .vitepress/theme/index.ts
-import Theme from 'vitepress/theme'
-import './config.css'
+import 'uno.css'
+import './custom.css'
 
 import TresLayout from './TresLayout.vue'
-import HomeSponsors from './components/HomeSponsors.vue'
 
 /* const plausible = createPlausible({
   init: {
@@ -20,11 +18,10 @@ import HomeSponsors from './components/HomeSponsors.vue'
 }) */
 
 export default {
-  ...Theme,
+  ...VPTheme,
 
-  enhanceApp(ctx) {
-    Theme.enhanceApp(ctx)
-    /* ctx.app.use(plausible) */
-  },
+  /* enhanceApp(ctx) {
+    ctx.app.use(plausible)
+  }, */
   Layout: TresLayout,
-}
+} satisfies Theme

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

@@ -0,0 +1,28 @@
+import { createContentLoader } from 'vitepress'
+
+export interface Recipe {
+  title: string
+  url: string
+  excerpt: string | undefined
+  thumbnail?: string
+  difficulty?: number
+}
+
+declare const data: Recipe[]
+export { data }
+
+export default createContentLoader('/**/cookbook/*.md', {
+  excerpt: true,
+  transform(raw): Recipe[] {
+    return raw
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        lang: url.split('/')[1].length === 2 ? url.split('/')[1] : 'en',
+        thumbnail: frontmatter.thumbnail,
+        difficulty: frontmatter.difficulty,
+        excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
+      })).filter(recipe => recipe.title)
+      .sort((a, b) => b.title - a.title)
+  },
+})

docs/_data/team.js

@@ -22,6 +22,7 @@ export const core = [
       { icon: 'github', link: 'https://github.com/JaimeTorrealba' },
       { icon: 'twitter', link: 'https://twitter.com/jaimebboyjt' },
     ],
+    sponsor: 'https://github.com/sponsors/JaimeTorrealba',
   },
   {
     avatar: 'https://www.github.com/Tinoooo.png',
@@ -33,4 +34,4 @@ export const core = [
       { icon: 'twitter', link: 'https://twitter.com/@ichbintino' },
     ],
   },
-]
+]

docs/advanced/caveats.md

@@ -36,13 +36,13 @@ onLoop(({ _delta, elapsed }) => {
 </template>
 ```
 
-If you make a change on the `color` of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
+If you change the `color` attribute of the `TresMeshStandardMaterial` component, you will see that the change is applied but the rotation is not working anymore. This is because the instance is disposed and created again.
 
 :::tip
-So as **rule of thumb** you should reload the page whenever you don't see the changes you made.
+So as **rule of thumb** you should reload the page whenever you don't see your changes reflected.
 :::
 
-That being said we are working on a better solution for this 😁. If you have any idea how to solve this, please let us know.
+That being said we are working on a better solution for this 😁. If you have any idea on how to solve this, please let us know.
 
 You can follow the discussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
 
@@ -52,7 +52,7 @@ We all love reactivity 💚. It is one of the most powerful features of VueJS. H
 
 Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.
 
-Since we are rendering an scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the that objectthat many times. This is not a good idea 😅 and will be detrimental for performance.
+Since we are rendering a scene and updating it in every frame, for example with a rate of 60FPS this means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update set object 60 times. This is not a good idea 😅 and will be detrimental for performance.
 
 Here is a benchmark of the difference between using a Proxy object and a plain object.
 
@@ -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

@@ -13,13 +13,13 @@ The `useRenderLoop` composable is the core of **TresJS** animations. It allows y
 ```ts
 const { onLoop, resume } = useRenderLoop()
 
-onLoop(({ delta, elapsed, clock, dt }) => {
+onLoop(({ delta, elapsed, clock }) => {
   // I will run at every frame ~60FPS (depending of your monitor)
 })
 ```
 
 ::: warning
-Be mindfull of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references.
+Be mindful of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references.
 :::
 
 The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock):
@@ -27,7 +27,7 @@ The `onLoop` callback receives an object with the following properties based on
 - `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame.
 - `elapsed`: The elapsed time since the start of the render loop.
 
-This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/orgs/Tresjs/people/wheatjs) for the amazing contribution.
+This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution.
 
 ### Before and after render
 
@@ -148,6 +148,12 @@ Then you can bind the textures to the material.
 </template>
 ```
 
+`useTexture` by default takes the second argument 'manager' as LoadingManager. When omitted, it will automatically be added to `THREE.DefaultLoadingManager`. Of course, you can also add your own LoadingManager, like this:
+```ts
+const loadingManager = new LoadingManager()
+const texture = await useTexture({ map: 'path/to/texture.png' }, loadingManager)
+```
+
 Similar to above composable, the `useTexture` composable returns a promise, you can use it with `async/await` or `then/catch`. If you are using it on a component make sure you wrap it with a `Suspense` component.
 
 ## useSeek
@@ -196,11 +202,10 @@ This composable aims to provide access to the state model which contains multipl
 
 ```ts
 const { camera, renderer, camera, cameras } = useTresContext()
-
 ```
 
 ::: warning
-`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Use [the context exposed by TresCanvas](tres-canvas#exposed-public-properties) if you find yourself needing it in parent components of TresCanvas. 
+`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Use [the context exposed by TresCanvas](tres-canvas#exposed-public-properties) if you find yourself needing it in parent components of TresCanvas.
 :::
 
 ```vue
@@ -222,15 +227,14 @@ const context = useTresContext()
 ### Properties of context
 | Property | Description |
 | --- | --- |
-| **camera** | the currently active camera |
-| **cameras** | the cameras that exist in the scene |
-| **controls** | the controls of your scene |
-| **deregisterCamera** | a method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
+| **camera** | The currently active camera |
+| **cameras** | The cameras that exist in the scene |
+| **controls** | The controls of your scene |
+| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. |
 | **extend** | Extends the component catalogue. See [extending](/advanced/extending) |
-| **raycaster** | the global raycaster used for pointer events |
-| **registerCamera** | a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
-| **renderer** | the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
-| **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 |
-
+| **raycaster** | The global raycaster used for pointer events |
+| **registerCamera** | A method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. |
+| **renderer** | The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene |
+| **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/instances-arguments-and-props.md

@@ -10,7 +10,7 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
+With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in PascalCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
 
 ```vue
 <template>

docs/api/tres-canvas.md

@@ -45,7 +45,7 @@ Tres comes with a few presets for the `TresCanvas` component. You can use them b
 
 ### Realistic
 
-The `realistic` preset makes easy to setup the renderer for more realistic 3D scenes.
+The `realistic` preset makes it easy to setup the renderer for more realistic 3D scenes.
 
 ```vue
 <template>
@@ -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/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default']
     DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
     EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
     ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']

docs/examples/basic-animations.md → docs/cookbook/basic-animations.md

@@ -1,3 +1,11 @@
+---
+title: Basic Animations
+description: How to use a the useRenderLoop composable to animate your objects.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
 # Basic Animations
 
 This guide will help you get started with basic animations in TresJS.
@@ -16,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/examples/groups.md → docs/cookbook/groups.md

@@ -1,3 +1,11 @@
+---
+title: Groups
+description: Learn how to group multiple objects in the scene.
+author: alvarosabu
+thumbnail: /recipes/groups.png
+difficulty: 0
+---
+
 # Group
 
 A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).

docs/cookbook/index.md

@@ -0,0 +1,5 @@
+# Cookbook 🍳🧑‍🍳
+
+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 />

docs/examples/lights-shadows.md → docs/cookbook/lights-shadows.md

@@ -1,3 +1,11 @@
+---
+title: Lights and Shadows
+description: Learn how to add lights and shadows to your scene.
+author: alvarosabu
+thumbnail: /recipes/lights-and-shadows.png
+difficulty: 0
+---
+
 # Light-shadows
 
 This guide will help you get started with simple light and shadows in TresJS.
@@ -8,7 +16,7 @@ We will build a simple scene with three meshes and a plane but only two will hav
 ## Setting up the scene (optional)
 
 We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[check here to know how](/examples/orbit-controls).
+[check here to know how](/cookbook/orbit-controls).
 
 Let's put four objects in our scene, one will be the plane that receive shadows, two of them will cast shadows and the last one will not cast any shadow at all.
 
@@ -94,7 +102,7 @@ We could divide this into three steps:
 ```
 ### Set the light to cast shadows
 
-We can simple put the boolean `cast-shadow`, Vue understand this as a `prop` with `true` value
+We can simply add the boolean `cast-shadow`, Vue understands this as a `prop` with a value of `true`.
 
 _The AmbientLight doesn't generate any type of shadow here_
 
@@ -108,7 +116,7 @@ _The AmbientLight doesn't generate any type of shadow here_
     :position="[0, 2, 0]"
     :intensity="1"
   />
-  
+
   //...
 </template>
 ```
@@ -139,7 +147,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
 </template>
 ```
 
-Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/examples/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
+Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/cookbook/basic-animations), and we add movement to our cube, you will see the shadow is animated as well. 🤩
 
 ```vue
 <script setup>

docs/examples/load-models.md → docs/cookbook/load-models.md

@@ -1,3 +1,11 @@
+---
+title: Load Models
+description: Load 3D models into your Tres scenes.
+author: alvarosabu
+thumbnail: /recipes/gltf-model.png
+difficulty: 1
+---
+
 # Load Models
 
 > All models used in this guide are from [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
@@ -11,7 +19,7 @@ For this guide we are going to focus on loading gLTF (GL Transmission Format) mo
 There are several ways to load models on TresJS:
 
 ::: warning
-Please note that the examples above we use top level await, make sure you wrap it with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information. .
+Please note that in the examples above we use top level `await`s. Make sure to wrap such code with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information.
 :::
 
 ## Using `useLoader`
@@ -31,7 +39,7 @@ Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive)
 
 ```html{2}
 <TresCanvas>
-    <primitive :object="scene" />
+  <primitive :object="scene" />
 </TresCanvas>
 ```
 
@@ -57,7 +65,7 @@ import { useGLTF } from '@tresjs/cientos'
 const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
 ```
 
-Alternatively you can easily select Objects inside the model using `nodes` property
+Alternatively you can easily select objects inside the model using the `nodes` property.
 
 ```vue
 <script setup lang="ts">
@@ -74,14 +82,14 @@ 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>
 ```
 
 ## Using `GLTFModel`
 
-The `GLTFModel` component is a wrapper around `useGLTF` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
+The `GLTFModel` component is a wrapper around the `useGLTF` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
 
 ```vue{2,9}
 <script setup lang="ts">
@@ -121,7 +129,7 @@ Then is as straightforward as adding the scene to your scene:
 
 ## FBXModel
 
-The `FBXModel` component is a wrapper around `useFBX` that's available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar usage to `GLTFModel`:
+The `FBXModel` component is a wrapper around the `useFBX` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package. It's similar in usage to `GLTFModel`:
 
 ```vue{2,9}
 <script setup lang="ts">

docs/examples/load-textures.md → docs/cookbook/load-textures.md

@@ -1,3 +1,11 @@
+---
+title: Load Textures
+description: Add texture maps to your TresJS objects.
+author: alvarosabu
+thumbnail: /recipes/load-textures.png
+difficulty: 1
+---
+
 # Load Textures
 
 > All textures used in this example are from [ambientcg](https://ambientcg.com/).

docs/examples/orbit-controls.md → docs/cookbook/orbit-controls.md

@@ -1,3 +1,11 @@
+---
+title: OrbitControls
+description: How to use OrbitControls to interact with the scene.
+author: alvarosabu
+thumbnail: /recipes/orbit-controls.png
+difficulty: 1
+---
+
 # OrbitControls
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
@@ -31,41 +39,56 @@ extend({ OrbitControls })
 
 Now you can use the `TresOrbitControls` component in your scene.
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <template>
-  <TresCanvas
-    shadows
-    alpha
-  >
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
-  </TresCanvas>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
 </template>
 ```
+:::
 
-Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments.
+Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer. You need to pass those as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.
 
-You can use the [useTres](/api/composables#usetres) composable to get the camera and the renderer.
+::: warning
+`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Thats why we created a subcomponent called `OrbitControls.vue`. See more about [context](/api/composables#usetrescontext).
+:::
 
 ```ts
-import { useTres } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
 ```
 
 So the final code would be something like this:
 
-```vue
+::: code-group
+
+```vue [OrbitControls.vue]
 <script setup lang="ts">
-import { extend, useTres } from '@tresjs/core'
+import { extend, useTresContext } from '@tresjs/core'
 import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 
-const { state } = useTres()
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue] {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 
 <template>
@@ -74,23 +97,27 @@ const { state } = useTres()
     alpha
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <TresOrbitControls
-      v-if="state.renderer"
-      :args="[state.camera, state.renderer?.domElement]"
-    />
+    <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
+:::
 
 ## OrbitControls from `cientos`
 
-Here is where the fancy part begins. ✨  
-The `cientos` package provides a component called `<OrbitControls />` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+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
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
   <TresCanvas
     shadows

docs/examples/shaders.md → docs/cookbook/shaders.md

@@ -12,8 +12,8 @@ _Basic knowledge of how shaders work is necessary_
 
 ## Setting up the scene (optional)
 
-We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[look here to see how](/examples/orbit-controls).
+We import all the modules that we need. To make it more convenient we will import and use the orbit-controls from cientos,
+[look here to see how](/cookbook/orbit-controls).
 
 Now, let's put our camera in the `[11,11,11]` position.
 
@@ -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,12 +105,12 @@ void main() {
     vUv = uv;
 }
 `
-//..
+// ..
 ```
 
 ## Animating the blob
 
-Similar to what we learn in the [Basic animations](/examples/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Similar to what we learn in the [Basic animations](/cookbook/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">
@@ -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 />
+      <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
     </TresMesh>
   </TresCanvas>
 </template>
@@ -143,19 +143,19 @@ 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 it is, we have our basic shader running smoothly.
+And that's it, we have our basic shader running smoothly. 🎉
 
 ## Using GLSL vite-pluging (optional)
 
@@ -171,4 +171,4 @@ And you could have a structure similar to this:
 │   ├── shaders/
 │       ├── vertexShader.glsl
 │       ├── fragmentShader.glsl
-```
+```

docs/examples/text-3d.md → docs/cookbook/text-3d.md

@@ -1,3 +1,11 @@
+---
+title: Text 3D
+description: Add 3D text with ease
+author: alvarosabu
+thumbnail: /recipes/text-3d.png
+difficulty: 1
+---
+
 # Text3D
 
 [TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) is one of the ways we can add 3D text in our scene.
@@ -29,7 +37,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 extend({ TextGeometry })
 ```
 
-[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) needs a only one required argument the font, you can see an example below.
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) requires only one argument - the font. You can find an example below.
 
 ```js
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
@@ -48,7 +56,7 @@ const font = await new Promise((resolve, reject) => {
 })
 ```
 
-Now you can use the `TresTextGeometry` component inside a TresMesh in your scene
+Next you can use the `TresTextGeometry` component inside a TresMesh in your scene
 
 ```vue
 <template>
@@ -81,18 +89,20 @@ const fontOptions = {
 }
 ```
 
-We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh
+We can also pass a matcapTexture to add final details, using the TresMeshNormalMaterial inside the TresMesh.
 
 ```ts
 const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+```
 
-  <TresMesh>
-    <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-    <TresMeshNormalMaterial :matcap="matcapTexture" />
-  </TresMesh>
+```html
+<TresMesh>
+  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+  <TresMeshNormalMaterial :matcap="matcapTexture" />
+</TresMesh>
 ```
 
-So the final code would be something like this:
+So the final code would look something like this:
 
 ```vue
 <script setup lang="ts">
@@ -148,11 +158,11 @@ const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresj
 </template>
 ```
 
-I know seems like a lot of work, but good news there is a much more simple way
+We know this seems like a lot of work, but good news is, there is a much more simple way
 
 ## TextGeometry from `cientos`
 
-The `cientos` package provides a component called `<Text3D />` that is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
+The `cientos` package provides a component called `<Text3D />`, which is a wrapper of the `TextGeometry` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module.
 
 The nicest part? You don't need to extend the catalog and just pass the font argument.
 It just works. 💯 (if not text is provided, the text will be TresJS)
@@ -174,9 +184,9 @@ We can pass the options as props
 <Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
 ```
 
-in case the options are not provided the default values are:
+in case the options are not provided, the default values will be:
 
-```js
+```
 size: 0.5,
 height: 0.2,
 curveSegments: 5,
@@ -187,7 +197,7 @@ bevelOffset: 0,
 bevelSegments: 4,
 ```
 
-By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] the text will start there but we can center it by just passing the flag "center"
+By default text in ThreeJS starts at the mesh initial position, so it's [0,0,0] and the text will start there but we can center it by just passing the flag "center"
 
 ```vue
 <Text3D :font="fontPath" :text="my 3d text" center />

docs/de/advanced/caveats.md

@@ -0,0 +1,120 @@
+# Warnhinweise 😱
+
+Unser Ziel ist es, eine einfache Möglichkeit zu bieten, Three.js in Vue.js mit der bestmöglichen Entwicklererfahrung zu nutzen. Es gibt jedoch einige Vorbehalte, derer du dir bewusst sein solltest.
+
+## ~~HMR und Three.js~~
+
+:::info
+
+Dies wurde in **TresJS** v1.7.0 🎉 behoben. Jetzt kannst du HMR nutzen, ohne die Seite neu laden zu müssen 🥹.
+
+:::
+
+Hot Module Replacement (HMR) ist eine Funktion, die es dir erlaubt, deinen Code zu aktualisieren, ohne die Seite neu zu laden. Dies ist eine großartige Funktion, die die Entwicklung viel schneller macht. **TresJS** verwendet [Vite](https://vitejs.dev/). Es ist jedoch wirklich kompliziert, dies korrekt mit Three.js zu bewerkstelligen.
+
+Warum? Weil Tres die Szene deklarativ aufbaut. Das bedeutet, dass es die Instanz erstellt und der Szene hinzufügt, wenn die Komponente gemountet wird. Die Komplexität liegt darin zu wissen, wann die Instanz aus der Szene entfernt und wann sie wieder hinzugefügt werden soll.
+
+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)
+
+onLoop(({ _delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :scale="1"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+Wenn du eine Änderung an der `color`-Property bei Instanzen der  `TresMeshStandardMaterial`-Komponente vornimmst, wirst du sehen, dass die Änderung angewendet wird, aber die Rotation  nicht mehr funktioniert. Dies liegt daran, dass die Instanz entfernt und neu erstellt wird.
+
+:::tip
+Als **Faustregel**, solltest du die Seite neu laden, wenn du die von dir vorgenommenen Änderungen nicht siehst.
+:::
+
+Wir arbeiten bereits an einer besseren Lösung dafür 😁. Wenn du eine Idee hast, wie man dies lösen könnte, lass es uns bitte wissen.
+
+Du kannst der Diskussion in [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23) folgen.
+
+## Reaktivität
+
+Wir alle lieben Reaktivität 💚. Es ist eines der mächtigsten Features von Vue.js. Allerdings sollten wir vorsichtig sein, wenn wir Three.js verwenden.
+
+Die Reaktivität von Vue basiert auf [Proxies](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Dies ermöglicht es Vue 3, automatisch Änderungen an Datenobjekten zu verfolgen und die entsprechenden DOM-Elemente jedes Mal zu aktualisieren, wenn sich die Daten ändern.
+
+Da wir eine Szene rendern und sie bei jedem Frame (60FPS) aktualisieren, bedeutet das, dass wir die Szene 60 Mal pro Sekunde aktualisieren. Wenn das zu aktualisierende Objekt reaktiv ist, wird Vue versuchen, dieses Objekt so oft zu aktualisieren. Das ist keine gute Idee 😅 und wird sich negativ auf die Performance auswirken.
+
+Hier ist ein Benchmark, der den Unterschied zwischen der Verwendung eines Proxy-Objekts und eines einfachen Objekts zeigt.
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
+  <figcaption>Fig.1 - Ausführungen pro Sekunde: Objekt vs Proxy. </figcaption>
+</figure>
+
+Quelle: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Falls es wirklich notwendig ist, Reaktivität zu nutzen, verwende [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref).
+
+Im Gegensatz zu `ref()` wird der innere Wert eines shallow Ref gespeichert und so wie er ist exponiert. Nur der Zugriff auf `.value` ist reaktiv. Quelle: [Vue.js Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### Beispiel
+
+❌ Falsch
+
+```vue
+<script setup lang="ts">
+const position = reactive({ x: 0, y: 0, z: 0 })
+
+onLoop(({ _delta, elapsed }) => {
+  position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+✅ Richtig
+
+```vue
+<script setup lang="ts">
+const position = { x: 0, y: 0, z: 0 }
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+onLoop(({ _delta, elapsed }) => {
+  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```

docs/de/advanced/extending.md

@@ -0,0 +1,44 @@
+# Erweitern 🔌
+
+Tres bietet grundlegende Funktionalitäten, aber es ist einfach, Drittanbieterelemente hinzuzufügen und den internen Katalog zu erweitern.
+
+Die meisten 3D-Szenen nutzen `OrbitControls`, die allerdings nicht Teil der Hauptbibliothek sind. Um es zu deinem Projekt hinzufügen, kannst du es aus dem Modul `three/addons/controls/OrbitControls` importieren.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Ein Element dynamisch erweitern
+
+Oder du erweiterst den Katalog dynamisch innerhalb deiner Komponente:
+
+```vue {2,3,4,7,13,15}
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Element dem Katalog hinzufügen
+extend({ TextGeometry, OrbitControls })
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

docs/de/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+Die `<primitive />`-Komponente ist eine vielseitige Low-Level-Komponente in TresJS, die es dir ermöglicht, ohne Abstraktion jedes Objekt von Three.js direkt in deiner Vue-Anwendung zu verwenden. Sie dient als Brücke zwischen dem Reaktivitätssystem von Vue und dem Szenengraph von Three.js.
+
+## Verwendung
+
+```html
+<script setup lang="ts">
+  // Importieren der notwendigen Klassen von three.js
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'
+
+  // Geometry und Material erstellen
+  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)
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`object`: Diese Property erwartet ein `Object3D`-Objekt von three.js oder eine seiner abgeleiteten Klassen. Es ist das Hauptobjekt, das die `<primitive />`-Komponente rendern wird. Im aktualisierten Beispiel wird ein `Mesh`-Objekt mit dem entsprechenden `Material` an diese Property übergeben.
+
+## Verwendung mit Modellen
+
+Die `<primitive />`-Komponente ist besonders nützlich, um komplexe Objekte wie Modelle, die aus externen Quellen geladen werden, zu rendern. Das folgende Beispiel zeigt, wie ein Modell aus einer GLTF-Datei geladen und mit der `<primitive />`-Komponente gerendert wird.
+
+```html
+<script lang="ts" setup>
+  import { useGLTF } from '@tresjs/cientos'
+
+  const { nodes } = await useGLTF('/models/AkuAku.gltf')
+</script>
+
+<TresCanvas>
+  <Suspense>
+    <primitive :object="nodes.AkuAku" />
+  </Suspense>
+</TresCanvas>
+```

docs/de/api/composables.md

@@ -0,0 +1,236 @@
+# Composables
+
+Die Composition API von Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) ermöglicht es dir, wiederverwendbare Logik und Hooks zu schreiben.
+
+**TresJS** nutzt diese API, um eine Reihe von zusammensetzbaren Funktionen bereitzustellen, die verwendet werden können um zum Beispiel Animationen zu erstellen oder mit der Szene zu interagieren. Sie ermöglicht dir auch, komplexere Szenen zu erstellen, die mit reinen Vue-Komponenten (Texturen, Loader usw.) eventuell nicht möglich wären.
+
+Der Kern von **TresJS** verwendet diese Composables auch intern, so dass du dieselbe API verwendest, die der Kern nutzt. Zum Beispiel verwenden Komponenten, die im internen Rendering-Loop aktualisiert werden müssen, das Composable `useRenderLoop`, um einen Callback zu registrieren, der bei jeder Aktualisierung der Szene durch den Renderer aufgerufen wird.
+
+## useRenderLoop
+
+Das Composable `useRenderLoop` ist der Kern der Animationen in **TresJS**. Es ermöglicht dir, einen Callback zu registrieren, der mit der nativen Bildwiederholrate aufgerufen wird. Dies ist das wichtigste Composable in **TresJS**.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+onLoop(({ delta, elapsed, clock, dt }) => {
+  // Wird jeden Frame ausgeführt (60 FPS, abhängig vom Monitor)
+})
+```
+
+::: warning
+Achte auf die Performance-Auswirkungen beim Verwenden dieses Composables, da es bei jedem Frame ausgeführt wird. Wenn du also viel Logik in deinem Callback hast, könnte dies die Performance deiner Anwendung beeinträchtigen. Insbesondere, wenn du State oder reaktive Referenzen veränderst.
+:::
+
+Der `onLoop`-Callback erhält ein Objekt mit den folgenden, auf der [Uhr von THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) basierenden Properties:
+
+- `delta`: Die verstrichene Zeit zwischen dem aktuellen Frame und dem letzten Frame. Dies ist die Zeit in Sekunden seit dem letzten Frame.
+- `elapsed`: Die verstrichene Zeit seit Beginn des Render-Loops.
+
+Dieses Composable basiert auf `useRafFn` von [vueuse](https://vueuse.org/core/useRafFn/). Danke an [@wheatjs](https://github.com/wheatjs) für diesen wundervollen Beitrag.
+
+### Vor und nach dem Rendern
+
+Es gibt jeweils zwei Callbacks die aufgerufen werden, vor und nachdem der Render die Szene aktualisiert. Dies ist nützlich, wenn du beispielsweise einen Profiler hinzufügst, um die FPS zu messen.
+
+```ts
+const { onBeforeLoop, onAfterLoop } = useRenderLoop()
+
+onBeforeLoop(({ delta, elapsed }) => {
+  // Wird ausgeführt bevor der Renderer die Szene aktualisiert
+  fps.begin()
+})
+
+onAfterLoop(({ delta, elapsed }) => {
+  // Wird ausgeführt nachdem der Renderer die Szene aktualisiert hat
+  fps.end()
+})
+```
+
+### Pausieren und Fortsetzen
+
+Du kannst den Rendering-Loop mit den Methoden `pause` und `resume` pausieren und fortsetzen.
+
+```ts
+const { pause, resume } = useRenderLoop()
+
+// Rendering-Loop pausieren
+pause()
+
+// Rendering-Loop fortsetzen
+resume()
+```
+
+Du kannst auch den aktiven Status des Rendering-Loops mit der Property `isActive` abfragen.
+
+```ts
+const { resume, isActive } = useRenderLoop()
+
+console.log(isActive) // false
+
+resume()
+
+console.log(isActive) // true
+```
+
+## useLoader
+
+Das Composable `useLoader` ermöglicht es dir, Ressourcen mit den [Loadern von THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models) zu laden. Es gibt ein Promise mit der geladenen Ressource zurück.
+
+```ts
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+```
+
+Da das Composable `useLoader` ein Promise zurückgibt, kannst du es mit `async/await` oder `then/catch` verwenden. Stelle sicher, dass du die Komponente im Template mit einer `Suspense`-Komponente umgibst. Siehe [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) für mehr Informationen.
+
+```vue{2,4}
+<template>
+  <Suspense>
+    <TheComponentUsingLoader />
+  </Suspense>
+</template>
+```
+
+## useTexture
+
+Das Composable `useTexture` ermöglicht es dir, Texturen mit dem [Texture Loader von THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader) zu laden. Es gibt ein Promise mit der/den geladenen Textur(en) zurück.
+
+```ts
+const texture = await useTexture(['path/to/texture.png'])
+```
+
+**useTexture** akzeptiert auch ein Objekt mit den folgenden Properties:
+
+- `map`: Eine Basistextur, die auf die Oberfläche eines Objekts angewendet wird
+- `displacementMap`: Eine Textur, die verwendet wird, um Beulen oder Einbuchtungen auf der Oberfläche des Objekts hinzuzufügen
+- `normalMap`: Eine Textur, die verwendet wird, um Oberflächendetails und Schattierungsvariationen am Objekt hinzuzufügen
+- `roughnessMap`: Eine Textur, die verwendet wird, um Rauheit oder ein mattes Finish auf der Oberfläche des Objekts hinzuzufügen
+- `metalnessMap`: Eine Textur, die verwendet wird, um einen metallischen Effekt auf der Oberfläche des Objekts hinzuzufügen
+- `aoMap`: Eine Textur, die verwendet wird, um Ambient Occlusion (Schattierung in Bereichen, wo Licht durch andere Objekte blockiert wird) am Objekt hinzuzufügen
+- `alphaMap`: Eine Textur, die verwendet wird, um Transparenz hinzuzufügen (der schwarze Teil wird als transparent gerendert). Um diese "Map" zu verwenden, ist es notwendig, :transparent="true" im Material zu setzen
+- `matcap`: Diese Textur kodiert die Farbe und Schattierung des Materials
+
+In diesem Fall gibt es ein Objekt mit den geladenen Texturen zurück.
+
+```ts
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
+  map: 'path/to/albedo.png',
+  displacementMap: 'path/to/height.png',
+  normalMap: 'path/to/normal.png',
+  roughnessMap: 'path/to/roughness.png',
+  metalnessMap: 'path/to/metalness.png',
+  aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
+  matcap: 'path/to/matcap.png',
+})
+```
+
+Dann kannst du die Texturen an das Material binden.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial
+        :map="map"
+        :displacement-map="displacementMap"
+        :normal-map="normalMap"
+        :roughness-map="roughnessMap"
+        :metalness-map="metalnessMap"
+        :ao-map="aoMap"
+        :alpha-map="alphaMap"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Ähnlich wie das vorherige Composable gibt das `useTexture`-Composable ein Promise zurück, das du mit `async/await` oder `then/catch` verwenden kannst. Auch hier solltest du es im Template innerhalb einer `Suspense`-Komponente verwenden.
+
+## useSeek
+
+Das Composable `useSeek` bietet Hilfsmittel, um leicht durch komplexe Three.js-Szenen und Objektgrafiken zu navigieren. Es exportiert 4 Funktionen, die es dir ermöglichen, Objekte basierend auf spezifischen Properties zu finden.
+
+```ts
+const { seek, seekByName, seekAll, seekAllByName } = useSeek()
+```
+
+Die Funktion `seek` akzeptiert drei Parameter:
+
+- `parent`: Eine Three.js-Szene oder Object3D.
+- `property`: Die Property, die für die Suchbedingung verwendet wird.
+- `value`: Der Wert der Property, mit dem abgeglichen wird.
+
+Die Funktionen `seek` und `seekByName` durchsuchen das Objekt nach einem Kindobjekt mit den angegebenen Parametern. Wenn kein Kind mit der passenden Property und  Wert gefunden wird, geben sie `null` zurück und zeigen eine Warnung.
+
+```ts
+const carRef = ref(null)
+
+watch(carRef, ({ model }) => {
+  if (model) {
+    const car = model.children[0]
+
+    const body = seek(car, 'name', 'Octane_Octane_Body_0')
+    body.color.set(new Color('blue'))
+  }
+})
+```
+
+Ähnlich geben die Funktionen `seekAll` und `seekAllByName` ein Array von Kindobjekten zurück, deren Property den gegebenen Wert enthält. Wenn keine Übereinstimmungen gefunden werden, geben sie ein leeres Array zurück und zeigen eine Warnung.
+
+```ts
+const character = ref(null)
+
+watch(character, ({ model }) => {
+  if (model) {
+    const bones = seekAll(character, type, 'Bone')
+  }
+})
+```
+
+## useTresContext
+
+Dieses Composable bietet Zugriff auf den Kontext, der mehrere nützliche Properties enthält.
+
+```ts
+const { camera, renderer, camera, cameras } = useTresContext()
+```
+
+::: warning
+`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` als Anbieter der Kontextdaten fungiert. Verwende [den von TresCanvas bereitgestellten Kontext](tres-canvas#offentlich-exportierte-properties), wenn du in Komponenten darauf zugreifen musst, die über den TresCanvas hinausgehen.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+
+const context = useTresContext()
+</script>
+```
+
+### Kontexteigenschaften
+
+| Eigenschaft | Beschreibung |
+| --- | --- |
+| **camera** | die aktuell aktive Kamera |
+| **cameras** | die Kameras, die in der Szene vorhanden sind |
+| **controls** | die Steuerungen deiner Szene |
+| **deregisterCamera** | eine Methode zum de-registrieren einer Kamera. Dies ist nur notwendig, wenn du eine Kamera manuell erstellst. Kameras im Template werden automatisch de-registriert. |
+| **extend** | Erweitert den Katalog der Komponenten. Siehe [Erweiterung](/de/advanced/extending) |
+| **raycaster** | der globale Raycaster, der für Zeigereignisse verwendet wird |
+| **registerCamera** | eine Methode zum Registrieren einer Kamera. Dies ist nur notwendig, wenn du eine Kamera manuell erstellst. Kameras im Template werden automatisch registriert. |
+| **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 |

docs/de/api/events.md

@@ -0,0 +1,27 @@
+# Events
+
+**TresJS**-Komponenten lösen Pointer-Events aus, wenn mit ihnen interagiert wird. Dies gilt für Komponenten, die von [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) abgeleitet sind (wie Meshes, Groups, ...).
+
+<StackBlitzEmbed project-id="tresjs-events" />
+
+## Pointer Events
+
+```html
+<TresMesh
+  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
+  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
+  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
+  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
+/>
+```
+
+| Event      | wird ausgelöst, wenn ...                                                         | Typ(en) des Eventhandler-Parameters                                                                                                                                |
+| ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| click         | ... die Ereignisse pointerdown und pointerup nacheinander auf demselben Objekt ausgelöst werden | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
+| pointer-move  | ... der Zeiger sich über dem Objekt bewegt                                         | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
+| pointer-enter | ... der Zeiger in das Objekt eintritt                                              | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent) |
+| pointer-leave | ... der Zeiger das Objekt verlässt                                                 | [PointerEvent](https://developer.mozilla.org/de/docs/Web/API/PointerEvent)                                                                                          |
+
+Die zurückgegebene [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) beinhaltet das [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D), das das Ereignis ausgelöst hat. Du kannst darauf über `intersection.object` zugreifen.
+
+Standardmäßig werden Events von Objekten, die vor anderen Objekten mit Event-Handlern positioniert sind nicht blockiert. Dieses Verhalten kann aber mit der Eigenschaft `blocks-pointer-events` erreicht werden.

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

@@ -0,0 +1,151 @@
+# Instanzen
+
+Die Hauptidee von **Tres** ist ein _automatisch generierter Katalog_ aller Three.js-Elemente. Dieser Katalog wird aus dem Quellcode von Three.js generiert, sodass er immer auf dem neuesten Stand ist.
+
+Wenn du reines Three.js schreibst, musst du die Elemente, die du nutzen möchtest, explizit importieren. Zum Beispiel, wenn du eine `PerspectiveCamera` verwenden möchtest, musst du sie aus dem `three` Paket importieren:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+Mit **Tres** musst du nichts importieren, da **Tres** automatisch eine **Vue-Komponente basierend auf dem Three-Objekt, das du verwenden möchtest, im PascalCase mit einem Tres-Prefix** generiert. Zum Beispiel, wenn du eine `PerspectiveCamera` verwenden möchtest, kannst du die Komponente `<TresPerspectiveCamera />` nutzen.
+
+```vue{3}
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+Das bedeutet, dass du dieselbe [Dokumentation](https://threejs.org/docs/) nutzen kannst, die du beim Verwenden von Three.js verwenden würdest.
+
+## Objekte deklarieren
+
+Wenn wir diesem Argument folgen, solltest du in der Lage sein, eine Instanz auf diese Weise zu definieren: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="new THREE.Vector3(1, 2, 3)"
+    />
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+Aber mit **Tres** ist das nicht notwendig, du kannst die Properties auf deklarative Weise wie folgt definieren: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="[1, 2, 3]"
+    />
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+## Argumente
+
+Einige Three.js-Objekte haben Argumente. Zum Beispiel hat der Konstruktor `PerspectiveCamera` folgende Argumente:
+
+- `fov` - Vertikales Sichtfeld der Kamera.
+- `aspect` - Seitenverhältnis des Frustums der Kamera.
+- `near` - Vordere Clippingebene des Sichtbereichs.
+- `far` - Hintere Clippingebene des Sichtbereichs.
+
+Um diese Argumente an die Komponente `TresPerspectiveCamera` zu übergeben, kannst du die Property `args` verwenden:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+Dasselbe kann wie folgt geschrieben werden:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+# Props
+
+Du kannst auch Props an die Komponente übergeben. Zum Beispiel hat das `TresAmbientLight` eine Property `intensity`, die folgendermaßen übergeben werden können:
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Werte Setzen
+
+Alle Properties, die in der zugrundeliegenden Klasse eine `.set()`-Methode haben, können via Prop als Array übergeben werden. Zum Beispiel hat die `TresPerspectiveCamera` eine Property `position`, die ein `Vector3`-Objekt ist. Du kannst ihren Wert so setzen:
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+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">
+  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
+</TresMesh>
+```
+
+::: warning
+Wenn du die Rotations-Property in [three.js](https://threejs.org/docs/index.html#api/en/math/Euler) setzt, wird standardmäßig die Reihenfolge 'XYZ' verwendet.
+Falls die Kurzform verwendet wird, ist die Reihenfolge, in der die Winkel gesetzt werden wichtig. Für mehr Informationen zu diesem Thema, siehe [Eulerwinkel](https://de.wikipedia.org/wiki/Eulersche_Winkel).
+:::
+
+```vue
+<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
+
+<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
+
+<!-- Beachte, dass die Reihenfolge der Rotationseigenschaften wichtig ist
+ und das Ändern der Reihenfolge zu unterschiedlichen Ergebnissen führen kann. -->
+```
+
+### Skalieren
+
+Ein weiteres Kürzel, das du verwenden kannst, ist das Übergeben eines Skalarwertes an eine Property, die ein `Vector3`-Objekt erwartet, indem du denselben Wert für den Rest des Vektors verwendest:
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Farben
+
+Du kannst Farben an die Komponenten übergeben, indem du die Property `color` verwendest, die einen String mit dem Namen der Farbe oder einen Hex-Wert akzeptiert:
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Methoden
+
+Einige Properties sind eigentlich Methoden. Zum Beispiel die `TresPerspectiveCamera` hat eine Methode `lookAt`, die von [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt) geerbt ist. Das bedeutet dass du der Komponente die Koordination auf folgende Weise übergeben kannst:
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/de/api/tres-canvas.md

@@ -0,0 +1,104 @@
+# TresCanvas
+
+Die `TresCanvas` Komponente ist die Hauptkomponente von Tres, welche den `WebGLRenderer` erstellt.
+
+```vue{2,5}
+<template>
+  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+    <TresPerspectiveCamera />
+      <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+## Größe des Canvas
+
+Die `TresCanvas`-Komponente verwendet die Größe des Elternelements als Leinwandgröße. Wenn du die Fenstergröße als Leinwandgröße verwenden möchtest, kannst du die Eigenschaft `window-size` auf `true` setzen.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+Oder du setzt die canvas-size per CSS:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#canvas {
+  height: 100%;
+  width: 100%;
+}
+```
+
+## Presets
+
+Tres bietet einige Voreinstellungen für die `TresCanvas`-Komponente. Du kannst sie nutzen, indem du die Eigenschaft `preset` verwendest.
+
+### Realistic
+
+Das Voreinstellung `realistic` erleichtert die Konfiguration des Renderers für realistischere 3D-Szenen.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Deine Szene -->
+  </TresCanvas>
+</template>
+```
+
+Ist equivalent zu:
+
+```ts
+renderer.shadows = true
+renderer.physicallyCorrectLights = true
+renderer.outputColorSpace = SRGBColorSpace
+renderer.toneMapping = ACESFilmicToneMapping
+renderer.toneMappingExposure = 3
+renderer.shadowMap.enabled = true
+renderer.shadowMap.type = PCFSoftShadowMap
+```
+
+## Props
+
+| Eigenschaft | Beschreibung | Standardwert |
+| ---- | ---- | --- |
+| **alpha** | Steuert den Standard-Alphawert. Wenn auf true gesetzt, ist der Wert 0. Andernfalls ist er 1. | `false` |
+| **antialias** | Gibt an, ob Antialiasing durchgeführt werden soll. | `true` |
+| **camera** | Eine manuelle Kamera, die vom Renderer verwendet wird. | |
+| **clearColor** | Die Farbe, die der Renderer verwendet, um die Leinwand zu löschen. | `#000000` |
+| **context** | Kann verwendet werden, um den Renderer an einen vorhandenen [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) anzuhängen. | |
+| **depth** | Gibt an, ob der Zeichenpuffer einen [Tiefenpuffer](https://en.wikipedia.org/wiki/Z-buffering) von mindestens 16 Bit hat. | `true` |
+| **disableRender** | Deaktiviert das Rendering in requestAnimationFrame, nützlich für PostProcessing. | `false` |
+| **failIfMajorPerformanceCaveat** | Gibt an, ob die Erstellung des Renderers fehlschlagen soll, wenn eine geringe Performance festgestellt wird. Siehe die [WebGL-Spezifikation](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) für weitere Details. | `false` |
+| **logarithmicDepthBuffer** | Gibt an, ob ein logarithmischer Tiefenpuffer verwendet werden soll. Dies kann notwendig sein, wenn in einer einzigen Szene enorme Skalendifferenzen gehandhabt werden müssen. Beachte, dass diese Einstellung gl_FragDepth verwendet, wenn verfügbar, was die Optimierung [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) deaktiviert und zu einer Performancesverminderung führen kann. | `false` |
+| **outputColorSpace** | Definiert die Ausgabekodierung. | `LinearEncoding` |
+| **powerPreference** | Gibt einen Hinweis an den Benutzeragenten, welche GPU-Konfiguration für diesen WebGL-Kontext geeignet ist. Kann "high-performance", "low-power" oder "default" sein. | `default` |
+| **precision** | Shader-Präzision. Kann "highp", "mediump" oder "lowp" sein. | "highp" wenn vom Gerät unterstützt |
+| **premultipliedAlpha** | Gibt an, ob der Renderer annimmt, dass die Farben [vormultipliziertes Alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha) haben. | `true` |
+| **preserveDrawingBuffer** | Gibt an, ob die Puffer erhalten bleiben sollen, bis sie manuell gelöscht oder überschrieben werden. | `false` |
+| **shadows** | Aktiviert Schatten im Renderer. | `false` |
+| **shadowMapType** | Legt den Typ der `shadowMap` fest. | `PCFSoftShadowMap` |
+| **stencil** | Gibt an, ob der Zeichenpuffer einen [Stencil-Puffer](https://en.wikipedia.org/wiki/Stencil_buffer) von mindestens 8 Bit hat. | `true` |
+| **toneMapping** | Definiert das Tone-Mapping-Verfahren, das vom Renderer verwendet wird. | `NoToneMapping` |
+| **toneMappingExposure** | Belichtungslevel des Tone-Mappings. | `1` |
+| **useLegacyLights** | Gibt an, ob der Legacy-Beleuchtungsmodus verwendet werden soll oder nicht. | `true` |
+| **windowSize** | Gibt an, ob die Fenstergröße als Leinwandgröße oder die des Elternelements verwendet werden soll. | `false` |
+
+### Standardwerte
+
+Tres versucht so unvoreingenommen wie möglich zu sein. Deshalb setzt es fast keine Standardwerte für die `TresCanvas`-Komponente. Es verwendet die Standardwerte von [three.js](https://threejs.org/). Die einzige Ausnahme ist die Eigenschaft `antialias`, die standardmäßig auf `true` gesetzt ist.
+
+## Öffentlich exportierte Properties
+
+| Property | Beschreibung |
+| ---- | ---- |
+| context | siehe [useTresContext](composables#usetrescontext) |

docs/de/cookbook/basic-animations.md

@@ -0,0 +1,97 @@
+---
+title: Einfache Animationen
+description: Wie man das useRenderLoop Composable verwendet, um Objekte zu animieren.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Einfache Animationen
+
+Diese Anleitung wird dir helfen, mit grundlegenden Animationen in TresJS zu beginnen.
+
+Wir werden eine einfache Szene mit einem Würfel erstellen. Anschließend animieren wir den Würfel, sodass er sich um die Y- und Z-Achse dreht.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
+
+## useRenderLoop
+
+Das Composable `useRenderLoop` ist das Herzstück von Animationen in TresJS. Es ermöglicht dir, eine Funktion zu registrieren, die jedes Mal ausgeführt wird, wenn der Renderer die Szene aktualisiert.
+
+Weitere Informationen zur Funktionsweise gibt es in der Dokumentation von [useRenderLoop](/de/api/composables#userenderloop).
+
+```ts
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  // wird bei jeder Bildaktualisierung ausgeführt (60FPS, abhängig vom Monitor
+})
+```
+
+## Eine Referenz zum Würfel bekommen
+
+Um den Würfel zu animieren, benötigen wir eine Referenz via eines [Template-Ref](https://vuejs.org/guide/essentials/template-refs.html). Dazu verwenden wir die `ref`-Eigenschaft an der `TresMesh`-Komponente damit wir Zugriff auf die THREE-Instanz bekommen.
+
+Um die Performance zu verbessern, verwenden wir ein [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity), zum Speichern der Referenz. Warum wir keine reguläre Referenz benutzen, kannst du [hier](../advanced/caveats.md#reactivity) nachlesen.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+</script>
+
+<template>
+  <TresCanvas>
+    <TresMesh
+      ref="boxRef"
+      :scale="1"
+    >
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Den Würfel animieren
+
+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) {
+    boxRef.value.rotation.y += delta
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+```
+
+Du kannst auch das `delta` der [internen Uhr von THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) oder `elapsed` nutzen, um den Würfel zu animieren.
+
+## Aber warum nicht die Reaktivität nutzen?
+
+Du fragst dich vielleicht, warum wir keine Reaktivität nutzen, um den Würfel zu animieren. Die Antwort ist einfach: Performance.
+
+```vue
+// Das ist keine gute Idee ❌
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRotation = reactive([0, 0, 0])
+
+onLoop(({ delta, elapsed }) => {
+  boxRotation[1] += delta
+  boxRotation[2] = elapsed * 0.2
+})
+</script>
+```
+
+Als Vue Entwickler mag es intiuitiv scheinen, Reaktivität zu nutzen, um den Würfel zu animieren, aber das wäre eine schlechte Idee.
+Der Grund ist, dass [die Reaktivität von Vue auf Proxies basiert](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) und nicht dafür ausgelegt ist, in einem Render-Loop verwendet zu werden, der 60 oder mehr Mal pro Sekunde ausgeführt wird.
+
+Die unten eingebettete Seite zeigt den [Performancestest eines Proxy im Vergleich zu einem regulären Objekt](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Wie du sehen kannst, ist der Proxy 5 Mal langsamer als das reguläre Objekt.
+
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+Mehr darüber kannst du im Abschnitt [Caveats](../advanced/caveats.md#reactivity) lesen.

docs/de/cookbook/groups.md

@@ -0,0 +1,40 @@
+---
+title: Gruppen
+description: Erfahre, wie man mehrere Objekte in der Szene gruppieren kann.
+author: alvarosabu
+thumbnail: /recipes/groups.png
+difficulty: 0
+---
+
+# Gruppen
+
+Eine `<TresGroup>` ist eine Instanz der Klasse [THREE.Group](https://threejs.org/docs/#api/en/objects/Group), die fast das Gleiche wie ein [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) ist. Sie ermöglicht es dir, **mehrere Objekte in der Szene zu gruppieren**, sodass sie gebündelt manipuliert werden können (Transformation, Rotation, etc...)."
+
+## Benutzung
+
+```vue{13,22}
+<script setup lang="ts">
+const groupRef = ref()
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (groupRef.value) {
+    groupRef.value.rotation.y += 0.01
+  }
+})
+</script>
+<template>
+  <TresCanvas>
+    <TresGroup ref="groupRef" :position="[2,0,0]">
+      <TresMesh>
+        <TresBoxGeometry />
+        <TresMeshBasicMaterial color="red" />
+      </TresMesh>
+      <TresMesh>
+        <TresSphereGeometry />
+        <TresMeshBasicMaterial color="blue" />
+      </TresMesh>
+    </TresGroup>
+  </TresCanvas>
+</template>
+```

docs/de/cookbook/index.md

@@ -0,0 +1,5 @@
+# Kochbuch (Cookbook) 🍳🧑‍🍳
+
+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 />

docs/de/cookbook/lights-shadows.md

@@ -0,0 +1,184 @@
+---
+title: Licht und Schatten
+description: Erfahre, wie man Lichter und Schatten zu einer Szene hinzufügen kann.
+author: alvarosabu
+thumbnail: /recipes/lights-and-shadows.png
+difficulty: 0
+---
+
+# Licht und Schatten
+
+Diese Anleitung wird dir helfen, mit einfachen Lichtern und Schatten in TresJS zu beginnen.
+
+Wir werden eine einfache Szene mit drei Meshes und einer Ebene erstellen, aber nur zwei der Meshes werden Schatten werfen.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
+
+## Einrichten der Szene (optional)
+
+Wir importieren alle Module, die wir benötigen. Zusätzlich können wir Orbit-Controls von Cientos verwenden um unsere Szene besser zu beobachten, [siehe hier wie das geht](/de/cookbook/orbit-controls).
+
+Das erste Objekt unserer Szene wird die Ebene sein, die Schatten empfängt. Zwei weitere Objekte werden Schatten werfen und das letzte wird überhaupt keinen Schatten werfen.
+
+Wir verwenden das [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial), weil wir so den "weichen Schattierungseffekt" sehr leicht sehen können.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
+
+    <TresMesh
+      :position="[-2, 2, 0]"
+      :rotation="[0, Math.PI, 0]"
+    >
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
+    </TresMesh>
+    <TresMesh
+      :position="[0, 0, 0]"
+    >
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+    <TresMesh
+      :position="[2, -2, 0]"
+    >
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresMesh
+      :position="[0, -3, 0]"
+      :rotation="[-Math.PI / 2, 0, 0]"
+    >
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshStandardMaterial color="#f7f7f7" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Lichter (Erklärung)
+
+Wie du weißt, sind alle Teile von [three.js](https://threejs.org/) in **TresJS** verfügbar. Das gilt auch für alle Arten von Lichtern. Wir müssen nur das Präfix `Tres` hinzufügen, um sie als Vue-Komponente zu nutzen.
+
+Aber nicht alle Lichter können Schatten erzeugen! Zum Beispiel ist der Zweck eines [ambientLight](https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight) alle Seiten deiner Szene zu beleuchten, dabei sollen keine Schatten erzeugt werden. Im Gegensatz dazu kann und sollte ein [DirectionalLight](https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper), das die Sonne imitiert, Schatten werfen.
+
+## Schatten (Erklärung)
+
+Es gibt verschiedene Arten von Schatten. Zum Beispiel wird der "weiche Schatten" automatisch erzeugt, wenn ein Objekt von einer Seite mehr Licht erhält. Ein "Standard Three.js Schatten" auf einer Oberfläche, muss von einem Mesh geworfen und von einem anderen Mesh empfangen werden. Wie wir in unserem Beispiel sehen, empfängt die `Ebene` einen Schatten, wirft aber keinen. Beachte, dass nicht alle Materialien Schatten werfen beziehungsweise empfangen können.
+
+Intern generiert Three.js automatisch ein neues Mesh mit einem [ShadowMaterial](https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial), das in jedem Frame aktualisiert wird. Somit werden Schatten automatisch mit animiert, wenn du Animationen verwendest. Das ist aber auch der Grund, warum du Schatten vorsichtig verwenden solltest, da sie die Performance beeinträchtigen können.
+
+::: warning
+Die übermäßige Verwendung von Schatten auf diese Weise kann die Performance beeinträchtigen. Es gibt jedoch Möglichkeiten, die Performance zu verbessern. Für weitere Informationen, siehe [dieses Video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+:::
+
+## Schatten aktivieren
+
+Folgende drei Schritte brauchen wir.
+
+### Schatten im Renderer aktivieren
+
+```vue{6}
+//...
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    shadows
+    window-size
+  />
+  //...
+</template>
+```
+
+## Das Licht zum Werfen von Schatten konfigurieren
+
+Wir können einfach das Boolean `cast-shadow` hinzufügen. Vue interpretiert es als ein `prop` mit dem Wert `true`.
+
+_Umgebungslicht erzeugt hier keine Art von Schatten_
+
+```vue{6}
+//...
+
+<template>
+  <TresAmbientLight :intensity="1" />
+  <TresDirectionalLight
+    cast-shadow
+    :position="[0, 2, 0]"
+    :intensity="1"
+  />
+
+  //...
+</template>
+```
+
+### Objekte zum Werfen oder Empfangen von Schatten einstellen
+
+Ähnlich wie im vorherigen Schritt konfigurieren wir das Mesh, von dem wir möchten, dass es Schatten wirft (unsere Kugel), mit der Eigenschaft `cast-shadow`. Zusätzlich konfigurieren wir das Objekt, das Schatten empfangen soll (unsere Ebene), mit der Eigenschaft `receive-shadow`.
+
+```vue{5,12}
+//...
+
+<template>
+  <TresMesh
+    cast-shadow
+    :position="[2, -2, 0]"
+  >
+    <TresSphereGeometry />
+    <TresMeshToonMaterial color="#FBB03B" />
+  </TresMesh>
+  <TresMesh
+    receive-shadow
+    :position="[0, -3, 0]"
+    :rotation="[-Math.PI / 2, 0, 0]"
+  >
+    <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+    <TresMeshStandardMaterial color="#f7f7f7" />
+  </TresMesh>
+  //...
+</template>
+```
+
+Jetzt haben wir alle notwendigen Schritte, um Schatten zu unserer Szene hinzuzufügen abgeschlossen. Wenn wir nun das, was wir in [grundlegenden Animationen](/de/cookbook/basic-animations) gelernt haben, anwenden und unseren Würfel bewegen, wirst du sehen, dass der Schatten auch animiert wird 🤩
+
+```vue
+<script setup>
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+
+const boxRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+  }
+})
+</script>
+
+<template>
+  //...
+  <TresMesh
+    ref="boxRef"
+    cast-shadow
+    :position="[0, 0, 0]"
+  >
+    <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+    <TresMeshToonMaterial color="#4F4F4F" />
+  </TresMesh>
+  //...
+</template>
+```
+
+_Beachte, dass wir absichtlich `cast-shadow` nicht auf den `Cone` angewendet haben, damit er keinen Schatten wirft_

docs/de/cookbook/load-models.md

@@ -0,0 +1,148 @@
+---
+title: Modelle laden
+description: Lade 3D-Modelle in deine Tres-Szenen.
+author: alvarosabu
+thumbnail: /recipes/gltf-model.png
+difficulty: 1
+---
+
+# Modelle laden
+
+> Alle Modelle, die in dieser Anleitung verwendet werden, stammen von [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
+
+3D-Modelle sind in Hunderten von Dateiformaten verfügbar, jedes mit unterschiedlichen Zwecken, variierenden Eigenschaften und Komplexität.
+
+In dieser Anleitung konzentrieren wir uns auf das Laden von gLTF-Modellen (GL Transmission Format), dem häufigsten Format für 3D-Modelle im Web.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVdtu2zgQ/RVC++AsVpacuu12tc7CidsGu+i2Re0+VX2gpbHMhCIJkrLjBvn3DqmLJfeCFPCDNXNmeOZ+H6w0mEulol0FQRLMTKaZssSArdQ/qWClktqSe+JgCyp21JAHstGyJKO5RdmNiTOpYfR3D/tOr5ldSGG15N+BMxBWmoHFFTUsW25pLvf/UxWS5Yfrq4XkUi8VzSAkb+VKCkCVYqLoPNqtBhilonP0sSj44aoS4tAgovgochG6R1ORSWEsKTi5IPepICTjQLV/LiGj317/+eJq+nIUOo3xlExCrK7ASyhXW5qQDeWmFtQQpLY6KEhOI3EIWVlVYT7acJLT8BzIHuNLhuF69Z4J9LhkX9C64fKQillclwsLNbNQKk4t4H9CZr1y7cZrNL5Ig4Kngdc2+vegjYLMsh0saAma1rpEScMskwJNPj0JCf7++pwGjZJLeTum1ukmXjdpdHHrelj9Trys8DFhan5e0qtWh4pPYJ7oS6YdTSkof8OKrW09ZC6FyKQpWcvxJIRpSNyvCwHVTFh8g9kD6s9becfBT0S5dm3qnxvin6RBA53Fxyy7CsRdCYIwqDtyXFIV3RgpcLR8q6WNwqRBUjefk/UnySnSYGutMkkcZ7lA+xw42+lIgI2FKuM+fD6NnkWTOGfGxk6M6DTwLTNwXM/cr/iuLdD98777Rjx8xe6B3ioqHsO9w86fRpPovPHcCqOSOZu+bzfjj/HrcHP0+OwF8v0DTNlPA45+ZeDR+e3B5+cTn2AcIbiLymF2GxyuAA35LziuDX7mGoHjHEr2CKct1AX/NHoec7buu3QecVU8YE9ag5tvw4qTjsxkqRgH/U65kRl2JuVc7v/zsm4FepstZLffkd+Yu5rye2wW0DtM97GUVBdga/Wr5Vu4w/+dspR5xZvi/ED5AYzkleNYw3B15Ei7h/Ns//UDhotzZV7d+bltghoQtbitvfRTuxW6XqsFn33iPN6XY/GTLB0jm0bTXsKHx+f0vBJORYEbxS2D/qnVsOlOnLtZPRU2zyV+UU8hdJ/Xb1avf3hij8funpgMBB4PTCXwkNDOCxpfELqnzLbuzlwEo7bnNN1HBbPbao1qjd4wpTbCnvHbDx+jBqMxcUmZiL13ExfcbuIKYx8Legv5eO1S8I1gXJOAPHJ4d3B/7xOmfuXX/AZxnx3Jh3U8Pbus0hoJXnpjtMRknjWeomssr2uMGt4HRjvKK4hwex/OvLZ3Wb+5rUqzEq/LDkgi1zd4mbCGnkZzGfqH4OErWPcr8A==" />
+
+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.
+:::
+
+## Verwendung von `useLoader`
+
+Das Composable `useLoader` ermöglicht es dir, jeden Typ von three.js-Loader und eine URL zum Laden der Ressource zu übergeben. Es gibt ein `Promise` mit der geladenen Ressource zurück.
+
+Eine detaillierte Erklärung, wie `useLoader` verwendet wird, findest du in der Dokumentation von [useLoader](/de/api/composables#useloader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
+```
+
+Dann kannst du die Szene des Modells in einer [`primitive`](/de/advanced/primitive)-Komponente von TresJS übergeben, um sie zu rendern:
+
+```html{2}
+<TresCanvas>
+    <primitive :object="scene" />
+</TresCanvas>
+```
+
+> Die Komponente `<primitive />` ist keine eigenständige Komponente im Quellcode von Tres. Stattdessen ist sie Teil der Kernfunktionalität von Tres. Wenn du `<primitive>` verwendest, wird dies zu einem Aufruf von `createElement`, der das entsprechende three.js-Objekt basierend auf der bereitgestellten "object"-Eigenschaft erstellt.
+
+Beachte im obigen Beispiel, dass wir die `Suspense`-Komponente verwenden, um die `TresCanvas`-Komponente zu umgeben. Dies liegt daran, dass `useLoader` eine `Promise` zurückgibt und wir warten müssen, bis sie erfüllt ist, bevor wir die Szene rendern können.
+
+## Verwendung von `useGLTF`
+
+Eine bequemere Möglichkeit, Modelle zu laden, ist die Verwendung des Composables `useGLTF`, das im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')
+```
+
+Ein Vorteil der Verwendung von `useGLTF` ist, dass du eine `draco`-Eigenschaft übergeben kannst, um die [Draco-Kompression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) für das Modell zu aktivieren. Dies wird die Größe des Modells reduzieren und die Performance verbessern.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+Alternativ kannst du Objekte innerhalb des Modells leicht mit der Eigenschaft `nodes` auswählen.
+
+```vue
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <primitive :object="nodes.MyModel" /> // "MyModel" dient hier nur als Platzhalter
+  </TresCanvas>
+</template>
+```
+
+## Verwendung von `GLTFModel`
+
+Die Komponente `GLTFModel` ist eine Hülle um `useGLTF`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist.
+
+```vue{2,9}
+<script setup lang="ts">
+import { OrbitControls, GLTFModel } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <GLTFModel path="/models/AkuAku.gltf" draco />
+    </Suspense>
+    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
+</template>
+```
+
+Dieser Ansatz ist zwar einfacher, bietet aber weniger Kontrolle über das Modell.
+
+## Verwendung von `useFBX`
+
+Das Composable `useFBX` ist im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar.
+
+```ts
+import { useFBX } from '@tresjs/cientos'
+
+const model = await useFBX('/models/AkuAku.fbx')
+```
+
+Dann muss man nur das dem primitive das model zuweisen:
+
+```html{2}
+<TresCanvas shadows alpha>
+    <primitive :object="model" />
+</TresCanvas>
+```
+
+## Verwendung von `FBXModel`
+
+Die Komponente `FBXModel` ist eine Hülle um `useFBX`, die im Paket [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) verfügbar ist. Ihre Verwendung ist ähnlich wie bei `GLTFModel`:
+
+```vue{2,9}
+<script setup lang="ts">
+import { OrbitControls, FBXModel } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows alpha>
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+      <Suspense>
+        <FBXModel path="/models/AkuAku.fbx" />
+      </Suspense>
+      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
+</template>
+```

docs/de/cookbook/load-textures.md

@@ -0,0 +1,85 @@
+---
+title: Texturen laden
+description: Füge Texture-Maps zu deinen TresJS-Objekten hinzu.
+author: alvarosabu
+thumbnail: /recipes/load-textures.png
+difficulty: 1
+---
+
+# Texturen laden
+
+> Alle Texturen in diesem Beispiel stammen von [ambientcg](https://ambientcg.com/).
+
+Dreidimensionale (3D) Texturen sind Bilder, die mehrere Datenebenen enthalten, was es ihnen ermöglicht, Volumen zu repräsentieren oder dreidimensionale Strukturen zu simulieren. Diese Texturen werden häufig in 3D-Grafiken und visuellen Effekten verwendet, um den Realismus und die Komplexität von Szenen und Objekten zu erhöhen.
+
+<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==" />
+
+Es gibt zwei Möglichkeiten, 3D-Texturen in TresJS zu laden:
+
+## Verwendung von `useLoader`
+
+Das Composable `useLoader` ermöglicht es dir, einen three.js-Loader und eine URL zum Laden der Resource zu übergeben. Es gibt ein `Promise` mit der geladenen Resource zurück.
+
+Für eine detaillierte Erklärung, wie `useLoader` verwendet wird, siehe die Dokumentation von [useLoader](/de/api/composables#useloader).
+
+```ts
+import { useLoader } from '@tresjs/core'
+import { TextureLoader } from 'three'
+
+const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
+```
+
+Dann kannst du die Textur einem Material zuweisen:
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+  </TresCanvas>
+</Suspense>
+```
+
+Beachte im obigen Beispiel, dass `TresCanvas` von einer `Suspense`-Komponente umgeben ist. Dies liegt daran, dass `useLoader` ein `Promise` zurückgibt und wir warten müssen, bis es erfüllt ist, bevor wir die Szene rendern können.
+
+## Verwendung von `useTexture`
+
+Eine bequemere Möglichkeit, Texturen zu laden, ist die Verwendung des Composables `useTexture`. Es akzeptiert sowohl ein Array von URLs als auch ein einzelnes Objekt mit den Pfaden der gemappten Texturen.
+
+Für mehr Informationen über `useTexture`, siehe die Dokumentation von [useTexture](/de/api/composables#usetexture).
+
+```ts
+import { useTexture } from '@tresjs/core'
+
+const pbrTexture = await useTexture({
+  map: '/textures/black-rock/Rock035_2K_Displacement.jpg',
+  displacementMap: '/textures/black-rock/Rock035_2K_Displacement.jpg',
+  roughnessMap: '/textures/black-rock/Rock035_2K_Roughness.jpg',
+  normalMap: '/textures/black-rock/Rock035_2K_NormalDX.jpg',
+  aoMap: '/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
+  metalnessMap: '/textures/black-rock/myMetalnessTexture.jpg',
+  matcap: '/textures/black-rock/myMatcapTexture.jpg',
+  alphaMap: '/textures/black-rock/myAlphaMapTexture.jpg'
+})
+```
+
+Wie im vorherigen Beispiel können wir alle Texturen über Props an ein Material übergeben:
+
+```html
+<Suspense>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial
+        :map="pbrTexture.map"
+        :displacementMap="pbrTexture.displacementMap"
+        :roughnessMap="pbrTexture.roughnessMap"
+        :normalMap="pbrTexture.normalMap"
+        :aoMap="pbrTexture.ambientOcclusionMap"
+      />
+    </TresMesh>
+  </TresCanvas>
+</Suspense>
+```

docs/de/cookbook/orbit-controls.md

@@ -0,0 +1,128 @@
+---
+title: OrbitControls
+description: Wie man OrbitControls verwendet, um mit der Szene zu interagieren.
+author: alvarosabu
+thumbnail: /recipes/orbit-controls.png
+difficulty: 1
+---
+
+# OrbitControls
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />
+
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) ist ein Kamerasteuerungselement, das es dir ermöglicht, die Kamera frei um einen zentralen Punkt herum zu bewegen. Es ist eine großartige Möglichkeit, deine Szene zu erkunden.
+Allerdings sind [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) kein Teil des Cores von Three.js. Daher müsstest du es aus dem Modul `three/addons/controls/OrbitControls` importieren.
+
+**TresJS** erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig `TextGeometry` nicht Teil dieses Katalogs.
+
+Glücklicherweise bietet **TresJS** eine Möglichkeit, den Komponentenkatalog mit der `extend`-Methode zu erweitern.
+
+Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt [Erweitern](/de/advanced/extending.md).
+
+## Verwendung von OrbitControls
+
+Um `OrbitControls` zu verwenden, musst du sie aus dem Modul `three/addons/controls/OrbitControls` importieren.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+Danach musst du den Komponentenkatalog mit der `extend`-Methode erweitern.
+
+```js
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+```
+
+Jetzt kannst du die Komponente `TresOrbitControls` in deiner Szene verwenden.
+
+::: code-group
+
+```vue [OrbitControls.vue]
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigen, musst du diese als Argumente übergeben. Du kannst das Composable [useTresContext](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.
+
+::: warning
+`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` die Kontext-Daten bereitstellt. Deshalb haben wir eine Unterkomponente namens `OrbitControls.vue` implementiert. Erfahre mehr über [context](/de/api/composables#usetrescontext).
+:::
+
+```ts
+import { useTres } from '@tresjs/core'
+
+const { state } = useTres()
+```
+
+Dann würde der finale Code etwa so aussehen:
+
+::: code-group
+
+```vue [OrbitControls.vue]
+<script setup lang="ts">
+import { extend, useTresContext } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+
+extend({ OrbitControls })
+
+const { camera, renderer } = useTresContext()
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="renderer"
+    :args="[camera, renderer?.domElement]"
+  />
+</template>
+```
+
+```vue [App.vue] {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
+:::
+
+## OrbitControls von `cientos`
+
+Jetzt wird es interessant. ✨
+Das Paket `cientos` bietet eine Komponente namens `<OrbitControls />`, die ein Wrapper für die `OrbitControls` aus dem Modul [`three-stdlib`](https://github.com/pmndrs/three-stdlib) ist.
+
+Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben.
+Es funktioniert einfach. 💯
+
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/de/cookbook/shaders.md

@@ -0,0 +1,187 @@
+---
+title: Shaders
+description: Shaders bieten eine Welt voller Möglichkeiten.
+author: alvarosabu
+thumbnail: /recipes/shaders.png
+difficulty: 2
+---
+
+# Shaders
+
+Diese Anleitung wird dir helfen, deine ersten Schritte mit Shadern in TresJS zu machen.
+
+Wir werden eine einfache Szene mit einem Blob erstellen. Anschließend animieren wir ihn, um ihn sanft zu verzerren.
+
+::: warning
+_Es sind Grundkenntnisse über Shader erforderlich_
+:::
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVltv2zYU/iuE91BntSU7cYrBS4q0QTt0WNcgyfZSFxsjH9tMJVIjKdle4P++j9TFVJMU3oMDndvH71x4mIferSbzJs+jsqDetHdmEi1yywzZImcpl8vzWc+aWe/1TIosV9qyB2ZWPE3V+poWbMcWWmXsBaJf/By4ONRLLktuBqwwdE1yTvo3pfI24sLC5d7EidLd0E/6TthLJa1WqXnsLkhaZToRf1JilT5ufe1KE72YyZlMlDSW3aXqzpE9D5j3ZZGmR0BpnAopFkpnBl4PM8lYcSsymgK95GmBjxHbDbz+TZanwhbz0Chp3bDoj6LxgOHPURPwXtM/Bclk+0zA8WjATivv3Z5PSdrS5mbFUThw+nsma4awJMcBDeTQtbTnBZZFqjhydDn5nEuut0Iuq4jyj7JSKjFnGReyf1TVgDn7hGVqTumVMsIKJcHFyx+51WLDfvQu/by2Dtg4GrmyuuBOXLRlL9EAgHfVDmJPGeKwonnk9G2S0eZJzI3DTJT5BnPbxdw+g+kKFKRZCloHWTqxTbKDX1NZpn8F7rlW92gohH1lAsA6BqWGb+HqjV6jqU27F5ovM4x22PBcUyKMg89oLoosr9qI2EPbB4rvAXypUuUwfavQoIGLibZuTE/bjlV8KjYPTMn6toJteH/71Z2pzP3+A0NdLB8wSnluaM52R+z8dX28WLB+ffciP/ctr442yrglLXgaNXcw8t2qrCBQY7tQkNw5BmdxtaiwliBYQk8BAomxs/3uYUlKXA8Tlz722A/j8XjWc0tgrtaG8TRfcbYWEtLQiH+rcAB0N1DcqB3uFWmTuzaXdMkz0pxNm9HHAZ/HuPrV7wsOmi5UCe3k1H1zHwfRUZhK8MI31oT388J4NBpB6pz3kcyKaVrAXNfM+YdHopkTNBLn1XF15E2+Ik2/kMrI6i3O10vj/I8H7MT/HMPmrCbGDx/m17eDTcMdhNhQ9LQ7MwuHrsK5NB2FsfkMU4ybHH0fu1lPtbK8yXIIUqvo6gOLGcgj58cJX+G1eiLfMZz3vyeSdoe95UYkbd7tvEwmk+fYNmI1aFCcxcEU9ga96nUaZjyP7o2SeFv97M9qA8qA56ACnvXCx9AZZr2VtbmZxnEyl4jHJROljiTZWOZZHLpfnESn0SieC2Njp4b3rOcfng5w9Wz+H+wqAvCvQvha3T3Frol/zVH+A/Bb34tJhPGvkRtllAkXE2K7x/wQXOd3AcTTn8D3JZksLAP+P8EaO7i+gfvFGEsSiFgTtImybnVrP2wUjf10OHAV8D1oOA7nlIkDQBtXl/wkehWn4i6EbNYmZtIarPeFWH4zkYnKcpGS/pS769adTP//0q9eZ3VBLb9kRcnXJ/T3ZlNRvsKwkC5R7n0rcSfJVuZ3N7/TBt+tES9skdbNecZ4TUalheNYub0t5By0Az/P9oO/YHgeb827jSXpXtDHRO02J6/93GyDdtYqxRdfOO/v23H5nSrtMzuJTtqC7/4DVvHLxg==" />
+
+## Einrichten der Szene (optional)
+
+Wir importieren alle Module, die wir benötigen. Zusätzlich können wir die Orbit-Controls von Cientos verwenden.  [Siehe hier, wie das geht](/de/cookbook/orbit-controls).
+
+Nun positionieren wir unsere Kamera an der Position `[11,11,11]`.
+
+Um uns bei der Positionierung zu helfen, fügen wir zum Schluß eine einfache Ebene  mit den Maßen `[10, 10]` hinzu, die um die X-Achse gedreht ist.
+
+```vue{12,14-17}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10]" />
+      <TresMeshBasicMaterial color="#444" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## ShaderMaterial
+
+Wie du weißt, ist jede Instanz aus [ThreeJs](https://threejs.org/) in **TresJs** verfügbar, also können wir auch `ShaderMaterial` verwenden. Wir müssen lediglich das Präfix `Tres` hinzufügen, um es zu nutzen.
+
+Für unseren Blob können wir eine einfache `SphereGeometry` verwenden. Durch das Hinzufügen von `widthSegments` und `heightSegments` erzielen wir einen sanften Effekt. Wir platzieren unseren Blob 4 Einheiten entlang der positiven Y-Achse.
+
+```html
+<TresMesh :position="[0, 4, 0]">
+  <TresSphereGeometry :args="[2, 32, 32]" />
+  <TresShaderMaterial />
+</TresMesh>
+```
+
+Das `ShaderMaterial` akzeptiert spezielle Props wie `uniforms`, `vertexShader` und `fragmentShader`. Wir können diese Objekte in unserem Skriptbereich erstellen und später der Komponente übergeben.
+
+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;
+
+void main() {
+    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
+}
+`
+// ..
+```
+
+Und schließlich unser `vertexShader`:
+
+```ts
+const vertexShader = `
+uniform vec2 uAmplitude;
+uniform vec2 uFrequency;
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
+    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
+
+    vec4 viewPosition = viewMatrix * modelPosition;
+    gl_Position = projectionMatrix * viewPosition;
+    vUv = uv;
+}
+`
+// ..
+```
+
+## Animieren des Blobs
+
+Ähnlich wie wir im Beispiel [Grundlegende Animationen](/de/cookbook/basic-animations) gelernt haben, beginnen wir, indem wir unseren Blob mit einer [Template-Ref](https://vuejs.org/guide/essentials/template-refs.html) referenzieren.
+<!-- TODO: Ich bin verwirrt - text und code stimmen nicht überein -->
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+const blobRef = shallowRef(null)
+// ...
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#111"
+    window-size
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <TresMesh
+      ref="blobRef"
+      :position="[0, 4, 0]"
+    >
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresShaderMaterial
+        :vertex-shader="vertexShader"
+        :fragment-shader="fragmentShader"
+        :uniforms="uniforms"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Nun können wir den `onLoop`-Callback nutzen, um `uTime` zu animieren.
+
+ ```ts
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+
+ // ...
+ const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+   if (blobRef.value) {
+     blobRef.value.material.uniforms.uTime.value = elapsed
+   }
+})
+ // ...
+```
+
+Somit haben unseren ersten grundlegenden Shader zum Laufen gebracht!
+
+## Verwendung des GLSL vite-plugins (optional)
+
+_Dieser Schritt ist vollständig optional und liegt außerhalb des Scopes des **TresJs**-Teams_
+
+Wenn du nicht immer deine Shader inline definieren möchtest, kannst du [vite-plugin-glsl](https://www.npmjs.com/package/vite-plugin-glsl) nutzen, um `GLSL`-Code in separate Dateien auszulagern.
+
+Dann könnte man den Code zum Beispiel so organisieren:
+
+```
+├── src/
+│   ├── myTresJsComponent.vue
+│   ├── shaders/
+│       ├── vertexShader.glsl
+│       ├── fragmentShader.glsl
+```

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

@@ -0,0 +1,207 @@
+---
+title: Text 3D
+description: Füge mühelos 3D-Text hinzu
+author: alvarosabu
+thumbnail: /recipes/text-3d.png
+difficulty: 1
+---
+
+# Text laden
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) ist eine der Möglichkeiten, wie wir 3D-Text zu unserer Szene hinzufügen können.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqdVlFv2zYQ/iuEgsEbZkuOnXSd5gxe7G5YsbRF7LcqD7RES0wokiApO0Hg/74jKduUkWbp8hCYdx+/O3684+k5Wiqi/5Ay3jQkSqOJzhWVBmliGokY5uVVFhmdRb9nnNZSKIOe0TXWNF9UuBDbGyz7aHH71/VMMKEWEuekjz6JpeAEXJLyEu3QWoka9UylCOn9FvDY0DPMN1gfQFMDtnud5EJ1sZ/VipqZ4EYJ9gKcEm6EDnYsyaNpQXFiF/aAvYxnPBdcG1QydIWeM45QzghWLv0U9c7ej+bXs8te33q0O6JOkVENcRbMZIVTtMZMe4OHwFGXT5Kkp8pYhGiMbCDzvTzpqVwWZI56pV35wL2DU00SfzFwDbAwpJYMGwIrhCaBjJvBivICrqxk7soQ/Dn/F6K0JLmhGzLDNVEYpVJoaqjggP466o/6v95lEUr2m7p6H8yLBmi49pE9uxX64E9OAC74nCobWnDM/qFlZbqxh3006qMLGz2l3MBmap7AcR6PwJRjbQZe5TbKJDkeGAyTJFADlto8MfuzMjUD8VaiePL3XGNVUp6iIciJkMRF4dT2y4rYxFJ0Phz+4AxbWpjqsN5l/AzuwxP9BxahFc4fSiUaXgxyX1dnw6GNAzRwkS7BqB/5Sh3UWMb3WnDoPkeftQ5outQHtLawMawjiypjpE6TJC847C8IoxsVc2ISLuskhE/H8WU8TAqqTWLNgM4iV3YdYt9C38PtdwD9u5C+NXejmC3BDxLzt+R+wE4v4mF83jLvjXFN7Z6Q2z4sb+G1uCkwXr6HfH8mug5lgOeh0eTN+gbw6fnQCQydRx7juqtui4MKVqT4DmK/4TVqAA4KUtM3kO6h9vAX8buE0VVIaRmhNHdQk0bD87im5UlF5qKWlBH1Wdqu7VYmZkxsPzrb4Z10eyqSP7xgv9ePPuUvUCxEbUDu41VCjxLj3R8Wn+BpCZy1KBrWXs43nLdEC9bYHD3sGnoQ0g5wLtu/XYNB+y/1h0f34rSH6iRq4El31q/7x+5Qa95w54RzeHcds1dUOp5sHI8Dwfej6XT2hvMW6sHCGkVenpPhSAXceP7N+biffjU2OcyslvQK4S2mJojzoztyb19UCm/jkpqqWQFEAQVoZmIoCvcUAz/WkLROakw5PMeOwq5sEJ38Ekte2ol699Prk6ydJuP5Xm/UnRSD8z6CaTGEUXFEKLK2nyiw75asQ8ca0gTP/zqD3auTP6nCM1FAVZUNw8r1RBjhMASR+5T5uDiu3dy7Ibq6cSLAf6IoZij1okBenSsIJ6/7WhnPu6Mt2v0LMkc7LA=="/>
+
+Allerdings ist es kein Teil des Kerns von Three.js. Daher müsstest du es aus dem Modul `three/addons/geometries/TextGeometry` importieren.
+
+**TresJS** erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig `TextGeometry` nicht Teil dieses Katalogs.
+
+Glücklicherweise bietet **TresJS** eine Möglichkeit, den Komponentenkatalog mit der `extend`-Methode zu erweitern.
+
+Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt [Erweitern](/de/advanced/extending.md).
+
+## Verwendung von TextGeometry
+
+Um `TextGeometry` zu verwenden, musst du es aus dem Modul `three/addons/geometries/TextGeometry` importieren.
+
+```js
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+```
+
+Danach musst du den Komponentenkatalog mit der `extend`-Methode erweitern.
+
+```js
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+extend({ TextGeometry })
+```
+
+[TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) benötigt nur die Schriftart als Argument. Unten siehst du ein Beispiel.
+
+```js
+const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    loader.load(fontPath, (font) => {
+      resolve(font)
+    })
+  }
+  catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+```
+
+Jetzt kannst du die Komponente `TresTextGeometry` innerhalb eines TresMesh in deiner Szene verwenden.
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Dann kannst du, wie im Beispiel, ein Objekt mit den gewünschten Einstellungen übergeben.
+
+```ts
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+```
+
+Wir können auch eine matcapTexture übergeben, um feine Details hinzuzufügen, indem wir TresMeshNormalMaterial innerhalb von TresMesh verwenden.
+
+```ts
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+```
+
+```html
+<TresMesh>
+  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+  <TresMeshNormalMaterial :matcap="matcapTexture" />
+</TresMesh>
+```
+
+Also würde der finale Code so aussehen:
+
+```vue
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { FontLoader } from 'three/addons/loaders/FontLoader'
+import { useTexture } from '/@/composables'
+
+extend({ TextGeometry })
+
+const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+
+const loader = new FontLoader()
+
+const font = await new Promise((resolve, reject) => {
+  try {
+    loader.load(fontPath, (font) => {
+      resolve(font)
+    })
+  }
+  catch (error) {
+    reject(console.error('cientos', error))
+  }
+})
+
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshNormalMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Das scheint viel Arbeit zu sein, aber es gibt eine einfachere Alternative.
+
+## TextGeometry von `cientos`
+
+Das Paket `cientos` bietet eine Komponente namens `<Text3D />`, die ein Wrapper für `TextGeometry` aus dem Modul [`three-stdlib`](https://github.com/pmndrs/three-stdlib) ist.
+
+Das Beste daran? Du musst den Katalog nicht erweitern, gib einfach das Schriftargument an.
+
+Es funktioniert einfach. 💯 (wenn kein Text angegeben wird, wird der Text TresJS sein)
+
+```vue
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <Text3D :font="fontPath" />
+  </TresCanvas>
+</template>
+```
+
+Wir können die Optionen als Props übergeben
+
+```html
+<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
+```
+
+falls die Optionen nicht bereitgestellt werden, sind die Standardwerte:
+
+```js
+const fontOptions = {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+}
+```
+
+Der Text in Three.js beginnt standardmäßig an der Ausgangsposition des Meshs, also bei [0,0,0]. Um den Text zu zentrieren, können wir einfach das Flag "center" übergeben.
+
+```vue
+<Text3D :font="fontPath" :text="my 3d text" center />
+```

docs/de/debug/devtools.md

@@ -0,0 +1,24 @@
+# Entwicklungstools
+
+Das Debugging ist eines der größten Herausforderungen, bei dem Entwickeln von 3D-Erlebnissen im Browser. Das `<canvas>`-Element des Browsers ist eine Blackbox, und es ist schwierig nachzuvollziehen, was darin passiert. Die imperative Natur von [Three.js](https://threejs.org/) macht es schwierig zu debuggen. Um zu sehen, was passiert, muss man sich auf `console.log` oder auf Drittanbieter-Tools verlassen. Auch das Messen der Performance von Szenen gestaltet sich als äußerst schwer.
+
+![Entwickler Debugging 3D](/debug-3D.png)
+
+Eines unserer Ziele mit TresJS ist es, **die beste Entwicklererfahrung (DX)** beim Arbeiten mit 3D-Szenen im Browser zu bieten. Dank der deklarativen Natur des Ökosystems und der Vielfalt an Lösungen, die das Vue-Ökosystem bietet, wie Vue Devtools, Nuxt und Vite, können wir bessere Tools für Entwickler anbieten, um ihre Szenen zu debuggen.
+
+## Vorstellung der Entwicklerwerkzeuge
+
+Ab Version <Badge text="^3.7.0" />, führen wir die TresJS-Entwicklerwerkzeuge ein! Einen benutzerdefinierten Inspektor-Tab für die [offiziellen Chrome Developer Tools von Vue](https://devtools.vuejs.org/guide/installation.html), der es dir ermöglicht, deine TresJS-Szenen und -Komponenten zu inspizieren.
+
+![TresJS DevTools](/vue-chrome-devtools.png)
+
+### Funktionen
+
+- **Szeneninspektor**: Inspiziere die aktuelle Szene und ihre Komponenten mit einer Baumansicht ähnlich dem Komponenteninspektor von Vue Devtools.
+- **Speicherzuweisung**: Zeigt an, wie viel Speicher jede Komponente verwendet.
+- **Objektinspektor**: Inspiziere die Eigenschaften des in der Szene ausgewählten Objekts, einschließlich seiner Kinder.
+- **Konfigurierbare Eigenschaften**: Und ja, du kannst die Eigenschaften des ausgewählten Objekts bearbeiten und die Änderungen in Echtzeit sehen.
+
+![](/devtools-scene-inspector.png)
+
+Probiere die neuen Entwicklerwerkzeuge aus und gib uns Feedback! 🎉

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

@@ -0,0 +1,63 @@
+# v-always-look-at 👀
+
+Mit der neuen Direktive `v-always-look-at`, die von **TresJS** bereitgestellt wird, kannst du ein [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) anweisen, immer eine spezifische Position anzuschauen. Diese kann als Vector3 oder Array übergeben werden.
+
+## Benutzung
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <Box
+        v-always-look-at="new Vector3(0, 0, 0)"
+      />
+  </TresCanvas>
+</template>
+```
+
+Egal, wohin sich die Box bewegt, sie wird immer auf die Position [0,0,0] ausgerichtet sein.
+
+### Warum nicht die eingebaute Methode look-at verwenden?
+
+Eine berechtigte Frage wäre, warum man nicht die `:look-at`-Methode direkt in der Komponente verwenden sollte.
+Die Antwort ist, dass mit der Methode `:look-at` angegeben wird, dass die Position nur einmal beim Mounten der Instanz angeschaut wird. Wenn sich das Objekt ändert, wird dies nicht aktualisiert.
+
+### Du kannst auch andere Instanzen anschauen!
+
+Ein weiterer Vorteil ist, dass du mit der Kamera auch nicht-stationäre Objekte beobachten kannst:
+
+Zum Beispiel:
+
+```vue{4,6,20,23}
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+// Die Position der Kugel wird verändert, aber die Kamera folgt ihr.
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
+  }
+})
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]"
+        v-always-look-at="sphereRef"
+      />
+      <Sphere
+        ref="sphereRef"
+        :scale="0.5"
+      />
+  </TresCanvas>
+</template>
+```

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

@@ -0,0 +1,36 @@
+# v-distance-to
+
+Hast du schon einmal versucht, die Distanz zwischen zwei Object3Ds zu berechnen?
+
+Mit der neuen Direktive `v-distance-to` ist es einfacher als je zuvor. Du musst nur das Zielobjekt für die Messung angeben und das Ergebnis wird in deiner Konsole erscheinen.
+
+Zusätzlich wird ein Pfeil zwischen den beiden Objekten erstellt.
+
+```vue{2,8,13}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphere1Ref"
+      :position="[-2, slider, 0]"
+      :scale="0.5"
+    />
+    <Sphere
+      v-distance-to="sphere1Ref"
+      :position="[2, 0, 0]"
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+Die Verwendung von `v-distance-to` ist reaktiv, sodass sie perfekt mit `@tres/leches` 🍰 funktioniert.
+
+::: warning
+`v-distance-to` wird kein bewegtes Objekt innerhalb des RenderLoops messen.
+:::

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

@@ -0,0 +1,34 @@
+# v-light-helper 🔆
+
+Mit der neuen Direktive `v-light-helper`, die von **TresJS** bereitgestellt wird, kannst du schnell den entsprechenden Helfer zu deinen Lichtern hinzufügen.
+
+Die folgenden Lichter werden unterstützt:
+- DirectionalLight
+- PointLight
+- SpotLight
+- HemisphereLight
+
+## Usage
+
+```vue{2,8,11,14,17}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresDirectionalLight
+      v-light-helper
+    />
+    <TresPointLight
+      v-light-helper
+    />
+    <TresSpotLight
+      v-light-helper
+    />
+    <TresHemisphereLight
+      v-light-helper
+    />
+  </TresCanvas>
+</template>
+```

docs/de/directives/v-log.md

@@ -0,0 +1,53 @@
+# v-log
+
+### Problem
+
+Wenn du deine Instanz loggen möchtest, musst du normalerweise die Template-Referenz verwenden und diese dann loggen:
+
+```vue
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+
+const sphereRef = shallowRef()
+
+watch(sphereRef, (value) => {
+  console.log(value) // Echt jetzt?!!! 😫
+})
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+Das ist VIEL Code nur für ein einfaches Log, oder?
+
+## Benutzung
+
+Mit der neuen Direktive v-log, die von **TresJS** bereitgestellt wird, kannst du das gleiche tun, indem du einfach `v-log` zur Instanz hinzufügst.
+
+```vue{2,10,12}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- wird nur das Material loggen 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+
+Du kannst auch einen Modifikator mit dem Namen einer Eigenschaft übergeben. Zum Beispiel `v-log:material`, damit direkt die `material` Eigenschaft gelogged wird 😍.

docs/de/guide/getting-started.md

@@ -0,0 +1,93 @@
+# Installation
+
+Erfahre, wie du TresJS installieren kannst.
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/core
+```
+
+```bash [npm]
+npm install three @tresjs/core
+```
+
+```bash [yarn]
+yarn add three @tresjs/core
+```
+
+:::
+
+> Besser mit Vue 3.x und Composition API
+
+## Typescript
+
+TresJS ist in Typescript geschrieben und vollständig typisiert. Installiere die Typdeklarationen für Three um alle Vorteile von Typescript zu genießen.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Loslegen
+
+Du kannst TresJS wie jedes andere Vue-Plugin installieren.
+
+```ts
+import { createApp } from 'vue'
+import Tres from '@tresjs/core'
+import App from './App.vue'
+
+export const app = createApp(App)
+
+app.use(Tres)
+app.mount('#app')
+```
+
+Oder du kannst es direkt in deiner Komponente verwenden.
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Deine Szene lebt hier -->
+  </TresCanvas>
+</template>
+```
+
+::: tip
+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.
+
+Du musst lediglich Folgendes zu deiner `vite.config.ts`-Datei innerhalb des Vue-Plugins hinzufügen:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ]
+})
+```

docs/de/guide/index.md

@@ -0,0 +1,111 @@
+# Einführung
+
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <FirstScene />
+    </div>
+</ClientOnly>
+
+::: code-group
+
+```bash [npm]
+npm install @tresjs/core three
+```
+
+```bash [yarn]
+yarn add @tresjs/core three
+```
+
+```bash [pnpm]
+pnpm add @tresjs/core three
+```
+
+:::
+
+## Typescript
+
+TresJS ist in Typescript geschrieben und vollständig typisiert. Installiere die Typdeklarationen für Three um alle Vorteile von Typescript zu genießen.
+
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::
+
+## Vite
+
+Wenn du Vite verwendest, solltest du Folgendes zu deiner `vite.config.ts` hinzufügen:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+})
+```
+
+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
+
+Du kannst TresJS online mit der offiziellen [Playground](https://play.tresjs.org/) ausprobieren:
+
+<iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
+
+### StackBlitz
+
+Wir haben einen neuen [StackBlitz](https://stackblitz.com/) Startpunkt, um TresJS online zu testen:
+
+![](/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.
+
+![](/tresjs-lab.png)
+
+## Motivation
+
+[Three.js](https://threejs.org/) ist eine wunderbare Bibliothek für die Erstellung von erstaunlichen 3D-Webseiten mit WebGL. Sie wird konstant weiterentwickelt, was es für die Maintainer von Wrappern wie [TroisJS](https://troisjs.github.io/) schwierig macht, mit allen Verbesserungen Schritt zu halten.
+
+Das React-Ökosystem hat eine beeindruckendes **custom Rendering** Projekt namens [react-three-fiber](https://docs.pmnd.rs/react-three-fiber), das es dir ermöglicht, deine Szenen deklarativ mit wiederverwendbaren, reaktiven Komponenten zu bauen.
+
+Auf der Suche nach etwas Ähnlichem im VueJS-Ökosystem fand ich eine erstaunliche Bibliothek namens [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), die mit demselben Konzept wie R3F arbeitet und einen [custom Vue3-Renderer](https://vuejs.org/api/custom-renderer.html) bereitstellt. Ich habe seinerzeit auch dazu beigetragen, diese Bibliothek zu verbessern, damit sie so ausgereift und funktionsreich wie R3F wird.
+
+Das einzige Problem ist, dass die Kombination von Compilern und Renderern in Vue3-Templates etwas ist, an dem die Vue-Community noch arbeitet. Mehr Informationen dazu findest du [hier](https://github.com/vuejs/vue-loader/pull/1645).
+
+```ts
+// Example Vite setup
+import { createApp } from 'vue'
+import { createApp as createLunchboxApp } from 'lunchboxjs'
+import App from './App.vue'
+import LunchboxApp from './LunchboxApp.vue'
+
+// html app
+const app = createApp(App)
+app.mount('#app')
+
+// lunchbox app
+const lunchboxApp = createLunchboxApp(LunchboxApp)
+// assuming there's an element with ID `lunchbox` in your HTML app
+lunchboxApp.mount('#lunchbox')
+```
+
+Von diesen beiden Bibliotheken inspiriert, entschied ich mich dazu einen eigenen Vue-Renderer für Three.js zu erstellen. Das ist **TresJS v2**.

docs/de/guide/migration-guide.md

@@ -0,0 +1,223 @@
+# Migrationsleitfaden
+
+Dieser Leitfaden soll dir helfen, von Version 1 zur neusten Version von TresJS 🤩✨ zu migrieren.
+
+::: code-group
+
+```bash [pnpm]
+pnpm update @tresjs/core
+```
+
+```bash [npm]
+npm update @tresjs/core
+```
+
+```bash [yarn]
+yarn upgrade @tresjs/core
+```
+
+:::
+
+## Neues
+
+### Vue Custom Renderer
+
+**TresJS** ist jetzt ein [Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#createrenderer) 🎉, der innerhalb einer umhüllenden Komponente `TresCanvas` liegt, die den `WebGLRenderer` und die `Scene` für dich erstellt und eine **neue Instanz der Vue-App** zur Darstellung der Szene erzeugt.
+
+### Unterstützung für TypeScript und Intellisense 🦾
+
+![TresJS Intellisense](/v2-intellisense.gif)
+
+Dies war wahrscheinlich das am **meisten gefragte Feature für TresJS**. Jetzt funktionieren die Tres-Komponenten mit Volar und bieten Type-Intellisense.
+
+**TresJS** generiert nun zur Kompilierungszeit Typdeklarationen für alle Komponenten basierend auf dem Three.js-Katalog. Das bedeutet, dass du alle Three.js-Komponenten verwenden kannst und Type-Intellisense dafür erhälst.
+
+### Das Tres-Plugin ist optional 👍
+
+Das `TresPlugin` ist nun optional. Du kannst TresJS ohne das Plugin verwenden, indem du die Komponenten direkt aus `tresjs/core` importierst:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh
+      :geometry="geometry"
+      :material="material"
+    />
+  </TresCanvas>
+</template>
+```
+
+::: tip
+Aufgrund von Performance und Bundlegröße ist dieser Ansatz zu empfehlen, da durch das Tree-Shaking nur die tatsächlich verwendeten Komponenten importiert werden.
+:::
+
+### TresScene ist nicht mehr notwendig
+
+Die Komponente `<TresScene />` ist nun veraltet, da die Szene jetzt durch `<TresCanvas />` erstellt wird.
+
+Am Anfang dachte ich, dass es eine gute Idee wäre, eine separate Komponente für die Szene zu haben, um den Aufbau so ähnlich wie möglich an plain Three.js zu halten. Es stellte sich aber heraus, dass es nicht wirklich nützlich war.
+
+Du kannst jetzt eine Szene so erstellen:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      :position="cameraPosition"
+      :fov="cameraFov"
+      :aspect="cameraAspect"
+      :near="cameraNear"
+      :far="cameraFar"
+    />
+    <TresMesh
+      :geometry="geometry"
+      :material="material"
+    />
+  </TresCanvas>
+</template>
+```
+Um deinen Code zu migrieren, kannst du einfach die Komponente `<TresScene />` entfernen und die Kinder in die Komponente `<TresCanvas />` verschieben.
+
+### `useCatalog` ist jetzt veraltet
+
+Die Funktion `useCatalog` ist veraltet. Du kannst den Katalog jetzt direkt von `@tresjs/core` importieren.
+
+Du kannst mehr darüber hier lesen: [Erweiterung](/de/advanced/extending.md)
+
+Ändere dies:
+
+```ts {2,5,7}
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+Zu diesem:
+
+```ts {2,6}
+// Korrekt ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+extend({ TextGeometry })
+```
+### Der Modellreferenzwert `getModel` ist jetzt veraltet
+
+Die Funktion `getModel` ist veraltet. Du kannst jetzt direkt die Eigenschaft `model` verwenden.
+
+Ändere dies:
+
+```vue {7,9-12}
+// Falsch ❌
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, ({ getModel }) => {
+  const model = getModel()
+  model.position.set(0, 0, 0)
+})
+</script>
+
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+Zu diesem:
+
+```vue {7,9-12}
+// Korrekt ✅
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, (model) => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+### Kameras müssen vor jeglichen Controls sein 🎥
+
+Die Komponente `TresOrbitControls` muss nach der Kamera im Baum stehen. Dies liegt daran, dass die Controls die Kamera kennen müssen, um zu funktionieren.
+
+Ändere dies:
+
+```vue {3,5}
+// Falsch ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+Zu diesem:
+
+```vue {3,5}
+// Korrekt ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```
+
+## UseTres ist jetzt useTresContext <Badge type="warning" text="^3.0.0" />
+
+Für Version 3 haben wir die gesamte State-Logik umstrukturiert, um sie flexibler und einfacher für Entwickler von Plugins und Paketen des Ökosystems zu machen. Anstatt wie in Version 2 einen Store zu verwenden, nutzen wir jetzt einen Kontextanbieter basierend auf `provide/inject`.
+
+Die Funktion `useTres` ist jetzt ein Alias für die Funktion `useTresContext`, um bestehende Demos und Experimente nicht zu brechen, aber erwäge künftig `useTres` zu verwenden.
+
+Anstelle eines großen reaktiven Objekts erhältst du jetzt direkt die Referenzen `scene` und `renderer`, unter anderem.
+
+Ändere dies:
+
+```ts {2}
+// Falsch ❌
+import { useTres } from '@tresjs/core'
+
+const { state, setState } = useTres()
+
+console.log(state.scene)
+```
+
+Zu diesem:
+
+```ts {2}
+// Korrekt ✅
+import { useTresContext } from '@tresjs/core'
+
+const { scene, renderer } = useTresContext()
+
+console.log(scene.value)
+```
+
+Für detailliertere Informationen über das neue Context-Provider-System kannst du den Abschnitt [API DOCS](/de/api/composables.md) lesen.

docs/de/guide/nuxt.md

@@ -0,0 +1,58 @@
+# Nuxt module `@tresjs/nuxt`
+
+![TresJS Nuxt Module](/nuxt-stones.png)
+
+<a href="https://www.npmjs.com/package/@tresjs/nuxt"><img src="https://img.shields.io/npm/v/@tresjs/nuxt/latest?color=%2382DBCA" alt="npm package"></a>
+
+Dies ist das offizielle Nuxt-Modul für TresJS! 🎉.
+
+Das Repository findest du [hier](https://github.com/Tresjs/nuxt).
+
+## Instalación
+
+::: code-group
+
+```bash [pnpm]
+pnpm add three @tresjs/nuxt
+```
+
+```bash [npm]
+npm install three @tresjs/nuxt
+```
+
+```bash [yarn]
+yarn add three @tresjs/nuxt
+```
+
+:::
+
+## Features
+
+- 🤓 Automatischer Import von Komponenten und Composables aus dem [TresJS-Ökosystem](https://github.com/orgs/Tresjs/repositories)
+- `TresCanvas` ist nur auf dem Client verfügbar, daher ist es nicht notwendig, `.client` zum Namen der Komponente hinzuzufügen oder `<ClientOnly />` zu verwenden
+- Konfiguriert automatisch den Vue-Compiler, um TresJS-Komponenten zu unterstützen, siehe [warum](/de/guide/troubleshooting)
+- All die DX-Magie, die mit Nuxt kommt ✨
+
+## Verwendung
+
+Füge `@tresjs/nuxt` zum Abschnitt `modules` in `nuxt.config.ts` hinzu.
+
+```js
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt'],
+})
+```
+
+Das ist alles! Jetzt kannst du `@tresjs/nuxt` in deiner Nuxt-Anwendung verwenden ✨.
+
+Wenn du irgendwelche Pakete aus dem TresJS-Ökosystem verwenden möchtest, kannst du die gewünschten Pakete installieren und sie werden automatisch vom Modul importiert 🧙.
+
+| Package                     | Version                                                                                            |
+| --------------------------- | :------------------------------------------------------------------------------------------------- |
+| [Cientos](https://github.com/Tresjs/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) |
+| [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) |
+
+```bash
+# Wenn pnpm verwendet wird
+pnpm add @tresjs/cientos @tresjs/post-processing
+```

docs/de/guide/troubleshooting.md

@@ -0,0 +1,86 @@
+# Der unterhaltsame Leitfaden für häufige Probleme und deren Lösungen
+
+![Problembehandlung](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif)
+
+Willkommen beim Troubleshooting-Guide für **TresJS v2**. Wo 3D für _"Dazzlingly Delicious Difficulties"_ steht! Wir wissen, dass 3D so komplex wie ein verwickelter Wollknäuel 🧶 oder so unberechenbar wie eine Katze auf einer Tastatur 🐈 ⌨️ sein kann, aber keine Sorge!
+
+Dieser Leitfaden soll dir helfen, die häufigsten Probleme zu lösen, auf die du beim Einsatz von TresJS v2 treffen könntest.
+
+## Ich kann meine 3D-Szene nicht sehen 😭!
+
+Du bist der [Startanleitung](/de/guide/getting-started.md) gefolgt, kannst aber deine gerenderte Szene immer noch nicht sehen?
+
+Hier sind die häufigsten Gründe, warum du deine Szene möglicherweise nicht sehen kannst:
+
+### Überprüfe die Höhe deines Canvas 📏
+
+Ein weiteres häufiges Problem ist, dass die Komponente `TresCanvas` standardmäßig ein `canvas`-Element erstellt, das die `width` und `height` des Elternelements übernimmt. Wenn das Elternelement keine Höhe hat, wird auch das Canvas keine Höhe haben.
+
+![Keine Höhenangabe gefunden](/canvas-height.png)
+
+Du wirst auch diesen Fehler in der Konsole sehen:
+
+![Canvas Höhenwarnung](/canvas-height-warning.png)
+
+Eine einfache Lösung dafür ist, die Höhe des Elternelements auf `100%` zu setzen:
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+}
+```
+
+Du kannst auch die Eigenschaft `window-size` der Komponente `TresCanvas` verwenden:
+
+```vue
+<TresCanvas window-size>
+  <TresPerspectiveCamera />
+  <TresOrbitControls />
+</TresCanvas>
+```
+
+## Fehler beim Auflösen des Komponenten: TresComponent...
+
+![](/failed-to-resolve-component.png)
+
+Da **TresJS v2** einen benutzerdefinierten Vue-Renderer innerhalb der Hauptinstanz der Vue-Anwendung verwendet, wird der Hauptrenderer von Vue, der als Elternteil fungiert, die Komponenten innerhalb der Komponente `TresCanvas` nicht erkennen. Obwohl es die Darstellung nicht beeinträchtigt, wird eine Warnung in der Konsole angezeigt.
+
+![](/failed-to-resolve-component.png)
+
+Derzeit gibt es keine native Unterstützung von Vue, um den verwendeten Renderer im `<template />`-Tag zu definieren, aber es gibt eine schnelle Lösung, um die Warnungen zu entfernen.
+
+Öffne `vite.config.ts` und füge die folgende Konfiguration zum `@vitejs/plugin-vue` hinzu um die Warnung aus der Konsole zu entfernen:
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+# Hilf uns, TresJS miau-tastisch zu machen! 😼
+
+Wir wissen, dass selbst die besten Schlafkatzen gelegentlich Fehler machen und wir brauchen deine Hilfe, um TresJS noch besser zu machen! Wenn du einen Fehler findest, öffne bitte ein Ticket im [Repository](https://github.com/Tresjs/tres/issues) und **bitte stelle einen Reproduktionslink bereit**.
+
+::: warning
+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!

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

@@ -0,0 +1,163 @@
+# Deine erste Szene
+
+Dieser Leitfaden hilft dir, deine erste Szene in Tres zu erstellen. 🍩
+
+<ClientOnly>
+<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+  <DonutExample />
+</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.
+
+Mit **TresJS** kannst du direkt die Standardkomponente `<TresCanvas />` importieren und sie zum Template deiner Vue-Komponente hinzufügen.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Deine Szene lebt hier -->
+  </TresCanvas>
+</template>
+```
+
+::: warning
+Es ist wichtig, dass alle mit der Szene verbundenen Komponenten *innerhalb* der <TresCanvas />-Komponente sind. Andernfalls werden sie nicht gerendert.
+:::
+
+Die TresCanvas-Komponente führt einige Konfigurationen im Hintergrund durch:
+
+Sie erstellt einen [**WebGLRenderer**](https://threejs.org/docs/index.html?q=webglrend#api/en/renderers/WebGLRenderer), der sich automatisch bei jedem Frame aktualisiert.
+Und sie stellt den Rendering-Loop so ein, dass er bei jedem Frame basierend auf der Bildwiederholrate des Browsers aufgerufen wird.
+
+## Leinwandgröße
+
+Standardmäßig nimmt die `TresCanvas`-Komponente **die Breite und Höhe des Elternelements** an. Wenn du eine leere Seite erhälst, muss das Elternelement eine angemessene Größe haben.
+
+```vue
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <!-- Deine Szene lebt hier -->
+  </TresCanvas>
+</template>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>
+```
+
+Wenn deine Szene nicht Teil einer Benutzeroberfläche sein wird, kannst du auch die gesamte Breite und Höhe des Fensters mit der Eigenschaft `window-size` nutzen:
+
+```vue{6}
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas window-size>
+    <!-- Deine Szene lebt hier -->
+  </TresCanvas>
+</template>
+```
+
+## Eine Szene erstellen
+
+Wir benötigen 4 Hauptelemente, um ein 3D-Erlebnis zu erstellen:
+
+- Eine [**Szene**](https://threejs.org/docs/index.html?q=scene#api/de/scenes/Scene) um die Kamera und Objekte zusammen zu halten.
+- Einen [**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/de/renderers/WebGLRenderer), um die Szene im DOM zu rendern.
+- Eine [**Kamera**](https://threejs.org/docs/index.html?q=camera#api/de/cameras/Camera)
+- Ein [**Objekt**](https://threejs.org/docs/index.html?q=object#api/de/core/Object3D)
+
+Mit TresJS musst du nur die `<TresCanvas />`-Komponente zum Template deiner Vue-Komponente hinzufügen, und sie erstellt automatisch einen `Renderer`  (DOM-`canvas`-Element) und eine Szene für dich.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Hier lebt deine Szene! -->
+  </TresCanvas>
+</template>
+```
+
+Dann kannst du eine [**PerspectiveCamera**](https://threejs.org/docs/index.html?q=perspectivecamera#api/de/cameras/PerspectiveCamera) mit der Komponente `<TresPerspectiveCamera />` hinzufügen.
+
+::: warning
+Ein häufiges Problem ist, dass die Standardposition der Kamera der Ursprung der Szene (0,0,0) ist. TresJS wird die Position deiner Kamera automatisch auf [3,3,3] setzen, wenn die position-Eigenschaft nicht definiert ist. Wenn in deiner Szene keine Kamera definiert ist, wird automatisch eine Perspektivkamera hinzugefügt.
+:::
+
+## Einen 🍩 hinzufügen
+
+Die Szene sieht ein wenig leer aus, fügen wir also ein Objekt hinzu. Wenn wir reines **Three.js** verwenden würden, müssten wir ein [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh)-Objekt erstellen und ihm ein [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) sowie eine [**Geometrie**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) wie folgt anhängen:
+
+```ts
+const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
+const material = new THREE.MeshBasicMaterial({ color: 'orange' })
+const donut = new THREE.Mesh(geometry, material)
+scene.add(donut)
+```
+
+Ein **Mesh** ist ein grundlegendes Szenenobjekt in three.js und wird verwendet, um die Geometrie und das Material zu bündeln, die benötigt werden, um eine Form im 3D-Raum darzustellen.
+
+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>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::: info
+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'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    window-size
+  >
+    <TresPerspectiveCamera
+      :position="[3, 3, 3]"
+      :look-at="[0, 0, 0]"
+    />
+    <TresMesh>
+      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+
+Von hier aus kannst du mehr Objekte zu deiner Szene hinzufügen und mit den Eigenschaften der Komponenten spielen, um zu sehen, wie sie die Szene beeinflussen.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVMtu2kAU/ZWRu8iiYIcQoojSikCjqlXTRi27OIuJfYGBeWlmzKOIf+8d2zhD2kZU8oI5955z3+yiiQF7o3W8KiDqRwObGaYdseAKTTiVs/dp5GwafUglE1oZR3bEU8ZUrqglezI1SpCzoUNsYZNMGTh7l8pBUgkhDR8OhObUAb4IGQT0jAM17UxxZTDOm+uLj6NxL43ImslcrduW/ao4NesejNWQObaCMRVgaGUjpK+VZY4piSoP3Rbx32MaNeapWqHlEqUbiCu1bFPnCect4r+GkIQx78DO63eNTJQp7CdQApzZkj41M+tVOigR91qkc4XBL1Cs0QmURtSy7A5bYRjl5FC4MthoCBiD5EXoUuBGPDGQ7iubzR3pM+lAYtVbFOg03IpZtReBQRL0PmpF1Qzbgup4YZXEie88K60NOOg+KRGPhUP1hjSaO6dtP0myXCI/B85WJpbgEqlFEroPu3EvPk9yZl3iYfROo9Yfwr4cVQY9VbtioPxVKF/Dx1HcGuhSU3lK7o3v8DI+jzu18gGMBfOcUHtu4CRd7zdExd415vsWrAjbgDdXWDi5v4H7sIO7hop4J7CJxXF3az87pwby/xCuCK9Jo2M7B8FOED24+uIv46uEs6dQ0ivuU7nHnXQ2U3LKZi82MlNCMw7mu/aHfbyZlHO1/lJizhTQ5JfNIVv+BV/YTZXyPS4LmBW2+3mUeMDgKvPtz2+wwd+NUai84PVw/mH8AVbxwudYuY0KmWPagV+Z7efywJicTeztprzcuqijRN1WQ4k+HP46ml2rgMeycaV/OY7xK116rqwbd5uG738DogXwDg==" />

docs/de/index.md

@@ -0,0 +1,35 @@
+---
+layout: home
+
+title: TresJS
+titleTemplate: Die Lösung für 3D in VueJS
+
+hero:
+  name: TresJS
+  text: Bringe Three in das Vue-Ökosystem
+  tagline: Erstelle unglaubliche 3D-Erlebnisse mit dem VueJS.
+  image:
+    src: /hero.png
+    alt: Tresjs
+  actions:
+    - theme: brand
+      text: Beginnen
+      link: /de/guide/
+    - theme: alt
+      text: Warum Tres?
+      link: /de/guide/#motivation
+
+features:
+  - icon: 💡
+    title: Deklarativ
+    details: Baue 3D-Szenen, als wären sie Vue-Komponenten.
+  - icon: ⚡️
+    title: Angetrieben von Vite
+    details: Hot Module-Reloading (HMR), das schnell bleibt, unabhängig von der Größe der Anwendung.
+  - icon: 🥰
+    title: Immer auf dem neuesten Stand
+    details: Bringt sofort alle aktualisierten Funktionen von Three.js.
+  - icon: 🌳
+    title: Ökosystem
+    details: Erweitere die Kernfunktionalität mit Paketen wie `cientos` und `postprocessing`. Oder füge deine eigenen hinzu.
+---

docs/de/team.md

@@ -0,0 +1,35 @@
+---
+layout: page
+title: Meet the Team
+description: Das TresJS Ökosystem wird von einem globalen Team gepflegt und entwickelt...
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers
+} from 'vitepress/theme'
+import { core } from '../_data/team'
+</script>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Meet the Team</template>
+    <template #lead>
+      Das TresJS Ökosystem wird von einem globalen Team gepflegt und entwickelt.
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members="core" />
+  <!-- <VPTeamPageSection>
+    <template #title>Team Emeriti</template>
+    <template #lead>
+      Here we honor some no-longer-active team members who have made valuable
+      contributions in the past.
+    </template>
+    <template #members>
+      <VPTeamMembers size="small" :members="emeriti" />
+    </template>
+  </VPTeamPageSection> -->
+</VPTeamPage>

docs/debug/devtools.md

@@ -1,8 +1,6 @@
 # Devtools
 
-
-
-One of the most difficult things a developer faces when creating 3D experiences on the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. The imperative nature of [ThreeJS](https://threejs.org/) makes it incredibly difficult to debug, having to depend on `console.log` to see what's going on, or third party to fine-tune and inspect the scene.
+One of the most difficult things a developer faces when creating 3D experiences in the browser is debugging. The browser `canvas` is a black box, and it's hard to know what's going on inside. A developer might come to rely on a series of `console.log`s or third-party tools just to inspect the scene.
 
 Don't make me get started with checking the performance of your scene. 😱
 
@@ -19,7 +17,7 @@ From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customize
 ### Features
 
 - **Scene Inspector**: Inspect the current scene and its components using a tree view similar to the Vue Devtools component inspector.
-- **Memory Allocation**: See how much memory is being by the components.
+- **Memory Allocation**: See how much memory is being consumed by the components.
 - **Object Inspector**: Inspect the properties of the selected object in the scene, including its children.
 - **Editable Properties**: And yes, you can edit the properties of the selected object and see the changes in real-time.
 

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

@@ -18,13 +18,13 @@ import { Box } from '@tresjs/cientos'
   </TresCanvas>
 </template>
 ```
-No matter where the Box move will always look-at the position [0,0,0]
+No matter where the `Box` move will always look-at the position [0,0,0]
 
 ### Why not use the in built method look-at?
 
 You could ask, this is fine but I can use the `:look-at` method directly in the component, why should I need this?
 
-The answers is that with the method `:look-at` you will indicated to look at that position just once, when the instance is mounted, then if the object changes this will not get updated
+The answers is that with the method `:look-at` you will indicate to look at that position just once, when the instance is mounted, then if the object changes this will not get updated.
 
 ### You can look at other instance too!
 

docs/directives/v-light-helper.md

@@ -1,6 +1,6 @@
 # v-light-helper 🔆
 
-With the new directive v-light-helper provided by **TresJS**, you can add fast the respective helper to your lights with just one line of code 😍.
+With the new directive v-light-helper provided by **TresJS**, you can quickly add the respective helper to your lights with just one line of code 😍.
 
 The following lights are supported:
 - DirectionalLight

docs/directives/v-log.md

@@ -27,7 +27,7 @@ watch(sphereRef, (value) => {
 </template>
 ```
 
-And is A LOT of code just for a simple log right?
+Don't you think this is A LOT of code just for a simple log?
 
 ## Usage
 
@@ -51,4 +51,4 @@ import { OrbitControls, Sphere } from '@tresjs/cientos'
 </template>
 ```
 
-Note that you can pass a modifier with the name of a property, for example `v-log:material`, and will log directly the `material` property 😍
+Note that you can pass a modifier with the name of a property, for example `v-log:material`, and it will directly log the `material` property 😍

docs/es/advanced/caveats.md

@@ -0,0 +1,120 @@
+# Avisos 😱
+
+Nuestro objetivo es proporcionar una forma sencilla de utilizar ThreeJS en VueJS con la mejor experiencia de desarrollo posible. Sin embargo, hay algunas advertencias de las que debes ser consciente.
+
+## ~~HMR y ThreeJS~~
+
+:::info
+
+Esto se ha solucionado en **TresJS** v1.7.0 🎉. Ahora puedes utilizar HMR sin tener que recargar la página 🥹.
+
+:::
+
+La sustitución de módulos en caliente (HMR) es una característica que te permite actualizar tu código sin recargar la página. Esta es una gran característica que hace que el desarrollo sea mucho más rápido. **TresJS** utiliza [Vite](https://vitejs.dev/). Sin embargo, es realmente complicado hacer que funcione correctamente con ThreeJS.
+
+¿Por qué? Porque Tres construye la escena de forma declarativa. Esto significa que crea la instancia y la añade a la escena cuando se monta el componente. La complejidad radica en saber cuándo quitar la instancia de la escena y cuándo añadirla de nuevo.
+
+Aunque se ha implementado un flujo de eliminación mínimo, no es perfecto. Esto significa que a veces tendrás que recargar la página para ver los cambios correctamente, especialmente cuando estás haciendo referencia a instancias utilizando [Template Refs](https://v3.vuejs.org/guide/component-template-refs.html)
+
+```vue
+<script setup lang="ts">
+const boxRef: Ref<TresInstance | null> = ref(null)
+
+onLoop(({ _delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :scale="1"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+Si realizas un cambio en el `color` del componente `TresMeshStandardMaterial`, verás que el cambio se aplica pero la rotación ya no funciona. Esto se debe a que la instancia se elimina y se crea de nuevo.
+
+:::tip
+Entonces, como **regla general**, debes recargar la página cuando no veas los cambios que has realizado.
+:::
+
+Dicho esto, estamos trabajando en una mejor solución para esto 😁. Si tienes alguna idea de cómo resolverlo, por favor avísanos.
+
+Puedes seguir la discusión en [HMR Disposal Discussion](https://github.com/Tresjs/tres/issues/23)
+
+## Reactividad
+
+Todos amamos la reactividad 💚. Es una de las características más poderosas de VueJS. Sin embargo, debemos tener cuidado al usar ThreeJS.
+
+La reactividad de Vue se basa en [Proxy](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Esto permite que Vue 3 rastree automáticamente los cambios en los objetos de datos y actualice los elementos DOM correspondientes cada vez que los datos cambien.
+
+Dado que estamos renderizando una escena y actualizándola en cada fotograma (60FPS), eso significa que estamos actualizando la escena 60 veces por segundo. Si el objeto a actualizar es reactivo, Vue intentará actualizar ese objeto tantas veces. Esto no es una buena idea 😅 y será perjudicial para el rendimiento.
+
+Aquí tienes una prueba de rendimiento de la diferencia entre usar un objeto Proxy y un objeto plano.
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="Proxy vs Plain" style="width:100%">
+  <figcaption>Fig.1 - Ejecuciones por segundo Objeto Plano vs Proxy. </figcaption>
+</figure>
+
+Fuente: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)
+
+Si te ves obligado a usar reactividad, utiliza [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+A diferencia de `ref()`, el valor interno de un shallow ref se almacena y se expone tal cual, y no se hace reactividad profunda. Solo el acceso a `.value` es reactivo. Fuente [VueJS Docs](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### Ejemplo
+
+❌ Incorrecto
+
+```vue
+<script setup lang="ts">
+const position = reactive({ x: 0, y: 0, z: 0 })
+
+onLoop(({ _delta, elapsed }) => {
+  position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+✅ Correcto
+
+```vue
+<script setup lang="ts">
+const position = { x: 0, y: 0, z: 0 }
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+onLoop(({ _delta, elapsed }) => {
+  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3
+})
+</script>
+
+<template>
+  <TresMesh
+    ref="boxRef"
+    :position="position"
+    cast-shadow
+  >
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```

docs/es/advanced/extending.md

@@ -0,0 +1,44 @@
+# Extender 🔌
+
+Tres ofrece la funcionalidad básica, pero es fácil agregar elementos de terceros y extenderlos en su catálogo interno.
+
+La mayoría de las experiencias en 3D utilizan `OrbitControls`, que no forma parte de la biblioteca principal. Puedes agregarlo a tu proyecto importándolo desde el módulo `three/addons/controls/OrbitControls`.
+
+```js
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+```
+
+## Extender un elemento dinámicamente
+
+También puedes agregarlo dinámicamente en tus componentes:
+
+```vue {2,3,4,7,13,15}
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Añadimos OrbitControls al catalogo interno
+extend({ TextGeometry, OrbitControls })
+</script>
+
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

docs/es/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+El componente `<primitive />` es un componente versátil de bajo nivel en TresJS que te permite utilizar directamente cualquier objeto de three.js dentro de tu aplicación Vue sin una abstracción. Actúa como un puente entre el sistema de reactividad de Vue y el grafo de escena de three.js.
+
+## Usage
+
+```html
+<script setup lang="ts">
+  // Importa las clases necesarias de three.js
+  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 })
+
+  // Crea un mesh con la geometría y el material
+  const meshWithMaterial = new Mesh(geometry, material)
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`object`: Esta propiedad espera un objeto `Object3D` de three.js o cualquiera de sus clases derivadas. Es el objeto principal que el componente `<primitive />` renderizará. En el ejemplo actualizado, se pasa un objeto `Mesh` con su correspondiente `Material` a esta propiedad.
+
+## Uso con Modelos
+
+El componente `<primitive />` es especialmente útil para renderizar objetos complejos como modelos cargados desde fuentes externas. El siguiente ejemplo muestra cómo cargar un modelo desde un archivo GLTF y renderizarlo utilizando el componente `<primitive />`.
+
+```html
+<script lang="ts" setup>
+  import { useGLTF } from '@tresjs/cientos'
+
+  const { nodes } = await useGLTF('/models/AkuAku.gltf')
+</script>
+
+<TresCanvas>
+  <Suspense>
+    <primitive :object="nodes.AkuAku" />
+  </Suspense>
+</TresCanvas>
+```

docs/es/api/composables.md

@@ -0,0 +1,234 @@
+# Composables
+
+La API de Composición de Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api) te permite crear lógica reutilizable que se puede compartir entre componentes. También te permite crear hooks personalizados que se pueden utilizar en tus componentes.
+
+**TresJS** aprovecha al máximo esta API para crear un conjunto de funciones composables que se pueden utilizar para crear animaciones, interactuar con la escena y más. También te permite crear escenas más complejas que podrían no ser posibles utilizando solo los Componentes de Vue (Texturas, Cargadores, etc.).
+
+El núcleo de **TresJS** utiliza estos composables internamente, por lo que estarías utilizando la misma API que utiliza el núcleo. Por ejemplo, los componentes que necesitan actualizarse en el bucle de renderizado interno utilizan el composable `useRenderLoop` para registrar un callback que se llamará cada vez que el renderizador actualice la escena.
+
+## useRenderLoop
+
+El composable `useRenderLoop` es el núcleo de las animaciones en **TresJS**. Te permite registrar un callback que se llamará en la frecuencia de actualización nativa. Este es el composable más importante en **TresJS**.
+
+```ts
+const { onLoop, resume } = useRenderLoop()
+
+onLoop(({ delta, elapsed, clock, dt }) => {
+  // I will run at every frame ~60FPS (depending of your monitor)
+})
+```
+
+::: warning
+Ten en cuenta las implicaciones de rendimiento al usar este composable. Se ejecutará en cada fotograma, por lo que si tienes mucha lógica en tu callback, podría afectar el rendimiento de tu aplicación. Especialmente si estás actualizando estados o referencias reactivas.
+:::
+
+El callback `onLoop` recibe un objeto con las siguientes propiedades basadas en el [reloj de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock):
+
+- `delta`: El tiempo transcurrido entre el fotograma actual y el último fotograma. Este es el tiempo en segundos desde el último fotograma.
+- `elapsed`: El tiempo transcurrido desde el inicio del bucle de renderizado.
+
+Este composable se basa en `useRafFn` de [vueuse](https://vueuse.org/core/useRafFn/). Gracias a [@wheatjs](https://github.com/wheatjs) por la increíble contribución.
+
+### Antes y después de renderizar
+
+También puedes registrar un callback que se llamará antes y después de que el renderizador actualice la escena. Esto es útil si agregas un perfilador para medir los FPS, por ejemplo.
+
+```ts
+const { onBeforeLoop, onAfterLoop } = useRenderLoop()
+
+onBeforeLoop(({ delta, elapsed }) => {
+  // Se ejecutara antes del renderizado de la escena
+  fps.begin()
+})
+
+onAfterLoop(({ delta, elapsed }) => {
+  // Se ejecutara después del renderizado de la escena
+  fps.end()
+})
+```
+
+### Pausar y reanudar
+
+Puedes pausar y reanudar el bucle de renderizado utilizando los métodos `pause` y `resume` expuestos.
+
+```ts
+const { pause, resume } = useRenderLoop()
+
+// Pausa el bucle de renderizado
+pause()
+
+// Reanuda el bucle de renderizado
+resume()
+```
+
+También puedes obtener el estado activo del bucle de renderizado utilizando la propiedad `isActive`.
+
+```ts
+const { resume, isActive } = useRenderLoop()
+
+console.log(isActive) // false
+
+resume()
+
+console.log(isActive) // true
+```
+
+## useLoader
+
+El composable `useLoader` te permite cargar recursos utilizando los [cargadores de THREE.js](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). Retorna una promesa con el recurso cargado.
+
+```ts
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
+
+const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
+```
+
+Dado que el composable `useLoader` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`. Consulta [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) para obtener más información.
+
+```vue
+<template>
+  <Suspense>
+    <TheComponentUsingLoader />
+  </Suspense>
+</template>
+```
+
+## useTexture
+
+El composable `useTexture` te permite cargar texturas utilizando el [cargador de texturas de THREE.js](https://threejs.org/docs/#api/en/loaders/TextureLoader). Retorna una promesa con la(s) textura(s) cargada(s).
+
+```ts
+const texture = await useTexture(['path/to/texture.png'])
+```
+
+**useTexture** también acepta un objeto con las siguientes propiedades:
+
+- `map`: una textura básica que se aplica a la superficie de un objeto
+- `displacementMap`: una textura que se utiliza para agregar protuberancias o indentaciones a la superficie del objeto
+- `normalMap`: una textura que se utiliza para agregar detalles de superficie y variaciones en el sombreado al objeto
+- `roughnessMap`: una textura que se utiliza para agregar rugosidad o un acabado mate a la superficie del objeto
+- `metalnessMap`: una textura que se utiliza para agregar un efecto metálico a la superficie del objeto
+- `aoMap`: una textura que se utiliza para agregar oclusión ambiental (sombreado en áreas donde la luz es bloqueada por otros objetos) al objeto.
+- `alphaMap`: una textura que se utiliza para agregar transparencia (la parte negra se renderiza como transparente) al objeto. Es necesario establecer :transparent="true" en el material para usar este mapa.
+- `matcap`: esta textura codifica el color y el sombreado del material.
+
+En ese caso, devolverá un objeto con las texturas cargadas.
+
+```ts
+const { map, displacementMap, normalMap, roughnessMap, metalnessMap, aoMap, alphaMap, matcap } = await useTexture({
+  map: 'path/to/albedo.png',
+  displacementMap: 'path/to/height.png',
+  normalMap: 'path/to/normal.png',
+  roughnessMap: 'path/to/roughness.png',
+  metalnessMap: 'path/to/metalness.png',
+  aoMap: 'path/to/ambien-occlusion.png',
+  alphaMap: 'path/to/alpha.png',
+  matcap: 'path/to/matcap.png',
+})
+```
+
+Luego puedes vincular las texturas al material.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial
+        :map="map"
+        :displacement-map="displacementMap"
+        :normal-map="normalMap"
+        :roughness-map="roughnessMap"
+        :metalness-map="metalnessMap"
+        :ao-map="aoMap"
+        :alpha-map="alphaMap"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+Similar al composable anterior, el composable `useTexture` devuelve una promesa, puedes usarlo con `async/await` o `then/catch`. Si lo estás utilizando en un componente, asegúrate de envolverlo con un componente `Suspense`.
+
+## useSeek
+
+El composable `useSeek` proporciona utilidades para recorrer y navegar fácilmente a través de escenas y gráficos de objetos complejos de ThreeJS. Exporta 4 funciones que te permiten encontrar objetos secundarios basados en propiedades específicas.
+
+```ts
+const { seek, seekByName, seekAll, seekAllByName } = useSeek()
+```
+
+La función `seek` acepta tres parámetros:
+
+- `parent`: Una escena ThreeJS u Object3D.
+- `property`: La propiedad que se utilizará en la condición de búsqueda.
+- `value`: El valor de la propiedad a coincidir.
+
+La función `seek` y `seekByName` recorren el objeto y devuelven el objeto hijo con la propiedad y valor especificados. Si no se encuentra ningún hijo con la propiedad y valor dados, devuelve null y registra una advertencia.
+
+```ts
+const carRef = ref(null)
+
+watch(carRef, ({ model }) => {
+  if (model) {
+    const car = model.children[0]
+
+    const body = seek(car, 'name', 'Octane_Octane_Body_0')
+    body.color.set(new Color('blue'))
+  }
+})
+```
+
+De manera similar, las funciones `seekAll` y `seekAllByName` devuelven un array de objetos secundarios cuya propiedad incluye el valor dado. Si no se encuentran coincidencias, devuelven un array vacío y se registra una advertencia.
+
+```ts
+const character = ref(null)
+
+watch(character, ({ model }) => {
+  if (model) {
+    const bones = seekAll(character, type, 'Bone')
+  }
+})
+```
+
+## useTresContext
+Este composable tiene como objetivo proporcionar acceso al modelo de estado que contiene múltiples propiedades útiles.
+
+```ts
+const { camera, renderer, camera, cameras } = useTresContext()
+```
+
+::: warning
+`useTresContext` solo puede ser utilizado dentro de un `TresCanvas`, ya que `TresCanvas` actúa como el proveedor de los datos de contexto. Utiliza [el contexto expuesto por TresCanvas](tres-canvas#propiedades-públicas-expuestas) si necesitas acceder a él en componentes superiores a TresCanvas.
+:::
+
+```vue
+<TresCanvas>
+  <MyModel />
+</TresCanvas>
+```
+
+```vue
+// MyModel.vue
+
+<script lang="ts" setup>
+import { useTresContext } from '@tresjs/core'
+
+const context = useTresContext()
+</script>
+```
+
+### Propiedades del contexto
+| Propiedad | Descripción |
+| --- | --- |
+| **camera** | la cámara actualmente activa |
+| **cameras** | las cámaras que existen en la escena |
+| **controls** | los controles de tu escena |
+| **deregisterCamera** | un método para cancelar el registro de una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
+| **extend** | Extiende el catálogo de componentes. Ver [extending](/advanced/extending) |
+| **raycaster** | el raycaster global utilizado para eventos de puntero |
+| **registerCamera** | un método para registrar una cámara. Esto solo es necesario si creas una cámara manualmente. Las cámaras en la plantilla se registran automáticamente. |
+| **renderer** | el [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) de tu escena |
+| **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

@@ -0,0 +1,27 @@
+# Events
+
+**TresJS** los componentes emiten eventos de puntero cuando se interactúa con ellos. Esto es válido para los componentes que representan clases de three.js que derivan de [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (como mallas, grupos, ...).
+
+<StackBlitzEmbed project-id="tresjs-events" />
+
+## Pointer Events
+
+```html
+<TresMesh
+  @click="(intersection, pointerEvent) => console.log('click', intersection, pointerEvent)"
+  @pointer-move="(intersection, pointerEvent) => console.log('pointer-move', intersection, pointerEvent)"
+  @pointer-enter="(intersection, pointerEvent) => console.log('pointer-enter', intersection, pointerEvent)"
+  @pointer-leave="(intersection, pointerEvent) => console.log('pointer-leave', pointerEvent)"
+/>
+```
+
+| Event         | se 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) |
+| 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)                                                                                                                         |
+
+La [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) devuelta incluye el [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) que desencadenó el evento. Puedes acceder a él a través de `intersection.object`.
+
+De forma predeterminada, los objetos posicionados delante de otros con controladores de eventos no evitan que se disparen esos eventos. Este comportamiento se puede lograr utilizando la propiedad `blocks-pointer-events`.

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

@@ -0,0 +1,150 @@
+# Instancias
+
+La idea principal de **Tres** es un _catálogo autogenerado_ de todos los elementos de ThreeJS. Este catálogo se genera a partir del código fuente de ThreeJS, por lo que siempre está actualizado.
+
+Cuando usas ThreeJS, necesitas importar los elementos que deseas utilizar. Por ejemplo, si quieres usar una `PerspectiveCamera`, necesitas importarla desde el paquete `three`:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+Con **Tres** no necesitas importar nada, esto se debe a que **Tres** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en PascalCase con un prefijo Tres**. Por ejemplo, si quieres usar una `PerspectiveCamera`, puedes usar el componente `<TresPerspectiveCamera />`.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+Esto significa que puedes utilizar la misma [documentación](https://threejs.org/docs/) que usarías al utilizar ThreeJS básico, pero con el poder de Vue.
+
+## Declarando objetos
+
+Si seguimos este argumento, deberías poder definir una instancia de esta manera: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="new THREE.Vector3(1, 2, 3)"
+    />
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+Pero con **Tres** esto no es necesario, puedes definir las propiedades de forma declarativa de la siguiente manera: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera
+      visible
+      :position="[1, 2, 3]"
+    />
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+## Argumentos
+
+Algunos objetos de ThreeJS tienen argumentos, por ejemplo, el constructor `PerspectiveCamera` tiene los siguientes argumentos:
+
+- `fov` - Campo de visión vertical de la cámara.
+- `aspect` - Relación de aspecto del frustum de la cámara.
+- `near` - Plano cercano del frustum de la cámara.
+- `far` - Plano lejano del frustum de la cámara.
+
+Para pasar estos argumentos al componente `TresPerspectiveCamera`, puedes usar la propiedad `args`:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+Esto es lo mismo que hacer esto:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```
+
+## Propiedades
+
+También puedes pasar propiedades al componente, por ejemplo, el `TresAmbientLight` tiene una propiedad `intensity`, por lo que puedes pasarla al componente de la siguiente manera:
+
+```html
+<TresAmbientLight :intensity="0.5" />
+```
+
+### Establecer
+
+Todas las propiedades cuyo objeto subyacente tiene un método `.set()` tienen un atajo para recibir el valor como un array. Por ejemplo, el `TresPerspectiveCamera` tiene una propiedad `position`, que es un objeto `Vector3`, por lo que puedes pasarlo al componente de esta manera:
+
+```html
+<TresPerspectiveCamera :position="[1, 2, 3]" />
+```
+
+Para especificar propiedades de transformación como posición, rotación y escala, hay una forma abreviada disponible que te permite indicar directamente el eje que deseas establecer dentro de las propiedades. Una forma abreviada similar también está disponible para la propiedad de color.
+
+<!-- Cambié la sintaxis de color de Vue a HTML, porque Vue parece estar roto y no colorea los componentes anidados -->
+```html
+<TresMesh :position-x="1" :scale-y="2" :rotation-x="Math.PI * 2">
+  <TresMeshBasicMaterial :color-r="0.7" :color-b="0.3" />
+</TresMesh>
+```
+
+::: warning
+Cuando estableces la propiedad de rotación en [three.js](https://threejs.org/docs/index.html#api/en/math/Euler), se utilizará el orden 'XYZ' de forma predeterminada.
+Es importante tener en cuenta que al establecer la propiedad de rotación con la forma abreviada, el orden en el que estableces los ángulos importa. Para obtener más información sobre este tema, consulta [Ángulos de Euler](https://es.wikipedia.org/wiki/%C3%81ngulos_de_Euler)
+:::
+
+```vue
+<TresMesh :rotation-x="1" :rotation-y="2" :rotation-z="Math.PI * 2" />
+
+<TresMesh :rotation-z="Math.PI * 2" :rotation-x="1" :rotation-y="2" />
+
+<!-- Ten en cuenta que el orden de las propiedades de rotación importa y cambiar el orden puede dar lugar a resultados diferentes. -->
+```
+
+### Escalar
+
+Otro atajo que puedes usar es pasar un valor escalar a una propiedad que espera un objeto `Vector3`, usando el mismo valor para el resto del vector:
+
+```html
+<TresPerspectiveCamera :position="5" /> ✅
+```
+
+```html
+<TresPerspectiveCamera :position="[5, 5, 5]" /> ✅
+```
+
+### Colores
+
+Puedes pasar colores a los componentes usando la propiedad `color`, la cual acepta un string con el nombre del color o un valor hexadecimal:
+
+```html
+<TresAmbientLight color="teal" /> ✅
+```
+
+```html
+<TresAmbientLight color="#008080" /> ✅
+```
+
+### Métodos
+
+Algunas propiedades subyacentes son en realidad métodos, el `TresPerspectiveCamera` tiene un método `lookAt` heredado de [Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt), por lo que puedes pasarle las coordenadas al componente de esta manera:
+
+```html
+<TresPerspectiveCamera :look-at="[1, 2, 3]" />
+```

docs/es/api/tres-canvas.md

@@ -0,0 +1,104 @@
+# TresCanvas
+
+El componente `TresCanvas` es el componente principal de Tres. Es el que crea el `WebGLRenderer` de ThreeJS.
+
+```vue{2,5}
+<template>
+  <TresCanvas shadows :output-encoding="SRGBColorSpace">
+    <TresPerspectiveCamera />
+      <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+## Tamaño del lienzo
+
+El componente `TresCanvas` utilizará el tamaño del elemento padre como tamaño del lienzo. Si deseas utilizar el tamaño de la ventana como tamaño del lienzo, puedes establecer la propiedad `window-size` en `true`.
+
+```vue
+<template>
+  <TresCanvas window-size>
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+Or you can use CSS to set your canvas size.
+
+```css
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+#canvas {
+  height: 100%;
+  width: 100%;
+}
+```
+
+## Presets
+
+Tres viene con algunos presets para el componente `TresCanvas`. Puedes usarlos estableciendo la propiedad `preset`.
+
+### Realista
+
+El preset `realista` facilita la configuración del renderizador para escenas 3D más realistas.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Tu escena vive aqui -->
+  </TresCanvas>
+</template>
+```
+
+It's equivalent to:
+
+```ts
+renderer.shadows = true
+renderer.physicallyCorrectLights = true
+renderer.outputColorSpace = SRGBColorSpace
+renderer.toneMapping = ACESFilmicToneMapping
+renderer.toneMappingExposure = 3
+renderer.shadowMap.enabled = true
+renderer.shadowMap.type = PCFSoftShadowMap
+```
+
+## Props
+
+| Prop | Descripción | Valor por defecto |
+| ---- | ---- | --- |
+| **alpha** | Controla el valor alfa predeterminado. Cuando se establece en true, el valor es 0. De lo contrario, es 1. | false |
+| **antialias** | Indica si se debe realizar el antialiasing. | `true` |
+| **camera** | Una cámara manual que se utilizará por el renderizador. | |
+| **clearColor** | El color que el renderizador utilizará para borrar el lienzo. | `#000000` |
+| **context** | Esto se puede usar para adjuntar el renderizador a un [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) existente. | |
+| **depth** | Indica si el búfer de dibujo tiene un [búfer de profundidad](https://en.wikipedia.org/wiki/Z-buffering) de al menos 16 bits. | `true` |
+| **disableRender** | Desactiva el renderizado en requestAnimationFrame, útil para PostProcessing. | `false` |
+| **failIfMajorPerformanceCaveat** | Indica si la creación del renderizador fallará si se detecta un bajo rendimiento. Consulta la [especificación de WebGL](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) para más detalles. | `false` |
+| **logarithmicDepthBuffer** | Indica si se debe utilizar un búfer de profundidad logarítmico. Puede ser necesario utilizar esto si se manejan diferencias enormes de escala en una sola escena. Ten en cuenta que esta configuración utiliza gl_FragDepth si está disponible, lo cual deshabilita la optimización [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) y puede causar una disminución en el rendimiento. | `false` |
+| **outputColorSpace** | Define la codificación de salida. | `LinearEncoding` |
+| **powerPreference** | Proporciona una sugerencia al agente de usuario que indica qué configuración de GPU es adecuada para este contexto WebGL. Puede ser "high-performance", "low-power" o "default". | `default` |
+| **precision** | Precisión del shader. Puede ser "highp", "mediump" o "lowp". | "highp" si es compatible con el dispositivo |
+| **premultipliedAlpha** | Indica si el renderizador asumirá que los colores tienen [alfa premultiplicado](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` |
+| **preserveDrawingBuffer** | Indica si se deben preservar los búferes hasta que se borren o se sobrescriban manualmente. | `false` |
+| **shadows** | Habilita las sombras en el renderizador. | `false` |
+| **shadowMapType** | Establece el tipo de mapa de sombras. | `PCFSoftShadowMap` |
+| **stencil** | Indica si el búfer de dibujo tiene un [búfer de stencil](https://en.wikipedia.org/wiki/Stencil_buffer) de al menos 8 bits. | `true` |
+| **toneMapping** | Define la exposición de mapeo de tonos utilizada por el renderizador. | `NoToneMapping` |
+| **toneMappingExposure** | Nivel de exposición del mapeo de tonos. | `1` |
+| **useLegacyLights** | Indica si se debe utilizar el modo de iluminación heredado o no. | `true` |
+| **windowSize** | Indica si se debe utilizar el tamaño de la ventana como el tamaño del lienzo o el elemento padre. | `false` |
+
+### Valores predeterminados
+
+Tres intenta ser lo menos opinado posible. Es por eso que no establece casi ningún valor predeterminado para el componente `TresCanvas`. Utiliza los valores predeterminados de [three.js](https://threejs.org/). La única excepción es la propiedad `antialias`, que se establece en `true` de forma predeterminada.
+
+## Propiedades públicas expuestas
+
+| Propiedad | Descripción |
+| ---- | ---- |
+| context | ver [useTresContext](composables#usetrescontext) |

docs/es/cookbook/basic-animations.md

@@ -0,0 +1,97 @@
+---
+title: Animaciones básicas
+description: Cómo usar el composable useRenderLoop para animar tus objetos.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
+# Animaciones básicas
+
+Esta guía te ayudará a comenzar con animaciones básicas en TresJS.
+
+Construiremos una escena simple con un cubo. Luego animaremos el cubo para que rote alrededor del eje Y y Z.
+
+<SandboxDemo url="https://play.tresjs.org/#eNqVVF1P2zAU/StW9kAZbVI+hTqKOjo0bRofYrwRHkxy2xoc27KdtlD1v+8mTloHBipSH5rjc889vh9eBLcazHelwmkOQS84MYlmyhIDNleEUzHux4E1cXAaC5YpqS1ZEDOhnMvZDYzIkoy0zMgWRm998yiF6pCKKTVtkhu4AZGC/iOlWkUMLFIeTZRI3Qy90g/MDqWwWnLzls5AWGmKiFgkUhhLHuS8sNL3fLVEzvm2x1kQKar0/aahlqO541ZrQVLglrYJcKoMpGS5TfqnZBELQtiItFyycEp5DtsOJpUDB4ZaWmqZFOEz2ek7NczwPu0FHdXJvpJuuFeyl7FYFs5OItcRrD9+WMgUpxbwi5CTdZFJwoHqTiK51NiwL8d7P86Gh3FQlCSVM0MoVxNKZkzgV8ewF6eAGs1qRxVciV+DNgoSy6YwpBloWp8S0lPSsMI/prvbbZO9Njm8jwOPMJJTPDtAFx5ISz3EdxuwQPcIdsMmPCrR3W63u4ZfWbwAMyEaRshz5cVL90xCObgkJKHGdlwZVpFV7Jmc/wSZgdXP6EyPTXWX4od38VJ5yS6lzii/wCZoRrlvJ6oprjvlp2sPAieR17ugHbhx72RUhY9GCly9cpbi6gA3rldPVxz4u1IcxMHEWmV6UZSkAuNxyNhUhwJsJFQW+fTBfngYdqOUGRsVMLLjoP1G2G3VZ7RdBMof+fIV3MxiZ0CfFBWbeF9xBwchjkOlXINhxooYX3uiYSPdgjdAxcNj9LsDJvPLgM8XPgob19ejD3a7ZYFxs2AeZs3qVjycPg3pJ4RdwEfSSOykkLENRGtqcfmD8Cji7MGXrB8bnElr8LEcsfGriUxkphgHfaWKfW9OZvng/i4xq3NY+UsmkDz9B380c2f5GocF9BTLvW4lriBYd3z+9xLm+H91mMk051Vz3jm8ASN5Xnh0tLNcpGjb45Vuf5ULxsT41pzPLQhTX6ph1D4rKNG7er9Xs+aA+7JwJb9sx/CDKq1vth/urwq+/AdyGHHw" />
+
+## useRenderLoop
+
+El composable `useRenderLoop` es el núcleo de las animaciones en TresJS. Te permite registrar una función de devolución de llamada que se ejecutará cada vez que el renderizador actualice la escena con la frecuencia de actualización del navegador.
+
+Para obtener una explicación detallada de cómo funciona, consulta la documentación de [useRenderLoop](/api/composables#userenderloop).
+
+```ts
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  // Se ejecutará en cada fotograma ~ 60FPS (dependiendo de tu monitor)
+})
+```
+
+## Obteniendo la referencia al cubo
+
+Para animar el cubo, necesitamos obtener una referencia a él. Podemos hacerlo pasando una [Referencia de Plantilla](https://vuejs.org/guide/essentials/template-refs.html) utilizando la propiedad `ref` en el componente `TresMesh`. Esto nos devolverá la instancia de THREE.
+
+Para mejorar el rendimiento, utilizaremos una [Referencia Superficial](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) para almacenar la referencia en lugar de una referencia regular. Puedes ver por qué [aquí](../advanced/caveats.md#reactivity)
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+</script>
+
+<template>
+  <TresCanvas>
+    <TresMesh
+      ref="boxRef"
+      :scale="1"
+    >
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Animando el cubo
+
+Ahora que tenemos una referencia al cubo, podemos animarlo. Utilizaremos la devolución de llamada `onLoop` para actualizar la rotación del cubo.
+
+```ts
+onLoop(({ delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += delta
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+```
+
+También puedes usar el `delta` del [reloj interno de THREE](https://threejs.org/docs/?q=clock#api/en/core/Clock) o el `elapsed` para animar el cubo.
+
+## ¿Pero por qué no usar la reactividad?
+
+Es posible que te preguntes por qué no estamos usando la reactividad para animar el cubo. La respuesta es simple: rendimiento.
+
+```vue
+// Esto es una mala idea ❌
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const boxRotation = reactive([0, 0, 0])
+
+onLoop(({ delta, elapsed }) => {
+  boxRotation[1] += delta
+  boxRotation[2] = elapsed * 0.2
+})
+</script>
+```
+
+Podemos sentirnos tentados a usar la reactividad para animar el cubo. Pero sería una mala idea.
+La razón es que [la reactividad de Vue se basa en Proxies](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue) y no está diseñada para ser utilizada en un bucle de renderizado que se actualiza 60 o más veces por segundo.
+
+La página incrustada a continuación muestra la [prueba de rendimiento de un proxy frente a un objeto regular](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter). Como puedes ver, el proxy es 5 veces más lento que el objeto regular.
+
+<EmbedExperiment src="https://measurethat.net/Embed?id=399142" />
+
+Puedes leer más sobre esto en la sección de [Caveats](../advanced/caveats.md#reactivity).