search

Tresjs / nuxt

TresJS integration for Nuxt.
https://tresjs.org/
MIT License
207 stars 6 forks source link

Blank Canvas when navigating between two pages that have a TresCanvas #41

Closed T-Mike closed 7 months ago

T-Mike commented 1 year ago

Describe the bug

TresJS scene does not display when you navigate between two pages that have a <TresCanvas>

When the current page has a <TresCanvas> and you navigate to another page that has a <TresCanvas>, new page displays a blank canvas. When the current page does not have a <TresCanvas> and you navigate to another page that has a <TresCanvas>, new page works as expected.

Same behaviour on latest Chromium and Firefox. Only Firefox outputs a warning: "WebGL Context lost"

Reproduction

https://stackblitz.com/edit/nuxt-starter-tg1cya

Steps to reproduce

Create a nuxt Project. Add a "pages" folder to enable routing. Inside "pages" folder, add 3 .vue files. On two of them, add a TresCanvas with a basic scene inside. Then navigate between the pages to experience the bug.

On my reproduction, just use the three links to navigate between pages. Home does not have a <TresCanvas> Page1 and Page2 have a <TresCanvas>

System Info

@tresjs/nuxt 1.1.7
nuxt 3.7.4

Used Package Manager

yarn

Code of Conduct

markus-gx commented 11 months ago

Have you resolved this issue? I am currently facing it too. 

     "nuxt": "^3.7.4",
    "@tresjs/cientos": "^3.5.0",
    "@tresjs/core": "^3.3.0",
    "@tresjs/nuxt": "^1.2.0",
    "@tresjs/post-processing": "^0.4.0",

edit

Solved with a neat hack 🤣 When using useState the key must be unique across your canvas instances.

const mountedFix = useState(`mounted-fix-${props.blok._uid}`, () => false)
onMounted(() => {
  mountedFix.value = true
})
onUnmounted(() => {
  mountedFix.value = false
})

@alvarosabu we don't have access to @trejs/core right? It seems that it can be solved in the TresCanvas instance coming from /core. Maybe this helps somehow.

alvarosabu commented 11 months ago

Hey there, @T-Mike @markus-gx did you guys tried out latest version v1.2.0?

Daniel and I made some changes that might solve this issue, I had it too in the playground and now it works.

Could you please update and try again to see if it works?

markus-gx commented 11 months ago

Hey there, @T-Mike @markus-gx did you guys tried out latest version v1.2.0?

Daniel and I made some changes that might solve this issue, I had it too in the playground and now it works.

Could you please update and try again to see if it works?

Sadly not. Already on the latest version.

     "nuxt": "^3.7.4",
    "@tresjs/cientos": "^3.5.0",
    "@tresjs/core": "^3.3.0",
    "@tresjs/nuxt": "^1.2.0",
    "@tresjs/post-processing": "^0.4.0",
T-Mike commented 11 months ago

I confirm, problem still here with version 1.2.0

alvarosabu commented 11 months ago

Yep it's reproducible, I will investigate further. Its weird because the playground its done with Nuxt module and works. 😅

https://playground.tresjs.org/

alvarosabu commented 9 months ago

@T-Mike could you confirm if this still happens in v2?

T-Mike commented 9 months ago

Yes still happens. https://stackblitz.com/edit/nuxt-starter-jreyrm

And for your previous comment, I checked the playground and this is not the same situation. If I'm not mistaken, the home doesn't have a tresjs animation and nowhere on the playground you go from an experiment to another experiment (ie. from a page with a Tres canvas to another page with a Tres canvas).

alvarosabu commented 9 months ago

@T-Mike gotcha! Thanks

alvarosabu commented 8 months ago

Hey everyone @T-Mike @markus-gx sorry took so long to get back to you. I've been trying to figure out this bug the last 3 weeks and the only workaround I found was to wrap the TresCanvas on each page with a <ClientOnly> 😥

My rough guess is that the SSR version of the component is causing the issue, but now after the new version of nuxt 3.10.0 is completely broken #83 , I already reach out to the nuxt team for help.

Sorry for the inconvenience