From db9301421d4e48ed3c1879167d46e37ce9fb4ff0 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Thu, 6 Feb 2025 08:49:26 +0100
Subject: [PATCH 1/3] docs: remove deprecated v-always-look-at and v-rotate
 directives (#920)

---
 docs/.vitepress/config/de.ts              |  2 -
 docs/.vitepress/config/es.ts              |  2 -
 docs/.vitepress/config/fr.ts              |  2 -
 docs/.vitepress/config/nl.ts              |  2 -
 docs/.vitepress/config/zh.ts              |  2 -
 docs/de/directives/v-always-look-at.md    | 63 -----------------
 docs/directives/v-always-look-at.md       | 65 ------------------
 docs/directives/v-rotate.md               | 84 -----------------------
 docs/es/directives/v-always-look-at.md    | 61 ----------------
 docs/fr/directives/v-always-look-at.md    | 61 ----------------
 docs/nl/directives/v-always-look-at.md    | 61 ----------------
 docs/zh/directives/v-always-look-at.md    | 61 ----------------
 playground/vue/src/pages/basic/Lights.vue |  1 -
 13 files changed, 467 deletions(-)
 delete mode 100644 docs/de/directives/v-always-look-at.md
 delete mode 100644 docs/directives/v-always-look-at.md
 delete mode 100644 docs/directives/v-rotate.md
 delete mode 100644 docs/es/directives/v-always-look-at.md
 delete mode 100644 docs/fr/directives/v-always-look-at.md
 delete mode 100644 docs/nl/directives/v-always-look-at.md
 delete mode 100644 docs/zh/directives/v-always-look-at.md

diff --git a/docs/.vitepress/config/de.ts b/docs/.vitepress/config/de.ts
index 2871a8958..7e94f75c1 100644
--- a/docs/.vitepress/config/de.ts
+++ b/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' },
         ],
       },
       {
diff --git a/docs/.vitepress/config/es.ts b/docs/.vitepress/config/es.ts
index efed573fa..d81a3e715 100644
--- a/docs/.vitepress/config/es.ts
+++ b/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' },
         ],
       },
       {
diff --git a/docs/.vitepress/config/fr.ts b/docs/.vitepress/config/fr.ts
index f42e58c2f..971dd3e20 100644
--- a/docs/.vitepress/config/fr.ts
+++ b/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' },
         ],
       },
       {
diff --git a/docs/.vitepress/config/nl.ts b/docs/.vitepress/config/nl.ts
index 9ea542546..1a9e04dc5 100644
--- a/docs/.vitepress/config/nl.ts
+++ b/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' },
         ],
       },
       {
diff --git a/docs/.vitepress/config/zh.ts b/docs/.vitepress/config/zh.ts
index 77151e464..32b12e034 100644
--- a/docs/.vitepress/config/zh.ts
+++ b/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' },
         ],
       },
       {
diff --git a/docs/de/directives/v-always-look-at.md b/docs/de/directives/v-always-look-at.md
deleted file mode 100644
index 2ee602538..000000000
--- a/docs/de/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/directives/v-always-look-at.md b/docs/directives/v-always-look-at.md
deleted file mode 100644
index b0c97e1f2..000000000
--- a/docs/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/directives/v-rotate.md b/docs/directives/v-rotate.md
deleted file mode 100644
index 11183ca9b..000000000
--- a/docs/directives/v-rotate.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/es/directives/v-always-look-at.md b/docs/es/directives/v-always-look-at.md
deleted file mode 100644
index 81448783c..000000000
--- a/docs/es/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/fr/directives/v-always-look-at.md b/docs/fr/directives/v-always-look-at.md
deleted file mode 100644
index 3b1ae94ee..000000000
--- a/docs/fr/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/nl/directives/v-always-look-at.md b/docs/nl/directives/v-always-look-at.md
deleted file mode 100644
index ba1cea5db..000000000
--- a/docs/nl/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/docs/zh/directives/v-always-look-at.md b/docs/zh/directives/v-always-look-at.md
deleted file mode 100644
index 9825e275f..000000000
--- a/docs/zh/directives/v-always-look-at.md
+++ /dev/null
@@ -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>
-```
diff --git a/playground/vue/src/pages/basic/Lights.vue b/playground/vue/src/pages/basic/Lights.vue
index 693b33d11..7c043a57f 100644
--- a/playground/vue/src/pages/basic/Lights.vue
+++ b/playground/vue/src/pages/basic/Lights.vue
@@ -45,7 +45,6 @@ const planeRef: Ref<TresObject | null> = ref(null)
       <TresMeshToonMaterial />
     </TresMesh>
     <TresMesh
-      v-rotate.x="0.005"
       :position="[-2, 2, 0]"
     >
       <TresBoxGeometry :args="[1, 1, 1]" />

From 45f215cc9a917226aaef2a93f525c13f003a4c43 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Thu, 6 Feb 2025 08:50:34 +0100
Subject: [PATCH 2/3] chore(playground): add memory test comparing Tres and
 plain Vue/THREE canvas performance (#917)

---
 .../src/pages/advanced/MemoryTresObjects.vue  | 174 +++++++++++++-----
 1 file changed, 133 insertions(+), 41 deletions(-)

diff --git a/playground/vue/src/pages/advanced/MemoryTresObjects.vue b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
index 8d36ee55a..80ca49af6 100644
--- a/playground/vue/src/pages/advanced/MemoryTresObjects.vue
+++ b/playground/vue/src/pages/advanced/MemoryTresObjects.vue
@@ -1,72 +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 = 1000
+const toggleMax = 400
 const numObjectsMax = 2000
-const startTimeMS = Date.now()
-
+const startTimeMS = ref(0)
+const width = 900
+const height = 600
 const toggleCount = ref(0)
-const show = ref(false)
-const msg = ref('Test is running.')
+const showTres = ref(false)
+const showVueThree = ref(false)
+const msg = ref('Click Start Test to begin.')
 const r = ref(null)
-const isPaused = ref(true)
 
 let intervalId: ReturnType<typeof setInterval>
-
-const startInterval = () => {
-  intervalId = 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) {
-      // NOTE: Make sure that objects are mounted by
-      // checking `!!r.value`.
       if (r.value) {
-        show.value = false
-        toggleCount.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 {
-        show.value = true
+      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)
-      const elapsedSec = (Date.now() - startTimeMS) / 1000
-      msg.value = `Test completed in ${elapsedSec} seconds.`
     }
-  }, 1000 / 120)
-}
-
-const togglePause = () => {
-  isPaused.value = !isPaused.value
-  if (!isPaused.value) {
-    startInterval()
   }
-  else {
-    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...'
 }
-
-onUnmounted(() => clearInterval(intervalId))
+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: Tres Objects</h1>
+    <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 page will successively create and remove a TresCanvas containing a number of objects.</p>
+    <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 TresCanvases created: {{ toggleCount }} / {{ toggleMax }}</p>
-    <p>Number of Objects per TresCanvas: {{ numObjectsMax }}</p>
-    <button style="padding: 8px 16px; margin-top: 10px;" @click="togglePause">
-      {{ isPaused ? 'Start Test' : 'Pause Test' }}
+    <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="show" style="width: 90%; height: 90%; border: 1px solid #F00">
-    <TresCanvas clear-color="black">
-      <TresGroup ref="r" />
-      <TresMesh v-for="_, i of Array.from({ length: numObjectsMax })" :key="i">
-        <TresMeshBasicMaterial />
-        <TresBoxGeometry />
-      </TresMesh>
+  <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>

From 5d490b4989ed68ff81569398d5b1fe8f09cddea0 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Thu, 6 Feb 2025 08:51:01 +0100
Subject: [PATCH 3/3] fix: remove camera warning log on default camera creation
 (#916)

* fix: remove camera warning log on default camera creation

* refactor: remove unused logger import from TresCanvas
---
 src/components/TresCanvas.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 51a355461..e7b578a27 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -28,7 +28,6 @@ import {
 import pkg from '../../package.json'
 import {
   type TresContext,
-  useLogger,
   useTresContextProvider,
 } from '../composables'
 import { extend } from '../core/catalogue'
@@ -97,8 +96,6 @@ const slots = defineSlots<{
   default: () => any
 }>()
 
-const { logWarning } = useLogger()
-
 const canvas = ref<HTMLCanvasElement>()
 
 /*
@@ -234,10 +231,6 @@ onMounted(() => {
   )
 
   if (!camera.value) {
-    logWarning(
-      'No camera found. Creating a default perspective camera. '
-      + 'To have full control over a camera, please add one to the scene.',
-    )
     addDefaultCamera()
   }