Environment black for other canvases than the first

[robclouth]

Versions

"@react-three/drei": "7.2.2", "@react-three/fiber": "7.0.6", "three": "0.130.1",

Problem description:

When having multiple canvases, only the first instance of Environment works. Subsequent ones are black.

Code

https://codesandbox.io/s/heuristic-tu-9q8o4?file=/src/index.js

[CodyJasonBennett]

I've fixed this in #554, but I'm working on including resolution params in that PR.

Sandbox here: https://codesandbox.io/s/pensive-kirch-uc7s5

[drcmda]

this is not a problem in newer react: https://codesandbox.io/s/the-difference-between-color-modes-dus84

env maps cannot be re-used among canvases in threejs and since env is cached in drei it gets destroyed. in react 18 each root (react-dom, r3f, etc) has a cache bound, problem solved.

@CodyJasonBennett is prem needed? it is in useasset because prem takes so long that it creates a glitch. as in the model appears without env, then it calculates, then it gets applied. with suspense it happens in lock step which imo is important. maybe threejs has changed and prem isnt a necessity any longer but if it still takes time i think the glitch is a bigger issue than multi canvas support, which will 100% be solved by the react team in just a few weeks and is solvable now by already switching to r3f alpha.

[CodyJasonBennett]

@drcmda, I'm not sure. I tried removing it to solve both issues but will have to take a closer look at PMREM.

[srcnalt]

Using the Environment component from #554 fixed the issue for me to display it on multiple canvases, however now on mobile devices I get no light at all. Will investigate more why this happens.

[CodyJasonBennett]

I believe PMREM was contributing lighting information.

[tigrik2017]

Still valid. In my case, it occurs not on navigation, but moving between two same 3D viewer components on the same page which contain environment components, making them visible one by one. In that case, the first one loses the environment and after hiding the second, it won't restore.

versions installed: react: 17.0.2 drei: 8.6.1 fiber: 7.0.24 three: 0.136.0

[w3ichen]

As of Aug 19 2022:

I tried #554 but no luck. I was able to fix it by upgrading react-three to the latest version.

Not working versions

    "@react-three/drei": "^7.27.5",
    "@react-three/fiber": "^7.0.24",
    "@types/three": "^0.135.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "three": "^0.136.0",

Newer versions that work! 🎉

    "@react-three/drei": "^9.22.7",
    "@react-three/fiber": "^8.3.1",
    "@types/three": "^0.143.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.143.0",