When the page first loads the width and height of the canvas is different which messes up the aspect ratio of the camera.
When resizing, the aspect ratio is fine because the size is inquired well after the page loads. I tried using DOMContenLoaded and load but they didn’t work. Could this be because of the inline styling THREE injects?
(if nothing loads refresh the browser window on the right)
renderer.setSize() sets the width and the height of the canvas. If you use those when creating the camera aspect ratio, you need to do it after setSize call, otherwise the initial camera ratio doesn’t match the canvas ratio.
I declared the camera aspect ratio after the setSize(), but I get this weird error where resizing the browser fires the eventlistener but resizing it via double-clicking the top doesn’t, do you have an idea why this happens?
I can’t tell you why something doesn’t work inside VSCode browser extension, I don’t use any, it might depend on many factors. Try your code in an actual browser, if it doesn’t work, upload files, say, to github, so people can have a look and replicate that behavior.
That’s Firefox