Merge branch 'main' into refactor/events

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @alvarosabu

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

@@ -29,4 +29,4 @@ runs:
 # Avoid running husky hooks on Github
 # http://typicode.github.io/husky/how-to.html
 env:
-  HUSKY: 0
+  HUSKY: 0

.github/workflows/lint.yml

@@ -8,7 +8,7 @@ env:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         node-version: [20]

.github/workflows/pkg.pr.new.yml

@@ -26,13 +26,13 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - run: corepack enable
+      - run: npm i -g --force corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Build
         run: pnpm build
-      - run: pnpx pkg-pr-new publish --compact --pnpm
+      - run: pnpx pkg-pr-new publish --compact --pnpm

.github/workflows/sponsorkit.yml

@@ -5,7 +5,7 @@ on:
   schedule:
     - cron: '0 0 * * *'
   push:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   update-sponsors:
@@ -34,6 +34,6 @@ jobs:
           author_name: GitHub Actions
           author_email: 41898282+github-actions[bot]@users.noreply.github.com
           message: 'chore: update sponsors.svg '
-          add: "sponsors.*"
+          add: 'sponsors.*'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -8,7 +8,7 @@ env:
 jobs:
   test:
     name: Unit Test
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
         node-version: [20]

CHANGELOG.md

@@ -1,5 +1,47 @@
 
 
+## [4.3.2](https://github.com/Tresjs/tres/compare/4.3.1...4.3.2) (2025-01-03)
+
+### Features
+
+* extend GlobalComponents interface to include 'primitive' component type ([#896](https://github.com/Tresjs/tres/issues/896)) ([b78a6ff](https://github.com/Tresjs/tres/commit/b78a6ffabc4542dcc08d430e34c3dd2d5a9adaeb))
+* update deps 20 12 24 ([#887](https://github.com/Tresjs/tres/issues/887)) ([d377750](https://github.com/Tresjs/tres/commit/d377750b01ee27d70fc29b5faedf6257b22ebfdf))
+
+### Bug Fixes
+
+* Add missing </UseLoader> closing tag. ([#881](https://github.com/Tresjs/tres/issues/881)) ([e16ea32](https://github.com/Tresjs/tres/commit/e16ea3248674adf80131a7a493c10b583a6e25a8))
+* **function typo:** fix typo in function name in composable ([#858](https://github.com/Tresjs/tres/issues/858)) ([c186232](https://github.com/Tresjs/tres/commit/c186232f180f8caa9a39a0a2ae4b1c6b30725e46))
+
+## [4.3.1](https://github.com/Tresjs/tres/compare/4.3.0...4.3.1) (2024-10-13)
+
+### Bug Fixes
+
+* 849 support Symbol keys in provide/inject ([#850](https://github.com/Tresjs/tres/issues/850)) ([35125ce](https://github.com/Tresjs/tres/commit/35125cecda55333bac542ed473bcddd2f7925c2b))
+
+## [4.3.0](https://github.com/Tresjs/tres/compare/4.2.10...4.3.0) (2024-09-30)
+
+
+### Features
+
+* add UseLoader component ([471bd0d](https://github.com/Tresjs/tres/commit/471bd0d16fe496a0e5e6a71a62c93093c73ce834))
+* **app:** 680 UseTexture composable as component ([#757](https://github.com/Tresjs/tres/issues/757)) ([f01a897](https://github.com/Tresjs/tres/commit/f01a897bcc9352e6a4cb1ac03e204f08b51f6b6c))
+* pass all provides down to custom renderer ([#806](https://github.com/Tresjs/tres/issues/806)) ([b4a3866](https://github.com/Tresjs/tres/commit/b4a3866f69e0c19339d7746a392f9d92569234d8))
+
+
+### Bug Fixes
+
+* eslint ([2ccd6c4](https://github.com/Tresjs/tres/commit/2ccd6c4104dd358e1a600a1e688d9a2c119611ab))
+* lint ([f71eb37](https://github.com/Tresjs/tres/commit/f71eb37648e806f4ce0a97de0d58c6bde8e43252))
+* lint ([8f18558](https://github.com/Tresjs/tres/commit/8f18558087136d7fbc68394d1069bf4a46d76fb9))
+* rollback to v6 of `@vue/devtools-api` ([#846](https://github.com/Tresjs/tres/issues/846)) ([fd3b599](https://github.com/Tresjs/tres/commit/fd3b59975f63d13ba79c824252563debc048b9d2))
+* type for useloader component props ([a4bd590](https://github.com/Tresjs/tres/commit/a4bd590776825b74188dc601b64caf59d33c7284))
+
+
+### Reverts
+
+* **nodeOps:** add check for null props ([#829](https://github.com/Tresjs/tres/issues/829)) ([04b001b](https://github.com/Tresjs/tres/commit/04b001b8edadf1ec03ce1351af1334a0746fbb3e))
+* **useRenderer:** add rendererPresets import ([#839](https://github.com/Tresjs/tres/issues/839)) ([f944647](https://github.com/Tresjs/tres/commit/f944647ad4d363b80def0e61e9cdd106e03b7e94))
+
 ## [4.2.10](https://github.com/Tresjs/tres/compare/4.2.9...4.2.10) (2024-09-04)
 
 

docs/.vitepress/config/de.ts

@@ -76,9 +76,7 @@ export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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: 'v-rotate', link: '/directives/v-rotate' },
         ],
       },
       {
@@ -140,6 +138,10 @@ export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                 text: 'TresLeches 🍰',
                 link: 'https://tresleches.tresjs.org/',
               },
+              {
+                text: 'Nachbearbeitung',
+                link: 'https://post-processing.tresjs.org/',
+              },
             ],
           },
         ],

docs/.vitepress/config/en.ts

@@ -45,6 +45,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           { text: 'Extending', link: '/advanced/extending' },
           { text: 'Primitives', link: '/advanced/primitive' },
           { text: 'Scaling Performance 🚀', link: '/advanced/performance' },
+          { text: 'Attach', link: '/advanced/attach' },
           {
             text: 'Caveats',
             link: '/advanced/caveats',
@@ -141,6 +142,10 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                 text: 'TresLeches 🍰',
                 link: 'https://tresleches.tresjs.org/',
               },
+              {
+                text: 'Post-processing',
+                link: 'https://post-processing.tresjs.org/',
+              },
             ],
           },
         ],

docs/.vitepress/config/es.ts

@@ -77,9 +77,7 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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: 'v-rotate', link: '/directives/v-rotate' },
         ],
       },
       {
@@ -141,6 +139,10 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                 text: 'TresLeches 🍰',
                 link: 'https://tresleches.tresjs.org/',
               },
+              {
+                text: 'Post-procesamiento',
+                link: 'https://post-processing.tresjs.org/',
+              },
             ],
           },
         ],

docs/.vitepress/config/fr.ts

@@ -77,9 +77,7 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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: 'v-rotate', link: '/directives/v-rotate' },
         ],
       },
       {
@@ -139,6 +137,10 @@ export const frConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'TresLeches 🍰',
               link: 'https://tresleches.tresjs.org/',
             },
+            {
+              text: 'Post-processing',
+              link: 'https://post-processing.tresjs.org/',
+            },
           ],
         },
       ] },

docs/.vitepress/config/nl.ts

@@ -76,9 +76,7 @@ export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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: 'v-rotate', link: '/directives/v-rotate' },
         ],
       },
       {
@@ -138,6 +136,10 @@ export const nlConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'TresLeches 🍰',
               link: 'https://tresleches.tresjs.org/',
             },
+            {
+              text: 'Nabewerking',
+              link: 'https://post-processing.tresjs.org/',
+            },
           ],
         },
       ] },

docs/.vitepress/config/shared.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
 import { defineConfig } from 'vitepress'
+import { groupIconMdPlugin } from 'vitepress-plugin-group-icons'
 
 export const sharedConfig = defineConfig({
   title: 'TresJS',
@@ -91,4 +92,9 @@ export const sharedConfig = defineConfig({
       },
     },
   },
+  markdown: {
+    config: (md) => {
+      md.use(groupIconMdPlugin)
+    },
+  },
 })

docs/.vitepress/config/zh.ts

@@ -75,9 +75,7 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         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: 'v-rotate', link: '/directives/v-rotate' },
         ],
       },
       {
@@ -139,6 +137,10 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                 text: 'TresLeches 🍰',
                 link: 'https://tresleches.tresjs.org/',
               },
+              {
+                text: 'Post-processing',
+                link: 'https://post-processing.tresjs.org/',
+              },
             ],
           },
         ],

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

@@ -80,27 +80,27 @@ import { VPHomeSponsors } from 'vitepress/theme'
         target="_blank"
         rel="noreferrer"
       >
-        Cody Bennet <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23324155?v=4" alt="" />
+        Cody Bennett <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23324155?v=4" alt="" />
       </a>
     </li>
     <li>
       <a
         class="sponsor"
-        href="https://github.com/sponsors/nuxt"
+        href="https://github.com/sponsors/danielroe "
         target="_blank"
         rel="noreferrer"
       >
-        Daniel Roe <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23360933?s=160&v=4" alt="" />
+        Daniel Roe <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="" />
       </a>
     </li>
     <li>
       <a
         class="sponsor"
-        href="https://github.com/sponsors/danielroe"
+        href="https://github.com/sponsors/nuxt"
         target="_blank"
         rel="noreferrer"
       >
-        Nuxt <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="" />
+        Nuxt <img class="w-5 h-5 rounded ml-2" src="https://avatars.githubusercontent.com/u/23360933?s=160&v=4" alt="" />
       </a>
     </li>
   </ul>

docs/.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import TresLayout from './TresLayout.vue'
 import './custom.css'
 
 import 'uno.css'
+import 'virtual:group-icons.css'
 
 /* const plausible = createPlausible({
   init: {

docs/advanced/attach.md

@@ -0,0 +1,190 @@
+# `attach` 🖇
+
+Using the `attach` prop, you can tell Tres exactly where you want to insert a child into its parent.
+
+:::info
+
+The `attach` prop is not required for many common cases. For instance:
+
+* adding a single `<Material>` to a `<Mesh>`
+* adding a `<Geometry>` to a `<Mesh>`
+* adding one or more `<Mesh>`s to a parent `<Mesh>`
+
+:::
+
+## Background
+
+Tres tries to automatically determine where to insert a child tag into its parent. For example, in this code, Tres will:
+
+* automatically insert the geometry into `parent.geometry`
+* automatically insert the material into `parent.material`
+
+```vue
+<template>
+  <TresMesh name="parent">
+    <TresBoxGeometry />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+</template>
+```
+
+## Problem
+
+Tres covers common cases, like above. But it doesn't cover every possible case.
+
+When Tres doesn't automatically choose the proper insertion location for a child, one solution is to fall back to procedural code in `<script>`.
+
+Here's how you might add multiple materials to a mesh using `<script>`:
+
+```vue
+<script setup lang="ts">
+import { MeshBasicMaterial } from 'three'
+import { onMounted, shallowRef } from 'vue'
+
+const meshRef = shallowRef()
+onMounted(() => {
+  meshRef.value.material = [
+    new MeshBasicMaterial({ color: 'red' }),
+    new MeshBasicMaterial({ color: 'orange' }),
+    new MeshBasicMaterial({ color: 'yellow' }),
+    new MeshBasicMaterial({ color: 'green' }),
+    new MeshBasicMaterial({ color: 'blue' }),
+    new MeshBasicMaterial({ color: 'purple' }),
+  ]
+})
+</script>
+
+<template>
+  <TresMesh ref="meshRef">
+    <TresBoxGeometry />
+  </TresMesh>
+</template>
+```
+
+But this workaround means:
+
+* your materials aren't managed by Tres
+* your code is imperative, not declarative
+* your code is non-reactive by default
+
+## Solution
+
+The `attach` prop lets you specify where an object will be added to the parent object using declarative code.
+
+## Usage
+
+Here's the example above, rewritten declaratively using `attach`:
+
+```vue
+<template>
+  <TresMesh>
+    <TresBoxGeometry />
+    <TresMeshBasicMaterial color="red" attach="material-0" />
+    <TresMeshBasicMaterial color="orange" attach="material-1" />
+    <TresMeshBasicMaterial color="yellow" attach="material-2" />
+    <TresMeshBasicMaterial color="green" attach="material-3" />
+    <TresMeshBasicMaterial color="blue" attach="material-4" />
+    <TresMeshBasicMaterial color="purple" attach="material-5" />
+  </TresMesh>
+</template>
+```
+
+## "Pierced" `attach`
+
+You can deeply attach a child to a parent by "piercing" – i.e., using a kebab-case string.
+
+### Pseudocode
+
+First, here are a few simple pseudocode examples. This will attach `bar` at `foo.ab.cd`:
+
+```vue
+<foo>
+  <bar attach="ab-cd" />
+</foo>
+```
+
+This will attach `bar` at `foo.ab.cd.ef`:
+
+```vue
+<foo>
+  <bar attach="ab-cd-ef" />
+</foo>
+```
+
+### Usage
+
+As a concrete example, you can use "pierced" `attach` to add custom `BufferAttribute`s:
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+
+const positions = new Float32Array([-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0])
+</script>
+
+<template>
+  <TresCanvas clear-color="gray">
+    <TresMesh :scale="0.3333">
+      <TresBufferGeometry>
+        <TresBufferAttribute
+          attach="attributes-position"
+          :count="positions.length / 3"
+          :array="positions"
+          :itemSize="3"
+        />
+      </TresBufferGeometry>
+      <TresMeshBasicMaterial color="red" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Arrays
+
+You can attach within arrays by using array indices in the `attach` string.
+
+### Usage
+
+For example, you can use array indices to attach `THREE` post-processing passes to the `THREE.EffectComposer.passes` array:
+
+```vue
+<script lang="ts" setup>
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass'
+import { UnrealBloomPass } from 'three-stdlib'
+import { extend, useLoop, useTres } from '@tresjs/core'
+import { shallowRef } from 'vue'
+
+extend({ EffectComposer, OutputPass, UnrealBloomPass, RenderPass })
+const { renderer, scene, camera, sizes } = useTres()
+const composer = shallowRef<EffectComposer>()
+
+useLoop().render(() => {
+  if (composer.value) {
+    composer.value!.render()
+  }
+})
+</script>
+
+<template>
+  <TresEffectComposer
+    ref="composer"
+    :args="[renderer]"
+    :set-size="[sizes.width.value, sizes.height.value]"
+  >
+    <TresRenderPass
+      :args="[scene, camera]"
+      attach="passes-0"
+    />
+    <TresUnrealBloomPass
+      :args="[undefined, 0.5, 0.1, 0]"
+      attach="passes-1"
+    />
+    <TresOutputPass
+      attach="passes-2"
+      :set-size="[sizes.width.value, sizes.height.value]"
+    />
+  </TresEffectComposer>
+</template>
+```

docs/api/composables.md

@@ -244,10 +244,13 @@ import { UseLoader } from '@tresjs/core'
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 </script>
 
-<Suspense>
-  <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
+<template>
+  <Suspense>
+    <UseLoader v-slot="{ data }" :loader="GLTFLoader" url="path/to/asset.gltf">
       <primitive :object="data.scene" />
-</Suspense>
+    </UseLoader>
+  </Suspense>
+</template>
 ```
 
 ### Props

docs/api/tres-canvas.md

@@ -92,6 +92,7 @@ renderer.shadowMap.type = PCFSoftShadowMap
 | **toneMappingExposure** | Exposure level of tone mapping. | `1` |
 | **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
 | **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
+| **enableProvideBridge** | Enables the provide/inject bridge between Vue context and TresCanvas. | `true` |
 
 ### Defaults
 

docs/blog/announcing-cientos-3-2-0.md

@@ -1,112 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.2.0 🎉
-
-There is a lot going on in the TresJs Ecosystem.
-
-But for now let's hijack this space to announce what's happening in your favorite helper library for creating 3D experience with TresJs, the Cientos package! 😊
-
-- **Cientos v3.2.0**
-
-<iframe src="https://giphy.com/embed/vmon3eAOp1WfK" width="480" height="357" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/celebration-excited-loki-vmon3eAOp1WfK">via GIPHY</a></p>
-
-## Remove TweakPane from cientos 😱
-
-Ok ok, not really. We haven't dropped [TweakPane](https://cocopon.github.io/tweakpane/) from Cientos (just yet).
-
-In Cientos, we're constantly working to improve your development experience, and we have found that the tweakPane + plugin-essentials was taking up almost a third of the Cientos bundle size, so we have taken the decision to drop it from Cientos and add it as a peerDependency.
-
-This will mean that you have to manually install it to use `useTweakPane()`.
-
-So, as you may find in the logs, this package will be deprecated soon in the future.
-
-The good news is that we're working on a built-in solution... ok no more spoilers 😊
-
-![](/blog/announce-leches.jpg)
-
-## GlassMaterial 🍷
-
-![](/blog/glass-material.gif)
-
-¡We've something shiny here!
-
-A new fancy material only available in Cientos that emulates glass.
-
-As you should expect, it couldn't be easier to use:
-
-```html
-<MeshGlassMaterial ref="glassMaterialRef" />
-```
-
-This material is an adaptation of the MeshPhysicalMaterial so you can tweak the properties to achieve incredible results in the same way
-
-More info [here](https://cientos.tresjs.org/guide/materials/glass-material.html)
-
-## UseVideoTexture 🎞️
-
-![](/blog/useVideoTexture.gif)
-
-Yes!! the new loader allows you to easily use a video as a texture.
-
-```js
-import { useVideoTexture } from '@tresjs/cientos'
-import exampleVideo from '/myVideoPath'
-
-const texture = ref()
-texture.value = await useVideoTexture(exampleVideo) // you can pass options too
-```
-
-And in the component:
-
-```html
-...
-<Sphere :position="[0, 2, 0]">
-  <TresMeshBasicMaterial :map="texture" />
-</Sphere>
-...
-```
-
-For more information, you can check the official doc [useVideoTexture](https://cientos.tresjs.org/guide/loaders/use-video-texture.html)
-
-## Camera-controls 🎥
-
-Since the last version of Cientos was released, you have been able to use the famous Camera-controls library, made by [yomotsu](https://github.com/yomotsu).
-
-In case you don't know what I'm talking about, the CameraControls is a camera controller similar to OrbitControls yet it supports smooth transitions and more features.
-
-As always in Cientos we like to make things easy for you and so we created an abstraction that you can use like this:
-
-```html
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
-    <CameraControls />
-  </TresCanvas>
-</template>
-```
-
-The number of tweaks you can do here is out of this world, check it out[here](https://cientos.tresjs.org/guide/controls/camera-controls.html)
-
-Big thanks to [notarun](https://github.com/notarun) for this amazing contribution.
-
-## New Event isLocked in (PointerLockControls)
-
-A new event has been added to the `PointerLockControls`, now you can effortlessly know if the PointerLock event is active or not. Simply add a couple of lines of code:
-
-```js
-const isActive = (state: boolean) => console.log(state)
-```
-
-```html
-...
-<PointerLockControls @is-lock="state => isActive(state)" />
-...
-```
-
----
-
-We hope you like this new release. We are working hard to bring you the best possible experience when using TresJS.
-
-- Cientos https://github.com/Tresjs/cientos/releases

docs/blog/announcing-cientos-3-4-0.md

@@ -1,110 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.4.0 🎉
-
-Cientos is here again with a new and exiting release 🎉.
-
-- **Cientos v3.4.0**
-
-<iframe src="https://giphy.com/embed/2XOL4zsm6V0nm" width="480" height="358" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/walking-2XOL4zsm6V0nm">via GIPHY</a></p>
-
-## LensFlare
-
-A new and completely original abstraction has arrived to Cientos ✨ Behold His Majesty `<LensFlare />`.
-
-It's a wrapper of the Three.js [LensFlare](https://threejs.org/docs/#examples/en/objects/Lensflare) addon.
-
-![](/blog/lensflare.gif)
-
-While it could look intimidating at first, this component has a lot of flexibility, so check out all the different options [here](https://cientos.tresjs.org/guide/abstractions/lensflare.html)
-
-We're going to say thanks to [andretchen0](https://github.com/andretchen0) for this incredible contribution.
-
-## Sky
-
-The `Sky` component allows you to create realistic outdoor scenes with the use of sky, which as the name implies creates sky gradients and more with just a few lines of code.
-
-![](/blog/sky.gif)
-
-This is  fancy wrapper of the addon [Sky](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
-
-```vue
-<script setup lang="ts">
-import { Sky } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 100, 2000]" />
-    <Sky />
-  </TresCanvas>
-</template>
-```
-Could it be simpler?
-
-You can find the official docs [here](https://cientos.tresjs.org/guide/staging/sky.html)
-
-Another one of [andretchen0](https://github.com/andretchen0) amazing contributions!
-
-## SVG
-
-![](/blog/svg.gif)
-
-A classical one, the svg loader component has arrived in cientos this release, to bring the versatility of `svg` into a wrapper of the original [loader](https://threejs.org/docs/?q=svg#examples/en/loaders/SVGLoader) with basically one line of code (well two if you count the import 😅).
-
-```html
-<template>
-  <TresCanvas>
-    <Suspense>
-      <SVG src="/favicon.svg" /> // you can pass a path or a inline svg
-    </Suspense>
-  </TresCanvas>
-</template>
-```
-You can find the official docs [here](https://cientos.tresjs.org/guide/loaders/svg.html).
-
-And yes, again big thanks to [andretchen0](https://github.com/andretchen0) 3 in a row!
-
-## Stats-gl
-
-![](/blog/stats-gl.png)
-
-
-Another exciting one is the addition of Stats-gl which is like statsjs but with superpowers, originally developed by [RenaudRohlinger](https://github.com/RenaudRohlinger/stats-gl) is a powerful performance monitoring tool.
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { StatsGl } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <StatsGl /> // as simple as this
-  </TresCanvas>
-</template>
-```
-
-Big thanks to [notarun](https://github.com/notarun) for this contribution.
-
-Official docs [here](https://cientos.tresjs.org/guide/misc/stats-gl.html).
-
-## Fix camera as a param problem in controls
-
-[damiankoper](https://github.com/damiankoper) discovered a bug when you tried to use the camera as a parameter.
-
-Thanks to [damiankoper](https://github.com/damiankoper) for this useful contribution.
-
-## New documentation full of examples
-
-![](/blog/docs-examples.png)
-
-In addition to all these amazing new features, we have been working internally to improve the UX, and now you can visit the [cientos](https://cientos.tresjs.org/) page and navigate through the components and see the inline examples right away.
-
-## Internal organization of code (will be easier to contribute)
-
-Also, we're constantly working on the DX: refactors, cleaning, and internal improvement. So now we have a clear structure, now it is easier than ever to contribute to the cientos package 😁.
-
-Thanks for reading and happy 3D coding  😊.

docs/blog/announcing-cientos-3-5-0.md

@@ -1,228 +0,0 @@
----
-sidebar: false
----
-
-# Announcing cientos v3.5.0 🎉
-
-We're excited to share with you a new release of `@tresjs/cientos`  full of exciting new features.
-
-
-## HTML component 🖥️
-
-Let's start with a versatile one, the `HTML` component has finally arrived to **Cientos** and brings with it a huge amount of possibilities! Just look at this:
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/html-occlude.mp4" type="video/mp4">  
-</video>
-
-This component allows you to project HTML content or even Vuejs components into any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object.
-
-You can even use plain CSS or utilities like [tailwindcss](https://tailwindcss.com/) to style 🎨.
-
-```html
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import {  Html } from '@tresjs/cientos'
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[3, 3, 8]" />
-    <OrbitControls />
-    <TresMesh :position="[1, 1, 1]">
-      <TresBoxGeometry />
-      <TresMeshNormalMaterial />
-      <Html
-        center
-        transform
-        :distance-factor="4"
-        :position="[0, 0, 0.65]"
-        :scale="[0.75, 0.75, 0.75]"
-      >
-        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
-          I'm a Box 📦
-        </h1>
-      </Html>
-    </TresMesh>
-    <TresGridHelper />
-    <TresAmbientLight />
-  </TresCanvas>
-</template>
-```
-
-### `iframe` between threejs objects
-
-Yup.
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/html-laptop.mp4" type="video/mp4">  
-</video>
-
-You can achieve pretty cool results with the `Html` component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage within a 3D model.
-
-
-Please check the official [docs](https://cientos.tresjs.org/guide/misc/html-component.html)
-
-This was provided by [Alvaro Saburido](https://github.com/alvarosabu).
-
-## FBO and useFBO 🪞
-
-The FBO (or Frame Buffer Object) technique allows you to put a render into a texture. We provide this feature as a component or as a composable.
-
-<video class="w-full overflow-hidden rounded" controls autoplay loop>
-  <source src="/blog/fbo.mp4" type="video/mp4">  
-</video>
-
-To learn more about this powerful component please check [this](https://cientos.tresjs.org/guide/abstractions/fbo.html)
-
-Big thanks to [Francesco Michelini](https://github.com/kekkorider)
-
-## Line2 📉
-
-We gave some love to the shape section in this release, bringing to you two new shapes componentes. The first one is `<Line2 />`, which allow you to create easy lines with just a few lines of code.
-
-![](/blog/line2.gif)
-
-For more info please check the [official documentation](https://cientos.tresjs.org/guide/shapes/line2.html). 
-
-This component was done by [andretchen0](https://github.com/andretchen0) big thanks to him.
-
-## CatmullRomCurve 💫
-
-Similar to the previous one, the `<CatmullRomCurve3 />` provides smooth curves with almost no configuration.
-
-![](/blog/CatmullRomCurve3.gif)
-
-You can learn more [here](https://cientos.tresjs.org/guide/shapes/catmullromcurve3.html).
-
-Another component made by [andretchen0](https://github.com/andretchen0) thanks.
-
-## GlobalAudio 🔊
-
-You can now add sound to your scene with just one component. `<GlobalAudio  />` has landed in **TresJs**. Simply import and use the `<GlobalAudio  />` component, give it music path and just like that you'll get sound.
-
-```vue{3,9}
-<script setup>
-import { TresCanvas } from '@tresjs/core'
-import { GlobalAudio } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
-    <GlobalAudio :src="exampleAudio" />
-  </TresCanvas>
-</template>
-```
-An abstraction of the three [Audio](https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio) instance.
-
-To learn more check this [here](https://cientos.tresjs.org/guide/abstractions/global-audio.html).
-
-This component was made by [JaimeTorrealba](https://github.com/JaimeTorrealba).
-
-## Directives
-
-A new exiting one, **Cientos** has been experimenting with the original Vue [Directives](https://vuejs.org/guide/reusability/custom-directives.html#introduction). This idea was born in a session between the **TresJs** Core team members, we explored the possibility, and now we're happy to announce that not only is it possible, it's really handy.
-
-So now we have 4 Directives and a new section in cientos for you guys:
-
-### v-log
-
-With v-log you can inspect your instance without the need to use template ref and watch... Just import the directive, and log what you need.
-
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- will print just the material 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
-
-Check [here](https://cientos.tresjs.org/guide/directives/v-log.html) for more info.
-
-### v-light-helper
-
-Also for debug purposes, `v-light-helper` aims to add the current helper for the light, this way you don't have to worry about any reference or bloated code, just import and use it with a light, and you'll get the right helper.
-
-```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>
-```
-
-Visit the [official documentation](https://cientos.tresjs.org/guide/directives/v-light-helper.html) to learn more.
-
-
-### v-always-look-at
-
-With the `v-always-look-at` as the name suggest you can force the element to always look at a point (even if this is in movement).
-
-```vue{2,10}
-<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>
-```
-
-Learn more [here](https://cientos.tresjs.org/guide/directives/v-always-look-at.html)
-
-### v-distance-to
-
-![v-distance-to directive tresjs](/blog/v-distance-to.png)
-
-Have you ever tried to measure the distance between objects in threejs? Well now it's easier than ever. Just use the `v-distance-to` and you'll get the exact distance. Example:
-
-```html{7}
-<Sphere
-  ref="sphere1Ref"
-  :position="[-2, slider, 0]"
-  :scale="0.5"
-/>
-<Sphere
-  v-distance-to="sphere1Ref"
-  :position="[2, 0, 0]"
-  :scale="0.5"
-/>
-```
-Learn more about these directives [here](https://cientos.tresjs.org/guide/directives/v-distance-to.html)
-
-You can take a look to the whole [Release](https://github.com/Tresjs/cientos/releases/tag/3.5.0)
-
-Thanks for reading and happy 3D coding  😊
-

docs/blog/announcing-tres-nuxt-module.md

@@ -1,131 +0,0 @@
----
-sidebar: false
----
-
-![Announcing TresJS Nuxt Module](/blog/tresjs-nuxt-module.png)
-
----
-
-# Announcing Nuxt Module `@tresjs/nuxt` <i class="i-logo-nuxt" /> 🎉
-
-We are absolutetly thriller to announce to the community the release of most anticipated **Nuxt module for TresJS** 🎉 .
-
-Special thanks to [NuxtJS](https://nuxtjs.org/) and [DanielRoe](https://twitter.com/danielcroe) for the support and for the amazing work they are doing for the Vue community.
-
-1. Add `@tresjs/nuxt` dependency to your project
-
-```bash
-# Using pnpm
-pnpm add @tresjs/nuxt
-
-# Using yarn
-yarn add @tresjs/nuxt
-
-# Using npm
-npm install @tresjs/nuxt
-```
-
-2. Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
-
-```js
-export default defineNuxtConfig({
-  modules: ["@tresjs/nuxt"],
-});
-```
-
-## What's Nuxt? 🔥
-
-We took advantage of the [Nuxt module system](https://nuxt.com/docs/guide/going-further/modules) to create a module that will allow you to use TresJS in your Nuxt app with 0-to-none configuration enjoying all the DX perks that comes with Nuxt like:
-
-### Auto import components and composables from the TresJS ecosystem 
-
-You don't need to import the components or composables from the TresJS ecosystem anymore, they will be auto-imported for you. This is a huge improvement for the DX, you can just start using the components and composables without worrying about importing them.
-
-You just need to install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.
-
-```bash
-# Using pnpm
-pnpm add @tresjs/cientos @tresjs/post-processing
-```
-
-#### Before 
-
-```vue
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import { EffectComposer, Bloom } from '@tresjs/post-processing'
-const { onLoop } = useRenderLoop()
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <OrbitControls />
-    <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <EffectComposer>
-      <Bloom />
-    </EffectComposer>
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
-  </TresCanvas>
-</template>
-```
-  
-
-#### After 🥹
-
-```vue
-<script setup lang="ts">
-const { onLoop } = useRenderLoop()
-
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <OrbitControls />
-    <TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
-      <TresConeGeometry :args="[1, 1.5, 3]" />
-      <TresMeshToonMaterial color="#82DBC5" />
-    </TresMesh>
-    <EffectComposer>
-      <Bloom />
-    </EffectComposer>
-    <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
-  </TresCanvas>
-</template>
-```
-
-### Client-side only
-
-The `<TresCanvas>` is only loaded in the client-side, so you don't need to worry about **SSR** or **SSG** 😊.
-
-### Vue compiler optimizations ⚙️
-
-Automagically ✨ configure the Vue compiler to recognize the TresJS Components. This is because `<TresCanvas />` component creates a custom renderer for Vue, so we need to tell the outside Vue app to recognize the TresJS components.
-
-Without the module you need to configure the Vue compiler like this:
-
-```ts
-export default defineNuxtConfig({
-  vue: {
-    compilerOptions: {
-      isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas') || tag === 'primitive',
-    },
-  }
-})
-```
-
-See more [here](http://tresjs.org/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS and nuxt, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

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

@@ -1,172 +0,0 @@
----
-sidebar: false
----
-
-# Announcing v2.1.0 🎉
-
-We are excited to announce the release of **TresJS v2.1.0** 🎉 . First release since we open source the project an recieveing such a warm welcome from the vue community. We are so grateful for all the support and feedback we have received so far. More than 225 ⭐️ in the [github repo](https://github.com/Tresjs/tres) in just 2 weeks! 🤯.
-
-This new version comes with exciting new features and improvements in the ecosystem, let's dive in!
-
-## What's hot? 🔥
-
-### Export types and better intellisense 🦾
-
-We are now correctly exporting the types from the core package (thanks to [@userquin](https://github.com/userquin)), this means that you can use the types in your project and get better intellisense. Specially if you are using `moduleResolution: 'bundler'` in your `tsconfig.json`.
-
-#### Before 😨
-
-![Export types core 2.0.0](/blog/tres-core-2-0-0.png)
-
-[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402..0.0)
-
-#### After 🥹
-
-![Export types core 2.1.1](/blog/tres-core-2-1-1.png)
-
-[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402.1.1)
-
-Shoutout to the team behind this amazing tool [Are the types wrong](https://arethetypeswrong.github.io), a must-have for every library author.
-
-### Inherit types from THREE 🤓
-
-We are now inheriting the types from the `three` package instead of generating them on build time. That means that you no longer need to wait for a release of TresJS to get the latest types from ThreeJS which follows our goal of always being up to date with the latest ThreeJS features.
-
-::: tip
-Make sure you have the `@types/three` package installed in your project.
-:::
-
-We took serious inspiration from R3F v9 and how they are handling [the types](https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts), so thanks to [@CodyJasonBennett](https://github.com/CodyJasonBennett) from the Pmndrs team for pointing me in the right direction.
-
-```ts
-type ThreeExports = typeof THREE
-type ThreeInstancesImpl = {
-  [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation
-    ? ThreeElement<ThreeExports[K]>
-    : never
-}
-
-export interface ThreeInstances extends ThreeInstancesImpl {
-  primitive: Omit<ThreeElement<any>, 'args'> & { object: object }
-}
-
-type TresComponents = {
-  [K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>
-}
-
-declare module 'vue' {
-  export type GlobalComponents = TresComponents
-}
-```
-
-This is a simplified version of the code, you can check the full implementation [here](https://github.com/Tresjs/tres/blob/main/src/types/index.ts)
-
-Why is this so great? For example now you get a better intellisense of the `args` property for the instance constructor parameters:
-
-![Args intellisense](/blog/args-intellisense.png)
-
-### Improved HMR
-
-We have improved the HMR experience, now you can update the code without reloading the page. This is a huge improvement for the development experience but still not perfect. For example `OrbitControls` is not working correctly with HMR, so you will have to reload the page to see the changes.
-
-![HMR](/blog/hmr.gif)
-
-### Updated to Vue 3.3.4
-
-We are now using the latest version of [Vue 3.3.4](https://blog.vuejs.org/posts/vue-3-3) "Rurouni Kenshin", this means that you get all the latest features and bug fixes from Vue.
-
-## Ecossystem updates 🌳
-
-### Cientos v2.1.0
-
-We have updated the `@tresjs/cientos` package to v2.1.0, this version comes with a lot of improvements and new features. Check out the [release notes](https://github.com/Tresjs/cientos/releases/tag/2.1.0)
-
-#### Enhanced `OrbitControls`
-
-The abstraction for `OrbitControls` has been improved adding all the properties and methods from the original ThreeJS class such as `enableDamping` and `autoRotate` as well as events like `change` and `start`.
-
-This was highly requested by the community, so thanks to everyone that contributed to this release.
-
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera
-      :args="[45, 1, 0.1, 1000]"
-    />
-    <OrbitControls
-      enable-damping
-      :damping-factor="
-        0.1"
-      @start="onOrbitControlStart"
-    />
-  </TresCanvas>
-</template>
-```
-
-#### Welcome `ContactShadows`
-
-![Contact Shadows](https://cientos.tresjs.org/cientos/contact-shadows.png)
-
-We have added support for [Contact Shadows](https://threejs.org/examples/?q=cont#webgl_shadow_contact). Is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.
-
-```html {11}
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
-    <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
-      <TresMeshNormalMaterial />
-    </Box>
-    <Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
-      <TresMeshNormalMaterial />
-    </Icosahedron>
-    <ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
-    <Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
-      <TresMeshBasicMaterial :color="'#ffffff'" />
-    </Plane>
-    <TresAmbientLight :intensity="1" />
-  </TresCanvas>
-</template>
-```
-
-### Precipitation abstraction
-
-A new abstraction has arrived, the `precipitation` component creates an infinite flow of particles, in combination with different props, this allow you to create, rain/snow/hail and many more effect. Unlock your creativity
-
-![Precipitation](https://cientos.tresjs.org/cientos/precipitation.gif)
-
-```vue
-<template>
-  <TresCanvas>
-    ...
-    <Precipitation :speed="1" :count="2500" :randomness="0.7" />
-    ...
-  </TresCanvas>
-</template>
-```
-
-You can read all the documentation [here](https://cientos.tresjs.org/guide/abstractions/precipitation.html)
-
-### Update parallax mouse abstraction
-
-We have added improvements to `MouseParallax` (previously called PamCameraMouse)
-
-1. No conflicts with controls
-2. New prop ease factor allows you to add smooth movement
-3. Change to a better name
-
-### Improvements in DX
-
-It's also worth mentioning, in cientos we're working hard on improving the developer experience, as we know the details matter, these are some of them:
-
-- Update Vue 3.3.4
-- start of migration to new destructure props
-- Export types and better intellisense
-- Refactor folder structure
-- Creation of feature/bug forms in github for better issues report
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

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

@@ -1,101 +0,0 @@
----
-sidebar: false
----
-
-# Vue Devtools are back on v3.1.0 🎉
-
-We are excited to announce the release of **TresJS v3.1.0**. This release brings back the support for Vue Devtools, which was broken since v2 🤯 thanks to [@enpitsuLin](https://github.com/enpitsuLin)
-
-<video controls>
-    <source src="https://res.cloudinary.com/alvarosaburido/video/upload/v1692768893/Tres/devtools-are-back_cuynao.mp4" type="video/mp4">
-</video>
-
-This is huge for DX since you can now inspect the internal state of the library and the components that are using it. Although, we are still working on improving the experience, so expect more improvements in the future.
-
-## What's hot 🔥?
-
-### Guess who is back? Back again? Vue Devtools are back 🎶
-
-![Vue Devtools](https://media.tenor.com/idcVQVMSDvMAAAAC/again-guess-whos-back-again.gif)
-
-So since v2, the Vue Devtools were broken whenever `<TresCanvas />` was mounted. This is because we were using the custom Renderer API `createApp` to mount a second App inside the `<TresCanvas />` component. This was causing the Vue Devtools to break since it only works with DOM based vue apps (See [issue](https://github.com/vuejs/devtools/issues/2078)).
-
-Now, we are using the `render` function from the custom Renderer API to render the `<TresCanvas />` component, which means that the Vue Devtools are working again 🎉
-
-```ts
-const { render } = createRenderer(nodeOps)
-
-const createInternalComponent = (context: TresContext) => {
-    return defineComponent({
-        setup() {
-            provide('useTres', context)
-            provide('extend', extend)
-            return () => h(Fragment, null, slots?.default ? slots.default() : [])
-        }
-    })
-}
-
-const mountCustomRenderer = (context: TresContext) => {
-    const InternalComponent = createInternalComponent(context)
-    render(h(InternalComponent), scene.value as unknown as TresObject)
-}
-
-mountCustomRenderer(context)
-```
-
-Thanks again to [@enpitsuLin](https://github.com/enpitsuLin) for solving this issue 🙏🥹.
-
-## Re-instancing of THREE Objects
-
-Another important caveheat of Tres was that it was not possible to reactively change the constructor params of a THREE Object via the props `args`. 
-
-### Before 😠
-
-```html
-<script lang="ts" setup>
-const color = ref('#ffffff')
-const intensity = ref(1)
-
-const lightRef = shallowRef<THREE.DirectionalLight>()
-
-watch([color, intensity], ([color, intensity]) => {
-    // this will not work
-    lightRef.value = new THREE.DirectionalLight(color, intensity)
-})
-</script>
-
-<template>
-    <TresDirectionalLight ref="lightRef" :args=[color, intensity] />
-</template>
-```
-
-As you can see, we are trying to re-instance the `THREE.DirectionalLight` object whenever the `color` or `intensity` refs change. So we needed to do it manually by using the `watch` function and re-assigning the template ref `lightRef` value.
-
-### After 😎
-
-```html
-<script lang="ts" setup>
-const color = ref('#ffffff')
-const intensity = ref(1)
-</script>
-
-<template>
-    <TresDirectionalLight :args=[color, intensity] />
-</template>
-```
-
-Now, we can just pass the `color` and `intensity` refs to the `args` prop and Tres will take care of re-instancing the `THREE.DirectionalLight` object whenever the refs change 🤭😉.
-
-## No more `useLegacyLights` warning
-
-Since [threejs v155](https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733) update there was pretty annoying warning on the console.
-
-![annoying useLegacyLights warning](/blog/annoying-warning.png)
-
-And it's GONEEEEEEE! 🎉🎉🎉
-
-## Share your work 🎨
-
-We want to see what you are creating with TresJS, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
-
-Happy coding! 🚀

docs/blog/announcing-v-3.md

@@ -1,109 +0,0 @@
----
-sidebar: false
----
-
-# Announcing v3.0.0 🎉
-
-Already? Yes! We are excited to announce the release of:
-
-- **TresJS v3.0.0**
-- **Cientos v3.0.0**
-
-But you might be wondering, why a major release so soon if we just released 2.x.x not so while ago 🤔? Does it means more breaking changes? 🤯
-
-<div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/ck5JRWob7folZ7d97I" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/nickelodeon-throwback-all-that-kel-ck5JRWob7folZ7d97I">via GIPHY</a></p>
-
-**Short answer no**, don't expect changes so big like the one from `1.x.x` to `2.x.x`, specially for you, the end user.
-
-Then why `3.x`? We have a good reason. The team has been working hard to bring you the best possible experience when using TresJS and authoring new packages that extend the core functionality, so we decided to **re-think the whole internal state management from a new perspective**.
-
-## Bye bye Store, hello Context Provider 🤓
-
-Until now, we were using a `Store` to manage the internal state of the library
-
-```ts
-const state: TresState = shallowReactive({
-  uuid: generateUUID(),
-  camera: undefined,
-  cameras: [],
-  canvas: undefined,
-  scene: undefined,
-  renderer: undefined,
-  aspectRatio: undefined,
-  pointerEventHandler: undefined,
-})
-```
-
-Important things for the abstractions like `camera`, `scene`, `renderer`, etc. were stored in the `Store` and we were using `reactive` and `shallowReactive` to make sure that the changes were propagated to the components that were using them.
-
-And we had some kind of "getters" and "setters" to access/edit the state from the outside, for example, on the Cientos package.
-
-```ts
-function getState(key: string) {
-  return state[key]
-}
-
-function setState(key: string, value: any) {
-  state[key] = value
-}
-```
-
-If a plugin author or a user wanted to create an abstraction around the `core`. They would have to use something like this:
-
-```ts
-const { state } = useTres()
-
-watch(
-  () => state.camera,
-  camera => {
-    // do something with the camera
-  },
-)
-```
-
-But this was far from ideal, authors could potentially mutate the state in a way that could break the library, and we were not able to control that.
-
-Also we experience lot of bugs related to the reactivity system, specially when using `shallowReactive` and `shallowRef` to avoid unnecessary re-renders.
-
-So we decided to **move away from the `Store` and use a `Context Provider` instead** where the state is a plain object with .
-
-```ts
-const toProvide: TresContext = {
-  sizes,
-  scene: shallowRef<Scene>(scene),
-  camera,
-  extend,
-  cameras: readonly(cameras),
-  renderer,
-  controls: ref(null),
-  raycaster: shallowRef(new Raycaster()),
-  setCameraActive,
-}
-
-provide('useTres', toProvide)
-```
-
-So now you can use any property of the state individually, like this:
-
-```html
-<script lang="ts" setup>
-  import { useTresContext } from '@tresjs/core'
-
-  const { camera, scene, renderer } = useTresContext()
-</script>
-```
-
-::: warning
-
-`useTresContext` can be only be used inside of a `TresCanvas` since it acts as the provider for the context data.
-
-:::
-
-See more here [useTresContext](/api/composables.html#usetrescontext-former-usetres).
-
----
-
-Hope you like this new release, we are working hard to bring you the best possible experience when using TresJS.
-
-- Releases https://github.com/Tresjs/tres/releases
-- Cientos https://github.com/Tresjs/cientos/releases

docs/blog/tres-ecosystem-update-8-11-23.md

@@ -1,199 +0,0 @@
----
-sidebar: false
----
-
-# Tres Ecosystem Update 8/11/23
-
-It's exciting that updates are coming out so fast, that we need a more general post about the whole ecosystem news rather than a post for each package updates 😊.
-
-![](https://media.giphy.com/media/ONxw4niC96zwk/giphy.gif)
-
-Lets jump right into it like it was a mountain of leaves. 🍂
-
-## TresJS `v3.5.0`
-
-Core package has been updated to v3.5.0, this update includes a new feature that comes extremely handy when working with gltf models.
-
-### useSeek new methods
-
-Until now the `seek` and `seekByName` function traverses the object and returns the child object with the specified property and value. If no child with the given property and value is found, it returns null and logs a warning.
-
-But it was not possible to retrieve multiple objects with similar name conventions like `"Cloth001"`, `"Cloth002"`, `"Cloth003"`, etc.
-
-![](/blog/seek-all.png)
-
-Now, you can use the new `seekAll` and `seekAllByName` methods to retrieve an array of objects with the specified property and value.
-
-```ts
-import { useSeek } from '@tresjs/core'
-
-const { seekAll, seekAllByName } = useSeek()
-
-const clothes = seekAllByName(model, 'Cloth')
-```
-
-Thanks to [Garret Walker](https://twitter.com/garrlker), [@PatrickByrn](https://github.com/PatrickByrn) and [@not-Ryan](https://github.com/not-Ryan) for their first contributions. 🎉 👏🏻
-
-Check the full changelog [here](https://github.com/Tresjs/tres/releases/tag/3.5.0)
-
-## Cientos v3.6.0
-
-Of course this ecosystem update wouldn't be complete without a new Cientos release. Welcome `v3.6.0` 🎉 to the party. This release includes a new feature and some bug fixes.
-
-### CustomShaderMaterial
-
-A convenient wrapper for creating custom shaders. It's a wrapper around the [three-custom-shader-material](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) library made by [@FarazzShaikh](https://github.com/FarazzShaikh) that makes it easier to extend ThreeJS standard materials with your own shaders.
-
-![](/blog/custom-shader-material.png)
-
-```html
-<script setup lang="ts">
-import {
-  CustomShaderMaterial,
-} from '@tresjs/cientos'
-import vertexShader from './vertex.glsl'
-import fragmentShader from './fragment.glsl'
-
-const texture01 = await useTexture({
-  matcap: '/matcap_01.png',
-})
-<script>
-
-<template>
-  <TresMesh>
-    <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
-    <CustomShaderMaterial
-      base-material="MeshStandardMaterial"
-      :matcap="texture01.matcap"
-      :vertex-shader="vertexShader"
-      :fragment-shader="fragmentShader"
-      :uniforms="{
-        u_Time: { value: 0 },
-        u_WobbleSpeed: { value: 3 },
-        u_WobbleAmplitude: { value: 0.07 },
-        u_WobbleFrequency: { value: 3 },
-      }"
-    />
-  </TresMesh>
-</template>
-```
-
-Thanks to [Francesco Michelini](https://twitter.com/fra_michelini) for this amazing contribution. 🎉 👏🏻
-
-Check the docs [here](https://cientos.tresjs.org/guide/materials/custom-shader-material.html#trescustomshadermaterial)
-
-### Sparkles ✨
-
-A new fancy abstraction `<Sparkles />` makes sparkles on your geometry's vertices – optionally guided by a directional light.
-
-![](/blog/sparkles.png)
-
-Not gonna lie,  I spent hours mesmerized by this effect when reviewing the PR by [@andretchen0](https://github.com/andretchen0). 🤤
-
-```html
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Sparkles, OrbitControls, Torus, Sphere } from '@tresjs/cientos'
-import { shallowRef } from 'vue'
-
-const lightRef = shallowRef()
-
-useRenderLoop().onLoop(({ elapsed }) => {
-  if (lightRef.value) {
-    lightRef.value.position.x = Math.cos(elapsed) * 2.5
-    lightRef.value.position.y = Math.sin(elapsed) * 2.5
-  }
-})
-</script>
-
-<template>
-  <TresCanvas clear-color="#333">
-    <TresPerspectiveCamera :position="[0, 0, 8]" />
-    <TresDirectionalLight ref="lightRef">
-      <Sphere
-        color="white"
-        :scale="0.1"
-      />
-    </TresDirectionalLight>
-    <Torus :args="[1, 0.25, 16, 48]">
-      <TresMeshBasicMaterial color="#222" />
-      <Sparkles :directional-light="lightRef" />
-    </Torus>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-More usage examples in the docs [here](https://cientos.tresjs.org/guide/staging/sparkles.html#sparkles)
-
-### Superformula 
-
-A new shape `<Superformula />` that generates a 3D shape based on the [superformula](https://en.wikipedia.org/wiki/Superformula) equation.
-
-![](/blog/superformula.gif)
-
-
-```html
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Superformula, OrbitControls } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas clear-color="#777">
-    <Superformula
-      :num-arms-b="24"
-      :exp-b="[40, 30, 20]"
-    >
-      <TresMeshNormalMaterial />
-    </Superformula>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-More usage examples in the docs [here](https://cientos.tresjs.org/guide/shapes/superformula.html#superformula)
-
-Thanks [@andretchen0](https://github.com/andretchen0) for another great contribution.
-
-### CSS Transitions on `<Html />`
-
-A highly requested bugfix that allows you to use CSS transitions on the `<Html />` component.
-
-![](/blog/html-css-transitions-fix.gif)
-
-
-```html
-<Html
-  v-bind="state"
-  transform
-  :occlude="[sphereRef]"
->
-  <h1
-    class="text-xs p-0.5 rounded transition-all duration-500"
-    :class="isActive ? 'bg-dark' : 'bg-white'"
-  >
-    Box
-  </h1>
-</Html>
-```
-
-## Time for dessert 🍰
-
-To finish this update, we have a new package in the ecosystem that's near to hit alpha soon. 🎉
-
-![Tresleches package](/blog/tres-leches.png)
-
-When you are building an 3D scene, you often need to fine-tune the position, rotation and scale of your objects. This can be a tedious task, especially when you are working with complex scenes.
-
-Tresleches is the missing VueJS GUI that allows you to easily create controls and monitor things like the `fps` of your scene and manipulate the position of an object, the rotation of a light, etc.
-
-Documentation available on https://tresleches.tresjs.org/
-
-More coming soon... in the next weeks. 😊
-
-## Thanks
-
-Thanks to all the contributors that made this update possible and the community for creating so many amazing showcases with TresJS. 🙏🏻
-
-You can join the community in our [Discord server](https://discord.gg/UCr96AQmWn) or follow us on [Twitter](https://twitter.com/tresjs_dev) to stay up to date with the latest news.

docs/cookbook/load-models.md

@@ -95,7 +95,7 @@ const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
 </script>
 
 <template>
-  <primitive :object="node.AkuAku" />
+  <primitive :object="nodes.AkuAku" />
 </template>
 ```
 :::

docs/cookbook/text-3d.md

@@ -209,8 +209,8 @@ import { Text3D } from '@tresjs/cientos'
 
 We can pass the options as props
 
-```html
-<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />
+```vue
+<Text3D :font="fontPath" :text="'my 3d text'" :size="0.8" />
 ```
 
 in case the options are not provided, the default values will be:
@@ -229,5 +229,5 @@ bevelSegments: 4,
 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 />
+<Text3D :font="fontPath" :text="'my 3d text'" center />
 ```

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

@@ -1,63 +0,0 @@
-# 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/guide/getting-started.md

@@ -79,7 +79,7 @@ Da die Version 2 ein benutzerdefinierter Renderer ist, müssen wir dem `vue-comp
 
 Du musst lediglich Folgendes zu deiner `vite.config.ts`-Datei innerhalb des Vue-Plugins hinzufügen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/de/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Wenn du Vite verwendest, solltest du Folgendes zu deiner `vite.config.ts` hinzufügen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/de/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Füge `@tresjs/nuxt` zum Abschnitt `modules` in `nuxt.config.ts` hinzu.
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/de/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Derzeit gibt es keine native Unterstützung von Vue, um den verwendeten Renderer
 
 Öffne `vite.config.ts` und füge die folgende Konfiguration zum `@vitejs/plugin-vue` hinzu um die Warnung aus der Konsole zu entfernen:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/debug/devtools.md

@@ -10,7 +10,7 @@ One of our goals with TresJS is to offer **the best DX (Developer Experience)**
 
 ## Introducing the Devtools
 
-From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customized inspector tab for the [Official Vue Chrome Devtools](https://devtools.vuejs.org/guide/installation.html) that allows you to inspect your TresJS scenes and components.
+From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customized inspector tab for the [Official Vue Chrome Devtools](https://devtools.vuejs.org/getting-started/installation) that allows you to inspect your TresJS scenes and components.
 
 ![TresJS Devtools](/vue-chrome-devtools.png)
 

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

@@ -1,65 +0,0 @@
-# v-always-look-at 👀 <Badge type="warning" text="deprecated since v4" />
-
-::: warning
-This directive has been removed on the `v4` due incompatibility with the new renderer loop.
-:::
-
-With the new directive v-always-look-at provided by **TresJS**, you can add easily command an [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) to always look at a specific position, this could be passed as a Vector3 or an Array.
-
-## Usage
-
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas, vAlwaysLookAt } from '@tresjs/core'
-import { Box } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
-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 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!
-
-Another advantage is that you can look at an instance in movement, for example with the camera, like so:
-
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop, vAlwaysLookAt } from '@tresjs/core'
-import { Box } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// here we update the position of the sphere and the camera will always follow the object
-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/directives/v-rotate.md

@@ -1,84 +0,0 @@
-# v-rotate  <Badge type="warning" text="deprecated since v4" />
-
-::: warning
-This directive has been removed on the `v4` due incompatibility with the new renderer loop.
-:::
-
-## Problem
-
-When you want to simply add rotation to your mesh, you have to use the template reference, [useRenderLoop](/api/composables#userenderloop) and then assign the axis and the speed, but before check if you mesh is already available:
-
-```vue
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { shallowRef, watch } from 'vue'
-
-const boxRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.x = elapsed
-  }
-})
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresMesh
-      ref="boxRef"
-      :scale="0.5"
-    >
-      <TresBoxGeometry />
-      <TresMesh>
-        <OrbitControls />
-      </TresMesh>
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-
-And is A LOT of code just for a simple rotation right? Normally we need something fast to see if something is working
-
-## Usage
-
-With the new directive v-rotate provided by **TresJS**, you can do this by just adding `v-rotate` to the instance.
-
-```vue{2,8}
-<script setup lang="ts">
-import { vRotate } from '@tresjs/core'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresMesh
-      v-rotate // 😍
-    >
-      <TresBoxGeometry />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```
-By default `v-rotate` uses [Quaternions](https://threejs.org/docs/index.html?q=quater#api/en/math/Quaternion) so you don't have to worry by [Gimbal Lock](https://en.wikipedia.org/wiki/Gimbal_lock), or check if you mesh is available in the first frames.
-
-## Modifiers
-
-You can control the axis and the rotation speed by adding modifiers
-
-```vue{2,8}
-<script setup lang="ts">
-import { vRotate } from '@tresjs/core'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresMesh
-      v-rotate:x.y="0.1" // the axis will be x and y with a speed of 0.1
-    >
-      <TresBoxGeometry />
-    </TresMesh>
-  </TresCanvas>
-</template>
-```

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

@@ -1,61 +0,0 @@
-# v-always-look-at 👀
-
-Con la nueva directiva v-always-look-at proporcionada por **TresJS**, puedes agregar fácilmente un comando [Object3D](https://tresjs.org/docs/index.html?q=object#api/en /core/Object3D) para mirar siempre una posición específica, esto podría pasarse como Vector3 o Array.
-
-## Uso
-
-```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>
-```
-No importa dónde se mueva la caja, siempre se observará la posición [0,0,0]
-
-### ¿Por qué no utilizar el método integrado de revisión?
-
-Podrías preguntar, esto está bien, pero puedo usar el método `:look-at` directamente en el componente, ¿por qué debería necesitar esto?
-
-La respuesta es que con el método `:look-at` se te indicará mirar esa posición solo una vez, cuando la instancia esté montada, luego si el objeto cambia esto no se actualizará.
-
-### ¡Puedes observar otra instancia también!
-
-Otra ventaja es que puedes observar una instancia en movimiento, por ejemplo con la cámara, así:
-
-```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()
-
-// here we update the position of the sphere and the camera will always follow the object
-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/es/guide/getting-started.md

@@ -79,7 +79,7 @@ Dado que la versión 2 es un renderizador personalizado, necesitamos informar al
 
 Solo necesitas agregar esto a tu archivo `vite.config.ts` dentro del plugin de Vue:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/es/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Si estás utilizando Vite, debes agregar lo siguiente a tu `vite.config.ts`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/es/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Agrega `@tresjs/nuxt` a la sección `modules` de `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/es/guide/troubleshooting.md

@@ -60,7 +60,7 @@ En este momento, no hay soporte nativo de Vue para definir el renderizador utili
 
 Ve a tu archivo `vite.config.ts` y agrega la siguiente configuración al `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

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

@@ -1,61 +0,0 @@
-# v-always-look-at 👀
-
- Avec la nouvelle directive v-always-look-at fournie par **TresJS**, vous pouvez facilement ajouter une commande à un [Objet 3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) pour toujours regarder une position spécifique, cela pourrait être passé en tant que Vector3 ou Array..
-
-## Usage
-
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
-Peu importe où la boîte se déplace, elle regardera toujours la position [0,0,0]
-
-### Pourquoi ne pas utiliser la méthode intégrée look-at?
-
-Vous pourriez demander, c'est bien mais je peux utiliser la méthode `:look-at` directement dans le composant, pourquoi aurais-je besoin de ça?
-
-La réponse est qu'avec la méthode `:look-at`, vous indiquerez de regarder cette position une seule fois, lorsque l'instance est montée, puis si l'objet change, il ne sera pas mis à jour.
-
-### Vous pouvez également consulter une autre instance!
-
-Un autre avantage est que vous pouvez regarder une instance en mouvement, par exemple avec la caméra, comme ceci:
-
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// ici nous mettons à jour la position de la sphère et la caméra suivra toujours l'objet
-onLoop(({ elapsed }) => {
-  if (sphereRef.value) {
-    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
-  }
-})
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]"
-        v-always-look-at="sphereRef"
-      />
-      <Sphere
-        ref="sphereRef"
-        :scale="0.5"
-      />
-  </TresCanvas>
-</template>
-```

docs/fr/guide/getting-started.md

@@ -79,7 +79,7 @@ Depuis que v2 es un moteur de rendu personnalisé, il nous faut informer le `vue
 
 Vous devez seulement ajouter ceci à votre `vite.config.ts` dans le plugin Vue:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/fr/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Si vous utilisez Vite, vous devez ajoutez ceci à votre `vite.config.ts`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({
@@ -63,9 +63,9 @@ Ceci est nécessaire afin que le compilateur de template fonctionne avec le mote
 
 ## Essayer en ligne
 
-### Sandbox
+### Playground
 
-Vous pouvez essayer TresJS en ligne en utilisant la [sandbox](https://play.tresjs.org/) officielle. Testez ici:
+Vous pouvez essayer TresJS en ligne en utilisant la [playground](https://play.tresjs.org/) officielle. Testez ici:
 
 <iframe src="https://play.tresjs.org/" class="w-full rounded shadow-lg outline-none border-none aspect-4/3"></iframe>
 
@@ -77,7 +77,7 @@ Nous avons un nouveau starter [StackBlitz](https://stackblitz.com/) afin d'essay
 
 <StackBlitzEmbed projectId="tresjs-basic" />
 
-## Playground
+## Labs
 
 Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez [ici](https://play.tresjs.org/).
 

docs/fr/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 Ajoutez `@tresjs/nuxt` à la section `modules` de votre `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/fr/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Actuellement, il n'est pas possible de définir nativement un autre moteur de re
 
 Dans votre `vite.config.ts`, ajoutez la configuration pour le plugin `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/guide/getting-started.md

@@ -79,7 +79,7 @@ Since v2 is a custom renderer, we need to let the `vue-compiler` of your app kno
 
 You just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 If you are using Vite, you just need to import and add the `templateCompilerOptions` from TresJS to your `vite.config.ts` inside of the vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
  Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/guide/troubleshooting.md

@@ -60,7 +60,7 @@ At this moment, there is no native Vue support to define the renderer used on th
 
 Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

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

@@ -1,61 +0,0 @@
-# v-always-look-at 👀
-
-Met de nieuwe directive v-always-look-at aangeboden door **TresJS**, kunt u eenvoudig een opdracht [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) toevoegen om altijd naar een specifieke positie te kijken, dit kan worden doorgegeven als een Vector3 of een Array.
-
-## Gebruik
-
-```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>
-```
-Het maakt niet uit waar de 'Box'-beweging naartoe gaat, er wordt altijd naar de positie [0,0,0] gekeken
-
-### Waarom zou u niet de ingebouwde methode 'look-at' gebruiken?
-
-Je zou kunnen vragen: dit is prima, maar ik kan de `:look-at`-methode rechtstreeks in de component gebruiken, waarom zou ik dit nodig hebben?
-
-Het antwoord is dat je met de methode `:look-at` aangeeft dat je slechts één keer naar die positie wilt kijken, wanneer de instantie is aangekoppeld. Als het object verandert, wordt dit niet bijgewerkt.
-
-### Je kunt ook naar een andere instantie kijken!
-
-Een ander voordeel is dat je bijvoorbeeld met de camera een bewegende instantie als volgt kunt bekijken:
-
-```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()
-
-// hier werken we de positie van de bol bij en zal de camera het object altijd volgen
-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/nl/guide/getting-started.md

@@ -79,7 +79,7 @@ Omdat v2 een custom renderer is, moeten we de `vue-compiler` van uw app laten we
 
 Je hoeft alleen maar de `templateCompilerOptions` van TresJS te importeren en toe te voegen aan uw `vite.config.ts` in de vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/nl/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 Als je Vite gebruikt, dan hoef je alleen `templateCompilerOptions` toe te voegen en te importeren van TresJS asan je `vite.config.ts`in de vue plugin:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/nl/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
  Voeg `@tresjs/nuxt` toe aan de `modules` sectie van `nuxt.config.ts`
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/nl/guide/troubleshooting.md

@@ -60,7 +60,7 @@ Op dit moment is er geen native Vue-ondersteuning om de renderer te definiëren
 
 Ga naar je `vite.config.ts` en voeg de volgende configuratie toe aan `@vitejs/plugin-vue`:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

docs/package.json

@@ -10,12 +10,13 @@
   },
   "dependencies": {
     "@tresjs/core": "workspace:^",
-    "tweakpane": "^4.0.4"
+    "tweakpane": "^4.0.5"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/mdi": "^1.2.0",
-    "unocss": "^0.62.3",
-    "vite-svg-loader": "^5.1.0"
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/mdi": "^1.2.2",
+    "unocss": "^0.65.2",
+    "vite-svg-loader": "^5.1.0",
+    "vitepress-plugin-group-icons": "^1.3.2"
   }
 }

docs/vite.config.ts

@@ -3,6 +3,7 @@ import Unocss from 'unocss/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import svgLoader from 'vite-svg-loader'
+import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 
 export default defineConfig({
   plugins: [
@@ -29,5 +30,6 @@ export default defineConfig({
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       dts: 'components.d.ts',
     }),
+    groupIconVitePlugin(),
   ],
 })

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

@@ -1,61 +0,0 @@
-# v-always-look-at 👀
-
-使用 **TresJS** 提供的新指令 `v-always-look-at`，您可以轻松地使 [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) 始终朝向特定位置，可以传入 Vector3 对象或数组。
-
-## 推荐使用
-
-```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>
-```
-无论 Box 移动到何处，它都将始终朝向位置 [0,0,0]。
-
-### 为什么不使用内置的 look-at 方法呢？
-
-您可能会问，我可以直接在组件中使用 `:look-at` 方法，为什么我需要这个呢？
-
-答案是使用 `:look-at` 方法时，您只会在实例挂载时指示其一次性朝向该位置，然后如果对象更改，它将不会更新。
-
-### 您还可以查看其他实例！
-
-另一个优势是您可以查看一个在移动中的实例，例如使用相机，如下所示：
-
-```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()
-
-// 在这里，我们更新了球体的位置，相机将始终跟随该对象
-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/zh/guide/getting-started.md

@@ -79,7 +79,7 @@ import { TresCanvas } from '@tresjs/core'
 
 您只需将此添加到 vue 插件中的 `vite.config.ts`：
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/zh/guide/index.md

@@ -46,7 +46,7 @@ pnpm add @types/three -D
 
 如果你使用 Vite，你需要在你的 `vite.config.ts` 中添加下面的配置:
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({

docs/zh/guide/nuxt.md

@@ -37,7 +37,7 @@ yarn add three @tresjs/nuxt
 
 将 `@tresjs/nuxt` 添加到 `nuxt.config.ts` 的 `module` 部分
 
-```js
+```js [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@tresjs/nuxt'],
 })

docs/zh/guide/troubleshooting.md

@@ -60,7 +60,7 @@ body {
 
 在你的 `vite.config.ts` 中将以下配置添加到 `@vitejs/plugin-vue`：
 
-```ts
+```ts [vite.config.ts]
 import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

eslint.config.js

@@ -1,9 +1,4 @@
 import { tresLintConfig } from '@tresjs/eslint-config'
 
 export default tresLintConfig({
-  ignores: ['dist', 'node_modules', 'public', '.github', 'docs/blog', 'sponsorkit'],
-}, {
-  rules: {
-    'style/max-statements-per-line': 'off',
-  },
 })

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "4.2.10",
-  "packageManager": "pnpm@9.1.4",
+  "version": "4.3.2",
+  "packageManager": "pnpm@9.15.5",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "cd playground/vue && npm run dev",
-    "dev:nuxt": "cd playground/nuxt && npm run dev",
+    "dev": "pnpm --filter='./playground/vue' dev",
+    "dev:nuxt": "pnpm --filter='./playground/nuxt' dev",
     "build": "vite build",
     "test": "vitest --silent",
     "test:noisy": "vitest",
@@ -72,49 +72,48 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^3.2.0",
-    "@vue/devtools-api": "^7.4.5",
-    "@vueuse/core": "^11.1.0"
+    "@vue/devtools-api": "^6.6.3",
+    "@vueuse/core": "^12.0.0"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@release-it/conventional-changelog": "^9.0.3",
     "@stackblitz/sdk": "^1.11.0",
-    "@tresjs/cientos": "4.0.2",
-    "@tresjs/eslint-config": "^1.3.1",
-    "@types/three": "^0.168.0",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@tresjs/cientos": "4.0.3",
+    "@tresjs/eslint-config": "^1.4.0",
+    "@types/three": "^0.171.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.10.0",
-    "eslint-plugin-vue": "^9.28.0",
-    "esno": "^4.7.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "esno": "^4.8.0",
     "gsap": "^3.12.5",
-    "husky": "^9.1.6",
-    "jsdom": "^25.0.0",
+    "jsdom": "^25.0.1",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.2",
-    "release-it": "^17.5.0",
+    "release-it": "^17.10.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sponsorkit": "^0.15.5",
-    "three": "^0.168.0",
-    "unocss": "^0.62.4",
-    "unplugin": "^1.14.1",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.6",
+    "sponsorkit": "^0.16.2",
+    "three": "^0.171.0",
+    "unocss": "^0.65.2",
+    "unplugin": "^2.1.0",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.0.5",
     "vite-plugin-banner": "^0.8.0",
-    "vite-plugin-dts": "4.2.1",
-    "vite-plugin-inspect": "^0.8.7",
+    "vite-plugin-dts": "4.4.0",
+    "vite-plugin-inspect": "^0.10.4",
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.3.4",
-    "vitest": "^2.1.1",
-    "vue": "3.5.6",
+    "vitepress": "1.5.0",
+    "vitest": "2.1.8",
+    "vue": "3.5.13",
     "vue-demi": "^0.14.10"
   }
 }

playground/.eslintrc-auto-import.json

@@ -0,0 +1,67 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

playground/nuxt/.github/FUNDING.yml

@@ -1,2 +0,0 @@
-github: [alvarosabu]
-ko_fi: alvarosaburido

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

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

playground/nuxt/.github/workflows/lint-pr.yml

@@ -1,17 +0,0 @@
-name: Lint PR
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - edited
-      - synchronize
-
-jobs:
-  main:
-    name: Validate PR title
-    runs-on: ubuntu-latest
-    steps:
-      - uses: amannn/action-semantic-pull-request@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

playground/nuxt/.gitignore

@@ -1,23 +0,0 @@
-# Nuxt dev/build outputs
-.output
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
-# Logs
-logs
-*.log
-
-# Misc
-.DS_Store
-.fleet
-.idea
-
-# Local env files
-.env
-.env.*
-!.env.example

playground/nuxt/.npmrc

@@ -1,2 +0,0 @@
-shamefully-hoist=true
-strict-peer-dependencies=false

playground/nuxt/.stackblitzrc

@@ -1,3 +0,0 @@
-{
-  "installDependencies": true
-}

playground/nuxt/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

playground/nuxt/README.md

@@ -1,67 +0,0 @@
-![repo-banner](/public/repo-banner.png)
-
-# TresJS 🚀 Starter + Nuxt
-
-> Quick start repo for [Nuxt](https://nuxt.com) projects with [TresJS](https://tresjs.org) integration via  [`@tresjs/nuxt` module](https://tresjs.org/guide/nuxt.html).
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

playground/nuxt/app.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
-const gl = {
-  clearColor: '#c0ffee',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-</script>
-
-<template>
-  <div style="height: 100vh">
-    <TresCanvas v-bind="gl">
-      <TheExperience />
-    </TresCanvas>
-  </div>
-</template>
-
-<style>
-html,
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-</style>

playground/nuxt/components/EnvironmentLocal.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { LoaderProto } from '@tresjs/core'
-import { useLoader, useTresContext } from '@tresjs/core'
-import { CubeReflectionMapping, type CubeTexture, CubeTextureLoader, EquirectangularReflectionMapping, type Texture } from 'three'
-import { RGBELoader } from 'three-stdlib'
-
-/* const files = ref(['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']) */
-const files = ref('venice/venice_sunset_1k.hdr')
-const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
-const texture: Ref<Texture | CubeTexture | null> = ref(null)
-
-const { scene } = useTresContext()
-
-const isCubeMap = computed(() => Array.isArray((files as Ref<string[]>).value))
-const result = ref()
-const loader = computed(() => isCubeMap.value ? CubeTextureLoader as unknown as LoaderProto<CubeTexture | RGBELoader> : RGBELoader as unknown as LoaderProto<CubeTexture | RGBELoader>)
-
-result.value = await useLoader<CubeTexture | RGBELoader>(
-  loader.value,
-  isCubeMap.value ? [...unref(files)] : unref(files),
-  (loader: any) => {
-    if (path) { loader.setPath(unref(path)) }
-    /* if (colorSpace) loader.colorSpace = colorSpace */
-  },
-)
-if (result.value) {
-  texture.value = result.value
-  if (texture.value) {
-    texture.value.mapping = isCubeMap.value ? CubeReflectionMapping : EquirectangularReflectionMapping
-    scene.value.environment = texture.value
-    scene.value.background = texture.value
-  }
-}
-</script>
-
-<template>
-  <TresMesh>
-    <TresSphereGeometry args="[1, 64, 32]" />
-    <TresMeshStandardMaterial :envMap="texture" />
-  </TresMesh>
-</template>

playground/nuxt/components/TheExperience.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <TresPerspectiveCamera
-    :position="[-5.3, 8.3, 10.6]"
-    :look-at="[0, 0, 0]"
-  />
-  <Suspense>
-    <EnvironmentLocal />
-  </Suspense>
-  <TresMesh :position="[0, 2, 0]">
-    <TresBoxGeometry />
-    <TresMeshNormalMaterial />
-  </TresMesh>
-  <TresGridHelper />
-  <OrbitControls />
-</template>

playground/nuxt/nuxt.config.ts

@@ -1,21 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-import { resolve } from 'pathe'
-
-export default defineNuxtConfig({
-  modules: ['@tresjs/nuxt'],
-  devtools: { enabled: true },
-
-  vite: {
-    resolve: {
-      alias: {
-        '@tresjs/core': resolve(__dirname, '../../src/'),
-      },
-    },
-  },
-
-  tres: {
-    glsl: true,
-  },
-
-  compatibilityDate: '2024-08-30',
-})

playground/nuxt/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@tresjs/nuxt-starter",
-  "type": "module",
-  "version": "1.0.0",
-  "description": "Quick Nuxt starter template for TresJS",
-  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "tresjs",
-    "webgl",
-    "vite",
-    "3d",
-    "threejs",
-    "three",
-    "threejs-vue"
-  ],
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "devDependencies": {
-    "@nuxt/devtools": "latest",
-    "@tresjs/cientos": "^4.0.0",
-    "@tresjs/core": "workspace:^",
-    "@tresjs/nuxt": "3.0.4",
-    "@tresjs/post-processing": "^0.7.1",
-    "@types/node": "^22.5.1",
-    "@types/three": "^0.167.2",
-    "nuxt": "^3.5.2",
-    "three": "^0.168.0"
-  }
-}

playground/nuxt/public/favicon-dark.svg

@@ -1,6 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="32" height="32" fill="white"/>
-<path d="M11.6854 4.42916C12.0738 3.78182 13.012 3.78182 13.4004 4.42915L19.1771 14.0569C19.577 14.7235 19.0969 15.5714 18.3196 15.5714H6.76624C5.98894 15.5714 5.50883 14.7235 5.90875 14.0569L11.6854 4.42916Z" fill="#82DBC5"/>
-<path d="M15.6857 11.5429C15.6857 10.9906 16.1334 10.5429 16.6857 10.5429H26C26.5522 10.5429 27 10.9906 27 11.5429V20.8572C27 21.4094 26.5522 21.8572 26 21.8572H16.6857C16.1334 21.8572 15.6857 21.4094 15.6857 20.8572V11.5429Z" fill="#4F4F4F"/>
-<circle cx="16" cy="23" r="6" fill="#EFAC35"/>
-</svg>

playground/nuxt/public/favicon.svg

@@ -1,5 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.6854 3.42916C12.0738 2.78182 13.012 2.78182 13.4004 3.42915L19.1771 13.0569C19.577 13.7235 19.0969 14.5714 18.3196 14.5714H6.76624C5.98894 14.5714 5.50883 13.7235 5.90875 13.0569L11.6854 3.42916Z" fill="#82DBC5"/>
-<path d="M15.6857 10.5429C15.6857 9.99059 16.1334 9.54288 16.6857 9.54288H26C26.5522 9.54288 27 9.99059 27 10.5429V19.8572C27 20.4094 26.5522 20.8572 26 20.8572H16.6857C16.1334 20.8572 15.6857 20.4094 15.6857 19.8572V10.5429Z" fill="#4F4F4F"/>
-<circle cx="16" cy="22" r="6" fill="#EFAC35"/>
-</svg>

playground/nuxt/renovate.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
-}

playground/nuxt/server/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../.nuxt/tsconfig.server.json"
-}

playground/nuxt/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
-}

playground/vue/.eslintrc-auto-import.json

@@ -62,6 +62,13 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
   }
 }

playground/vue/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -35,6 +36,7 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -52,7 +54,10 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -61,6 +66,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

playground/vue/components.d.ts

@@ -7,28 +7,18 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/AkuAku.vue')['default']
     AnimatedObjectUseUpdate: typeof import('./src/components/AnimatedObjectUseUpdate.vue')['default']
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
-    Box: typeof import('./src/components/Box.vue')['default']
-    DirectiveSubComponent: typeof import('./src/components/DirectiveSubComponent.vue')['default']
     DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
-    FBOCube: typeof import('./src/components/FBOCube.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
-    LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
-    Overlay: typeof import('./src/components/Overlay.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
     PbrSphere: typeof import('./src/components/PbrSphere.vue')['default']
+    ProvideBridge: typeof import('./src/components/ProvideBridge.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default']
     TestResult: typeof import('./src/components/TestResult.vue')['default']
     Tests: typeof import('./src/components/Tests.vue')['default']
-    TestSphere: typeof import('./src/components/TestSphere.vue')['default']
-    Text3D: typeof import('./src/components/Text3D.vue')['default']
-    TheCameraOperator: typeof import('./src/components/TheCameraOperator.vue')['default']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']
     TheSphere: typeof import('./src/components/TheSphere.vue')['default']
-    UgglyBunny: typeof import('./src/components/UgglyBunny.vue')['default']
   }
 }

playground/vue/package.json

@@ -9,17 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "4.0.2",
+    "@tresjs/cientos": "4.0.3",
     "@tresjs/core": "workspace:^",
-    "vue-router": "^4.4.3"
+    "@tresjs/leches": "https://pkg.pr.new/@tresjs/leches@9ad0cd3",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "unplugin-auto-import": "^0.18.2",
-    "vite-plugin-glsl": "^1.2.1",
+    "unplugin-auto-import": "^0.19.0",
+    "vite-plugin-glsl": "^1.3.1",
     "vite-plugin-qrcode": "^0.2.3",
-    "vite-plugin-vue-devtools": "7.4.3",
-    "vue-tsc": "^2.1.4"
+    "vite-plugin-vue-devtools": "7.6.8",
+    "vue-tsc": "^2.1.10"
   }
 }

playground/vue/src/App.vue

@@ -8,6 +8,10 @@ function setBodyClass(routeName: string) {
   document.body.className = routeName
 }
 watch([route], () => setBodyClass(route.name?.toString() ?? ''))
+provide('v-route', route)
+provide('useTres', {
+  message: `Im not the real useTres, but I can provide you with some data!`,
+})
 </script>
 
 <template>

playground/vue/src/components/AnimatedObjectUseUpdate.vue

@@ -23,15 +23,12 @@ onBeforeRender(() => {
   log2()
 }, -1)
 
-const { areUpdatesPaused } = useControls({
+const { areUpdatesPaused, unregister } = useControls({
   areUpdatesPaused: {
     value: false,
     type: 'boolean',
     label: 'Pause Updates',
   },
-})
-
-const { unregister } = useControls({
   unregister: {
     value: false,
     type: 'boolean',

playground/vue/src/components/ProvideBridge.vue

@@ -0,0 +1,20 @@
+<!-- ProvideBridge.vue -->
+<script setup lang="ts">
+import { provide } from 'vue'
+
+interface Props {
+  keysValues: Record<string, any>
+}
+const props = withDefaults(defineProps<Props>(), {
+  keysValues: () => ({}),
+})
+for (const [key, value] of Object.entries(props.keysValues)) {
+  provide(key, value)
+}
+</script>
+
+<template>
+  <TresGroup>
+    <slot></slot>
+  </TresGroup>
+</template>

playground/vue/src/pages/advanced/MemoryTresObjects.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import type { Group, Material } from 'three'
+import { BoxGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three'
+import { onUnmounted, ref } from 'vue'
+
+const toggleMax = 400
+const numObjectsMax = 2000
+const startTimeMS = ref(0)
+const width = 900
+const height = 600
+const toggleCount = ref(0)
+const showTres = ref(false)
+const showVueThree = ref(false)
+const msg = ref('Click Start Test to begin.')
+const r = ref(null)
+
+let intervalId: ReturnType<typeof setInterval>
+const testVueThree = (() => {
+  let renderer: WebGLRenderer | null = null
+  let scene: Scene | null = null
+  let camera: PerspectiveCamera | null = null
+  let frameCount = 0
+  function testVueThree() {
+    if (toggleCount.value < toggleMax) {
+      if (r.value) {
+        if (renderer) {
+          if (frameCount < 2) {
+            frameCount++
+            renderer.render(scene!, camera!)
+          }
+          else {
+            camera?.removeFromParent()
+            scene!.children.forEach((m) => { ((m as Mesh).material as Material).dispose(); (m as Mesh).geometry.dispose() })
+            renderer.dispose()
+            frameCount = 0
+            camera = null
+            scene = null
+            renderer = null
+            showVueThree.value = false
+            toggleCount.value++
+          }
+        }
+        else {
+          renderer = new WebGLRenderer({ canvas: r.value })
+          renderer.setSize(width, height)
+          renderer.setClearColor(new Color('#EEE'))
+          scene = new Scene()
+          camera = new PerspectiveCamera()
+          camera.position.x = 10
+          camera.position.y = 10
+          camera.lookAt(new Vector3(0, 0, 0))
+          for (let i = 0; i < numObjectsMax; i++) {
+            scene.add(new Mesh(new BoxGeometry(), new MeshBasicMaterial()))
+          }
+          scene.add(camera)
+          renderer.render(scene, camera)
+        }
+      }
+      else if (!showVueThree.value) {
+        showVueThree.value = true
+      }
+    }
+    else {
+      const elapsedSec = (Date.now() - startTimeMS.value) / 1000
+      msg.value = `Plain Vue/THREE test completed in ${elapsedSec} seconds.`
+      clearInterval(intervalId)
+    }
+  }
+  return testVueThree
+})()
+const testTres = (() => {
+  let frameCount = 0
+  return () => {
+    if (toggleCount.value < toggleMax) {
+      if (r.value && frameCount < 2) {
+        // NOTE: Wait until Tres has actually rendered before
+        // removing the canvas.
+        ((r.value as Group).children[0] as Mesh).onAfterRender = () => { frameCount++ }
+      }
+      else {
+        if (frameCount < 1) {
+          showTres.value = true
+        }
+        else {
+          toggleCount.value++
+          showTres.value = false
+          frameCount = 0
+        }
+      }
+    }
+    else {
+      const elapsedSec = (Date.now() - startTimeMS.value) / 1000
+      msg.value = `Tres test completed in ${elapsedSec} seconds.`
+      clearInterval(intervalId)
+    }
+  }
+})()
+const isStarted = ref(false)
+const startTestTres = () => {
+  isStarted.value = true
+  startTimeMS.value = Date.now()
+  // NOTE: Using `setInterval`; it typically will keep
+  // running in situations were `requestAnimationFrame` will pause.
+  intervalId = setInterval(testTres, 1000 / 60)
+  msg.value = 'Test is running...'
+}
+const startTestVueThree = () => {
+  isStarted.value = true
+  startTimeMS.value = Date.now()
+  // NOTE: Using `setInterval`; it typically will keep
+  // running in situations were `requestAnimationFrame` will pause.
+  intervalId = setInterval(testVueThree, 1000 / 60)
+  msg.value = 'Test is running...'
+}
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>Memory test: Canvases with objects – Tres vs Plain Vue/THREE</h1>
+    <p><span style="color: red">IMPORTANT</span> Epileptic warning: the tests run on this page cause the screen to flash rapidly.</p>
+    <h2>Setup</h2>
+    <p>This test will create and remove {{ toggleMax }} canvas instances with {{ numObjectsMax }} objects/materials/geometries each.</p>
+    <h2>Note</h2>
+    <ul>
+      <li>These tests are intended to help spot memory leaks.</li>
+      <li>Faster/slower test duration does not indicate a problem.</li>
+    </ul>
+    <h2>Status</h2>
+    <p>{{ msg }}</p>
+    <p>Number of canvases created: {{ toggleCount }} / {{ toggleMax }}</p>
+    <button
+      v-if="!isStarted"
+      style="padding: 8px 16px; margin-top: 10px;"
+      @click="startTestTres"
+    >
+      Start Tres test
+    </button>
+
+    <button
+      v-if="!isStarted"
+      style="padding: 8px 16px; margin-top: 10px;"
+      @click="startTestVueThree"
+    >
+      Start plain Vue/THREE test
+    </button>
+  </OverlayInfo>
+  <div v-if="showTres" :style="{ width: `${width}px`, height: `${height}px` }">
+    <TresCanvas clear-color="#EEE">
+      <TresGroup ref="r">
+        <TresMesh v-for="_, i of Array.from({ length: numObjectsMax })" :key="i">
+          <TresMeshBasicMaterial />
+          <TresBoxGeometry />
+        </TresMesh>
+      </TresGroup>
+    </TresCanvas>
+  </div>
+  <div v-if="showVueThree">
+    <canvas ref="r" clear-color="black"></canvas>
+  </div>
+</template>