Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.27k stars 107 forks source link

Unmount the Canvas component instant mount children again even if canvas is not mounted #796

Closed dghez closed 3 months ago

dghez commented 3 months ago

Describe the bug

When you unmount the Canvas component, it instant re-mount it again, triggering onMounted callback. I thought it was a nuxt issue but is actually unrelated, nuxt was just mount/unmount the page tha was causing the problem.

Canvas is in /about.

https://github.com/user-attachments/assets/68f8281e-bdf3-48d2-942b-3b52f3fdb595

Reproduction

https://stackblitz.com/edit/nuxt-starter-k7pfzc?file=pages%2Findex.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

dghez commented 3 months ago

@alvarosabu Completely random hint that might be completely wrong: https://github.com/Tresjs/tres/blob/main/src/components/TresCanvas.vue#L144

Why are we calling mountCustomRenderer in the dispose function that is called in the onUnmounted?


const dispose = (context: TresContext, force = false) => {
  disposeObject3D(context.scene.value as unknown as TresObject)
  if (force) {
    context.renderer.value.dispose()
    context.renderer.value.renderLists.dispose()
    context.renderer.value.forceContextLoss()
  }
  (scene.value as TresScene).__tres = {
    root: context,
  }
  mountCustomRenderer(context)
}