Open 3lijah opened 2 years ago
@3lijah did you figure out what the cause of this is? The docs mention that resize is omitted from the original canvas component, but nothing more, I guess this should work out of the box.
@3lijah did you figure out what the cause of this is? The docs mention that resize is omitted from the original canvas component, but nothing more, I guess this should work out of the box.
No, I haven't made any progress. It does seem intentional but problematic for full-window experiences.
From what I can understand there simply doesnt appear to be any implementation for resizing: source
The r3f canvas uses use-measure which responds to changes. Maybe i'm missing something, but to me this seems like an easy thing to implement.
Does anybody have a solution for this? Is there a way to trigger the resize handler somehow from outside of the component?
Sadly seeing this still, if anyone has a workaround, it would be greatly appreciated.
EDIT: Submitted a PR #2047
1. Read the FAQs 👇
2. Describe the bug
When resizing the element containing the canvas, the canvas should resize as well.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
In this r3f example, the element stays centered when resizing the iframe: https://codesandbox.io/s/react-spring-animations-6hi1y
In this framer-motion-3d example, the element retains its initial coordinates: https://codesandbox.io/s/framer-motion-3d-variants-9173p
4. Steps to reproduce
Steps to reproduce the behavior:
5. Expected behavior
The canvas should resize with its parent and the scene should update to reflect the new size and aspect ratios.
6. Video or screenshots