diff --git a/playground/package.json b/playground/package.json
index 232bf66c2..53bde9867 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -13,7 +13,7 @@
"vue-router": "^4.2.5"
},
"devDependencies": {
- "@tresjs/leches": "^0.13.0",
+ "@tresjs/leches": "0.15.0-next.3",
"@tweakpane/plugin-essentials": "^0.2.0",
"unplugin-auto-import": "^0.17.1",
"vite-plugin-glsl": "^1.2.0",
diff --git a/playground/src/pages/empty.vue b/playground/src/pages/empty.vue
new file mode 100644
index 000000000..f6b29846f
--- /dev/null
+++ b/playground/src/pages/empty.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/src/pages/perf/AkuAku.vue b/playground/src/pages/perf/AkuAku.vue
new file mode 100644
index 000000000..a8da5e478
--- /dev/null
+++ b/playground/src/pages/perf/AkuAku.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
diff --git a/playground/src/pages/perf/index.vue b/playground/src/pages/perf/index.vue
new file mode 100644
index 000000000..88e40ba13
--- /dev/null
+++ b/playground/src/pages/perf/index.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 087cab7b5..7c4aad550 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -71,6 +71,16 @@ const routes = [
name: 'Click Blocking Box',
component: () => import('./pages/click-blocking-box.vue'),
},
+ {
+ path: '/perf',
+ name: 'Perf',
+ component: () => import('./pages/perf/index.vue'),
+ },
+ {
+ path: '/empty',
+ name: 'empty',
+ component: () => import('./pages/empty.vue'),
+ },
]
export const router = createRouter({
history: createWebHistory(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0271befd1..9e87d1b33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,8 +150,8 @@ importers:
version: 4.2.5(vue@3.3.9)
devDependencies:
'@tresjs/leches':
- specifier: ^0.13.0
- version: 0.13.0(vue@3.3.9)
+ specifier: 0.15.0-next.3
+ version: 0.15.0-next.3(three@0.158.0)(vite@4.5.0)(vue@3.3.9)
'@tweakpane/plugin-essentials':
specifier: ^0.2.0
version: 0.2.0(tweakpane@4.0.1)
@@ -311,7 +311,6 @@ packages:
/@alvarosabu/utils@3.1.1:
resolution: {integrity: sha512-DdZNe0i0UsqA2X/+JtaznG4qGorU24FaHqxMAhVspQaC1my+YAVQLpfw8GilHpzMxPxX4sGVzuTnBF8GOdG5oA==}
- dev: false
/@ampproject/remapping@2.2.1:
resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -1742,6 +1741,20 @@ packages:
- '@vue/composition-api'
- react
+ /@tresjs/core@3.5.1(three@0.158.0)(vue@3.3.9):
+ resolution: {integrity: sha512-j7fHT3X8NamQk+n5A20r/UUkInHWQOJr5dzzcuOCdD6s3FFc3WMYtbRq+cJN8FR8mS0vpSK6h9s82com8cmRNA==}
+ peerDependencies:
+ three: '>=0.133'
+ vue: '>=3.3'
+ dependencies:
+ '@alvarosabu/utils': 3.1.1
+ '@vueuse/core': 10.6.1(vue@3.3.9)
+ three: 0.158.0
+ vue: 3.3.9(typescript@5.3.2)
+ transitivePeerDependencies:
+ - '@vue/composition-api'
+ dev: true
+
/@tresjs/eslint-config-base@0.2.1(@typescript-eslint/eslint-plugin@6.13.0)(@typescript-eslint/parser@6.13.0)(eslint@8.54.0):
resolution: {integrity: sha512-9fkwDaNu4nLKujeERi5d1S7+ZdZpxBE+g/jUbM4ywhn/+5P7Qv8dXlo1vB05LteX5cTBnZxHQTFrJGK+sMcFdg==}
peerDependencies:
@@ -1806,16 +1819,22 @@ packages:
- supports-color
dev: true
- /@tresjs/leches@0.13.0(vue@3.3.9):
- resolution: {integrity: sha512-Fgvwl6q3Hb3DVlM71WHhqG0QSXOGcdcQN6d2EU78etLBUj7SQSq2mBeS0WNZ8r0bdNfB1tNkrPkA3uBdMS4yuw==}
+ /@tresjs/leches@0.15.0-next.3(three@0.158.0)(vite@4.5.0)(vue@3.3.9):
+ resolution: {integrity: sha512-kI8DovuzZ/mnSY3ifEiKJ1fd3aBoM5hYSfX0uwlJ6KWblVafrhds1J8j5aoFq6Kx0pjDVsY72fL8itAfm0ZrzQ==}
peerDependencies:
+ three: '>=0.133'
vue: '>=3.3.4'
dependencies:
- '@unocss/core': 0.57.2
+ '@tresjs/core': 3.5.1(three@0.158.0)(vue@3.3.9)
+ '@types/three': 0.158.3
+ '@unocss/core': 0.57.7
'@vueuse/components': 10.5.0(vue@3.3.9)
+ three: 0.158.0
+ vite-plugin-css-injected-by-js: 3.3.0(vite@4.5.0)
vue: 3.3.9(typescript@5.3.2)
transitivePeerDependencies:
- '@vue/composition-api'
+ - vite
dev: true
/@trysound/sax@0.2.0:
@@ -2150,10 +2169,6 @@ packages:
unconfig: 0.3.11
dev: true
- /@unocss/core@0.57.2:
- resolution: {integrity: sha512-iTmowhObigxeqcxtEW4v+mAEQtFslifTG0Fiw8kXs3+t4L6fcnjj0i7/FtBbz+nOxrWyt2EzdkUyjpLGQa/yCw==}
- dev: true
-
/@unocss/core@0.57.7:
resolution: {integrity: sha512-1d36M0CV3yC80J0pqOa5rH1BX6g2iZdtKmIb3oSBN4AWnMCSrrJEPBrUikyMq2TEQTrYWJIVDzv5A9hBUat3TA==}
dev: true
@@ -8187,6 +8202,14 @@ packages:
resolution: {integrity: sha512-Bww2Xd5tOGsZ1yZ9rQiGneryvsL1u86znPrqeQjCsXPsG72pnSdV5lcQA+cy8UNDguMqyTJiCevlNUbLnT85UA==}
dev: true
+ /vite-plugin-css-injected-by-js@3.3.0(vite@4.5.0):
+ resolution: {integrity: sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew==}
+ peerDependencies:
+ vite: '>2.0.0-0'
+ dependencies:
+ vite: 4.5.0
+ dev: true
+
/vite-plugin-dts@3.6.3(typescript@5.3.2)(vite@5.0.2):
resolution: {integrity: sha512-NyRvgobl15rYj65coi/gH7UAEH+CpSjh539DbGb40DfOTZSvDLNYTzc8CK4460W+LqXuMK7+U3JAxRB3ksrNPw==}
engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue
index 4e53143d1..e80866a74 100644
--- a/src/components/TresCanvas.vue
+++ b/src/components/TresCanvas.vue
@@ -101,8 +101,13 @@ const mountCustomRenderer = (context: TresContext) => {
render(h(InternalComponent), scene.value as unknown as TresObject)
}
-const dispose = (context: TresContext) => {
+const dispose = (context: TresContext, force = false) => {
scene.value.children = []
+ if (force) {
+ context.renderer.value.dispose()
+ context.renderer.value.renderLists.dispose()
+ context.renderer.value.forceContextLoss()
+ }
mountCustomRenderer(context)
resume()
}
@@ -111,7 +116,7 @@ const disableRender = computed(() => props.disableRender)
const context = shallowRef(null)
-defineExpose({ context })
+defineExpose({ context, dispose: () => dispose(context.value as TresContext, true) })
onMounted(() => {
const existingCanvas = canvas as Ref
diff --git a/src/composables/useTresContextProvider/index.ts b/src/composables/useTresContextProvider/index.ts
index 79b0379fe..4f0905237 100644
--- a/src/composables/useTresContextProvider/index.ts
+++ b/src/composables/useTresContextProvider/index.ts
@@ -85,7 +85,6 @@ export function useTresContextProvider({
}
provide('useTres', toProvide)
-
return toProvide
}
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
index e69b5f2af..eb1b24a4f 100644
--- a/src/core/nodeOps.ts
+++ b/src/core/nodeOps.ts
@@ -123,9 +123,15 @@ export const nodeOps: RendererOptions = {
const disposeMaterialsAndGeometries = (object3D: Object3D) => {
const tresObject3D = object3D as TresObject3D
- if (!object3D.userData.tres__materialViaProp) tresObject3D.material?.dispose()
- if (!object3D.userData.tres__geometryViaProp)
+ if (!object3D.userData.tres__materialViaProp) {
+ tresObject3D.material?.dispose()
+ tresObject3D.material = undefined
+ }
+
+ if (!object3D.userData.tres__geometryViaProp) {
tresObject3D.geometry?.dispose()
+ tresObject3D.geometry = undefined
+ }
}
const deregisterAtPointerEventHandler = scene?.userData.tres__deregisterAtPointerEventHandler
@@ -161,6 +167,7 @@ export const nodeOps: RendererOptions = {
deregisterCamera?.(object as Camera)
}
+ node.removeFromParent?.()
object3D.traverse((child: Object3D) => {
disposeMaterialsAndGeometries(child)
deregisterCameraIfRequired(child)
@@ -172,8 +179,6 @@ export const nodeOps: RendererOptions = {
deregisterAtPointerEventHandlerIfRequired?.(object3D as TresObject)
}
- node.removeFromParent?.()
-
node.dispose?.()
},
patchProp(node, prop, _prevValue, nextValue) {