How do we render a scene immediately when DOM element changes size?

[trusktr]

I've got something like this:

  useEffect(() => {
    if (!container) return
   
    const ro = new ResizeObserver((entries) => {
      invalidate()
    })

    ro.observe(container) // observe the container that has the `<Canvas>`.

    return () => ro.disconnect()
  }, [container])

however, when resize happens, it is too late (ResizeObserver runs after animation frames, so the scene has already rendered). This means that the scene we render the correct size in the next frame. It doesn't matter if I use invalidate() or not. r3f always renders too late.

So, I tried this,

  const r3f = useThree()

  useEffect(() => {
    if (!container || !r3f) return

    const { gl: renderer, camera, scene } = r3f

    const ro = new ResizeObserver((entries) => {
      // Render immediately, synchronously, so that resize doesn't look jank.
      renderer.setSize(rect.width, rect.height) // (dpr is already set to devicePixelRatio in the JSX)
      renderer.render(scene, camera)
    })

    ro.observe(container)

    return () => ro.disconnect()
  }, [container, r3f])

This still doesn't work.

What happens is that the renderer renders tiny, as if I have the wrong size values (the whole scene is half the size or somemultiple, as if I increased the frustum size or the canvas size, but you can see in the code that I didn't do that).

What happens is:

• the scene renders immediately, but everything is tiny.
• the scene renders again later

Yes, I know there is a double render. That's ok. I want to get things looking really on resize first, then optimize if needed.

So the question is, why when I render manually, it is as if the canvas is twice as big (but still same CSS size)?

Here's what it looks like:

Screencast.From.2025-05-28.18-24-54.mp4

That small object, that's from the manual render.