Drei View breaks dimension on the second page

Questions
, ,
1

Edit: In case the sandbox doens’t work, I created a stackblitz

Hello everyone,

I’m currently experimenting with the react-three-next-starter and ran into some weird issues.
My idea was to have on the first page some 3D elements that use “Drei View” to stay in place and on the second page a 3D element that stays in the background and animate it based on the scroll position. But as soon as I switch to the second page, the “Drei View” dimensions are applied to the second page…

Heres the sandbox

Steps to reproduce:

  1. Go to Home Page
  2. Navigate to Second Page
  3. Resize the window or releoad the page, so the “Drei View” dimensions break.

At first I thought React might be losing track of the objects, so I used keys, but that didn’t help. I’m probably using tunnels (from tunnel-rat) wrong, but not entirely sure since its the first time using them.

I feel like I’m missing something obvious as I couldn’t find a similar question anywhere.

Any help or better approaches to achieve this setup, would be appreciated.
King regards