diff --git a/playground/src/components/TheSphere.vue b/playground/src/components/TheSphere.vue
index c164a0309..dd1f34426 100644
--- a/playground/src/components/TheSphere.vue
+++ b/playground/src/components/TheSphere.vue
@@ -1,13 +1,4 @@
-
+
diff --git a/src/components/TresScene.ts b/src/components/TresScene.ts
index 426e1e14d..a7ec34400 100644
--- a/src/components/TresScene.ts
+++ b/src/components/TresScene.ts
@@ -4,6 +4,7 @@ import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
import { useEventListener } from '@vueuse/core'
import { isString } from '@alvarosabu/utils'
import { createTres } from '../core/renderer'
+import { TresCamera } from '../types/'
import {
CameraType,
TRES_CONTEXT_KEY,
@@ -85,6 +86,8 @@ export const TresScene = defineComponent({
}
}
+ const { onLoop, resume } = useRenderLoop()
+
onMounted(() => {
initRenderer()
})
@@ -102,8 +105,6 @@ export const TresScene = defineComponent({
pushCamera(props.camera as any)
}
- const { onLoop } = useRenderLoop()
-
const { raycaster, pointer } = useRaycaster()
// TODO: Type raycasting events correctly
@@ -146,8 +147,9 @@ export const TresScene = defineComponent({
function mountApp() {
app = createTres(slots)
- app.provide('useTres', useTres())
- app.provide(TRES_CONTEXT_KEY, useTres())
+ const tres = useTres()
+ app.provide('useTres', tres)
+ app.provide(TRES_CONTEXT_KEY, tres)
app.provide('extend', extend)
app.mount(scene as unknown)
}
@@ -160,7 +162,12 @@ export const TresScene = defineComponent({
function dispose() {
scene.children = []
app.unmount()
- mountApp()
+ app = createTres(slots)
+ app.provide('extend', extend)
+ app.mount(scene as unknown)
+ const camera = scene.children.find((child: any) => child.isCamera)
+ pushCamera(camera as TresCamera)
+ resume()
}
if (import.meta.hot) {
diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
index 02a81075c..448f28a14 100644
--- a/src/composables/useRenderer/index.ts
+++ b/src/composables/useRenderer/index.ts
@@ -260,6 +260,10 @@ You could set windowSize=true to force the canvas to be the size of the window.`
{ immediate: true, deep: true },
)
+ if (import.meta.hot) {
+ import.meta.hot.on('vite:afterUpdate', resume)
+ }
+
return {
renderer,
isReady,