Inaccurate viewport sizes within in a scene rendered using RenderTexture material

[thismarioperez]

• three version: 0.167.1
• @react-three/fiber version: 8.17.5
• @react-three/drei version: 9.111.3
• node version: 20 LTS
• npm (or yarn) version: yarn 1.22.22

Problem description:

This bug concerns using a mesh that displays an image as a texture on a plane geometry, and is scaled using the useAspect hook. The mesh is composed as part of a scene that is rendered within a RenderTexture material. On first render, things look fine, but if you attach camera controls to the top level scene, zoom out with the mouse wheel, then resize the screen, the custom mesh scale suddenly jumps up in size. It's my understanding that the useAspect hook should use the camera within the nested scene to calculate viewport sizes. Investigating the useAspect hook, I found that it’s internally using the useThree hook to access the current viewport sizes and make calculations accordingly. Logging out the viewport sizes from within the mesh component shows that the sizes drastically jump up while resizing the window.

Relevant code:

Codepen demonstrating the bug

Zoom out with the scroll wheel, then resize the preview window, and read the console. You should see that the logged viewport sizes drastically jump up. Additionally, you should notice the mesh will visually scale up outside of the bounds of the current screen.

Suggested solution:

Correct me if I'm wrong, but I thought that the useAspect and viewport sizes should use the camera in the RenderTexture scene to calculate values.

[thismarioperez]

Additional video demonstrating the unexpected behavior

Screen.Recording.2024-08-28.at.1.10.38.PM.mov