losing some light when navigating forth and back

[riekusr]

Hi guys,

www.fiberstand.com < The 3dviewer works fine, but when navigating with the menu window and then navigating back the scene loses some lightning looks like it (or some other issue) You can see the sides of the model are super dark when navigating back. Refreshing the page again solves the issue.

when navigating out this is a console error: THREE.WebGLRenderer: Context Lost.

I am using next ,react three fiber and drei.

I just spend time to setup a sandbox to recreate it but the issue doesn't happen in the sandbox. But you can still view the code:https://codesandbox.io/s/reactfiberlightningissue-ynueu?file=/src/App.js

This is without next. I use a dynamic import SSR false to load the react component in next.

Or maybe the problem does exists but because codesandbox does a hardrefresh everytime it doesn't show?

It looks like there is some caching going on of some sort or things aren't disposed right. I am a pretty noob in JS and three so any pointers will help.

[riekusr]

This happens when I duplicate the 3d viewer on the page:
https://i.imgur.com/91lYZcI.png

Not really sure what that tells me tho.. something isn't mounting or something.

[drcmda]

the context loss is normal, when the canvas unmounts it must force a context loss to avoid memory leaks, threejs has a function for that that it calls.

i would first check if all versions are up to date @react-three/fiber and @react-three/drei.

the other error looks like you are re-using things across multiple canvases? if that's the case threejs does not allow that.

[riekusr]

Thank you for your reply. I am not reusing anything. Just 1 canvas. Glad to know the context loss is normal.

I have dug deeper and found that the problem lies in the enviroment map. I tried switching from the presets to a HDR map and same outcome.

        <Environment preset="warehouse" />
         <Environment files="3dmodel/hdr.hdr" />

This is basiclly where my skills end. Don't know what to do from here. I'll remove the map and use custom lights for my application but wheter or not this is a bug or not, might be worth looking into for someone smart.

[riekusr]

I am getting this error, which I can't solve with googling:

react_devtools_backend.js:2560 Warning: React instrumentation encountered an error: Error: Could not find ID for Fiber "Viewr3dV3" 
    at Canvas (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1621517416263:11629:3)
    at div
    at div
    at Viewr3dV3 (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1621517416263:257896:73)
    at LoadableComponent (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1621517416263:40801:37)
    at div
    at div
    at div
    at main
    at div
    at Home (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1621517416263:258454:20)
    at PlausibleProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621517416263:627:20)
    at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621517416263:11039:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1621517416263:677:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1621517416263:781:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1621517416263:9162:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1621517416263:9651:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1621517416263:9784:24)

not sure if it is related.

[riekusr]

Just tried updating it (I purposely used the versions in a tutorial to avoid problems):

error - ./node_modules/@react-three/drei/core/softShadows.js 11:40
Module parse failed: Unexpected token (11:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   rings = 11
| } = {}) => `#define LIGHT_WORLD_SIZE ${size}
> #define LIGHT_FRUSTUM_WIDTH ${frustrum ?? frustum}
| #define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)
| #define NEAR_PLANE ${near}

  "dependencies": {
    "@react-three/drei": "^5.1.2",
    "@react-three/fiber": "^6.1.5",
    "@svgr/webpack": "^5.5.0",
    "autoprefixer": "^10.2.5",
    "file-loader": "^6.2.0",
    "firebase": "^8.4.2",
    "firebase-admin": "^9.6.0",
    "next": "10.x",
    "next-plausible": "^1.6.1",
    "postcss": "^8.2.12",
    "react": "17.x",
    "react-dom": "17.x",
    "react-hot-toast": "^1.0.2",
    "react-visibility-sensor": "^5.1.1",
    "tailwindcss": "^2.1.2",
    "three": "^0.128.0"
  }

[riekusr]

Same happens when you take the r3f demo and import drei with everything updated:

Example: https://codesandbox.io/s/basic-demo-forked-kul2y?file=/src/App.js

[drcmda]

im not sure i understand. i think the environment thing is fixed in the last drei. i remember it had an issue like that.

[xkmstudio]

I'm also experiencing this with my Next JS application. Everything works when navigating to the page with the scene OR loading the site on the page with the scene. But when I navigate to the home page from the page with the scene and then try returning to the page with the scene, the canvas is blank.

Works:
index page -> scene page

Does not work:
scene page -> index page -> scene page

I've tried removing the environment component, upgrading the R3F and DREI packages, as well as a handful of other things and the scene still shows a blank canvas. Any help would be appreciated!

[xkmstudio]

It looks like in my case it had to do with setting the controlRef outside of the the CameraControls function. Once I moved the controlRef to be inside of the CameraControls function it began updating the scene when navigating back and forth.