pmndrs / react-three-offscreen

📺 Offscreen worker canvas for react-three-fiber
https://offscreen.pmnd.rs
MIT License
456 stars 19 forks source link

Component resizes are not watched, only complete window resizes have effect #20

Open koole opened 4 months ago

koole commented 4 months ago

The canvas currently only resizes when the complete window resizes, not when the canvas itself changes size. This works for the example, in which the canvas is a fullscreen background, but for cases when the canvas can resize without the window resizing it results in stretched images.

It appears someone already had something in mind: There is a "resize" prop on the canvas, which accepts an react-use-measure Options object. These options are then completely ignored, as the react-use-measure library appears to never be used anywhere, except for importing this Options type. All resizing is actually just handled by a this a window.addEventListener('resize', handleResize).

In the meantime, for anyone encountering the issue, you can fix the behaviour without changing the library by writing using your own preferred resize observer on your Canvas and then sending the following message to your worker:

workerRef.current.postMessage({
  type: "resize",
  payload: {
    width: ...,
    height: ...,
    top: ...,
    left: ...,
  },
});