Sandbox of my Setup: https://codesandbox.io/p/devbox/cdwrck
I’m using DREI’s component in my React app to map Plane Meshes to locations within the DOM. These planes are acting as images, which are loaded by an extended shader material component.
However, these planes initially render as incredibly small and barely visible squares until I resize my window. I’m also noticing that the refs (meshRef, materialRef and Ref) seem to be read as null until the window resizes.
I’ve tried adding a {useFrame}
from the r3f library to see if I can’t force a needsUpdate
on the materialRef, but I trigger an error as it seems like the Mesh would need to be in the Scene/Canvas component, whereas the Meshes are technically rendered through the View.port
in this setup.
I’m pretty stuck, and was wondering if someone could point me in the right direction. Thanks!