Disable auto resizing for Camera only

[looeee]

I need to handle updating the camera's projection matrix manually to create a smooth animation between orthographic and perspective views. Unfortunately this breaks whenever the scene is resized due to camera.updateProjectionMatrix() being called.

There used to be a Canvas.updateDefaultCamera property but since that was removed I can't find an easy way to disable camera auto-resizing.

Using the custom render function as suggested in #1371 would be complete overkill as I want all other normal functionality of <Canvas />

In #885 (comment) @drcmda suggestions doing this:

const cam = useRef()
const { set} = useThree()
useLayoutEffect(() => set({ camera: camera }), [set])
return <perspectiveCamera ref={ref} left={...} right={...} top={...} bottom={...} />

ofc now you're responsible for managing it, the resize stuff.

Unfortunately when I tried this it still auto-resizes the camera and overwrites my custom projection matrix.

Are there any simple solutions to this that I've overlooked?

[looeee]

I've found a workaround, although it involves calculating the projection matrix multiple times on resize so it's to ideal.

I'm adding my own resize eventlistener and recalculating the projection matrix after R3F overwrites mine:

const get = useThree((state) => state.get);
	
const onResize = () => {
    const customProjectionMatrix = calculateCustomProjectionMatrix(get().size, spec);
    camera.projectionMatrix.copy(customProjectionMatrix );
};

window.addEventListener('resize', onResize);

So far its working well, although I'm a little worried about the order of the even listeners firing - if mine fires after the R3F internal resize event, all good. But if mine fires first then I'll end up with the wrong projection matrix.

[simple-russia]

r3f v7.0.27
Hi there. Would love to add my 2 cents: The solution from looeee worked for me as well but my canvas might be resized even if the window itself it not resized thus i had to use ResizeObserver on canvas (its wrapper actually). And here's one problem here - resizeObserver.observe, unlike window.onresize, is really slow. So you will see a twitching animation between <Canvas/>'s inner resizer and yours. I found a way to disable Canvas' inner auto resizer - there's a <Canvas resize={configObject} /> property in which you pass configs for the inner resizer, the needed prop is debounce: number. Make it infinity and the auto resizer wiill never ever work. But i had to start with debounce=0 and make it Infinity ONLY after the canvas is ready (that is, <Canvas onCreated{callback} /> is fired).

And obviously, now it's up to you to calculate camera frustrum and canvas dimensions.