fix: reset state on unmounted

Tresjs · Mar 26, 2023 · dbbaee7 · dbbaee7
1 parent 6cf12a5
commit dbbaee7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/components/TresCanvas.ts b/src/components/TresCanvas.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, watch } from 'vue'
+import { defineComponent, h, onUnmounted, ref, watch } from 'vue'
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 import { createTres } from '/@/core/renderer'
@@ -53,11 +53,14 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLCanvasElement>()
     const scene = new THREE.Scene()
-
-    const { setState } = useTres()
+    const { setState, resetState } = useTres()
 
     setState('scene', scene)
 
+    onUnmounted(() => {
+      resetState()
+    })
+
     function initRenderer() {
       const { renderer } = useRenderer(canvas, container, props)
 
@@ -73,6 +76,8 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
         raycaster.value.setFromCamera(pointer.value, activeCamera.value)
         renderer.value?.render(scene, activeCamera.value)
       })
+
+
     }
 
     watch(canvas, initRenderer)
@@ -98,12 +103,15 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
         mountApp()
       })
     }
+
     return () => {
       return h(
         h(
           'div',
           {
             ref: container,
+            'data-scene': scene.uuid,
+            key:  scene.uuid,
             style: {
               position: 'relative',
               width: '100%',
@@ -124,6 +132,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
               [
                 h('canvas', {
                   ref: canvas,
+                  'data-scene': scene.uuid,
                   style: {
                     display: 'block',
                     width: '100%',

diff --git a/src/composables/useTres/index.ts b/src/composables/useTres/index.ts
@@ -1,5 +1,5 @@
 import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'
-import { computed, ComputedRef, shallowReactive, toRefs } from 'vue'
+import { computed, ComputedRef, onUnmounted, shallowReactive, toRefs } from 'vue'
 import { Camera } from '/@/composables'
 
 export interface TresState {
@@ -90,11 +90,14 @@ export interface TresState {
   [key: string]: any
 }
 
-const state: TresState = shallowReactive({
+const INIT_STATE = {
   camera: undefined,
   cameras: [],
+  scene: undefined,
+  renderer: undefined,
   aspectRatio: computed(() => window.innerWidth / window.innerHeight),
-})
+}
+const state: TresState = shallowReactive(INIT_STATE)
 
 /**
  * The Tres state.
@@ -126,10 +129,22 @@ export function useTres() {
     state[key] = value
   }
 
+  /**
+   * Reset a state
+   *
+   */
+  function resetState() {
+    setState('scene', null)
+    setState('renderer', null)
+    setState('camera', null)
+    setState('cameras', [])
+  }
+
   return {
     state,
     ...toRefs(state),
     getState,
     setState,
+    resetState
   }
 }