Hi everyone!
I’m currently trying to fix the bug shown in the picture. It seems to be caused by the HTML (Drei) component, but it only manifests itself if the scene I’m loading has already been loaded in the same session, so to be clear if I reload the page and init the scene everyting works as intended.
For context, I’m developing in a Next.js environment using react-three-fiber and Drei components. I understand that Next.js, react-three-fiber, and Drei all have caching enabled by default, which is fine. However, I can’t figure out why the cached elements interfere with the way accumulative shadows are calculated!
More importantly, why do HTML (Drei) components cast shadows even when I explicitly set castShadow={false} on them?
I confirmed that these shadows are caused by the HTML components by removing elements one by one and removing the HTML components is what resolves the issue.
Any suggestions are welcome! After two days of debugging, testing, and reading documentation and forum posts, I’m willing to follow even the smallest lead.
P.S. The first loading always gives me perfect shadows, but if, within the same session, I load another scene and then reload a previously loaded scene (with HTML elements in it), the problem appears.
Thanks in advance!
