Override threejs resize behavior

Summary:
- Three.js does not allow resizing when XR is presenting, override this behavior for desktop mode
- Force resize when user engage pointer lock to allow rendering at full resolution

Reviewed By: cabanier

Differential Revision: D57221729

fbshipit-source-id: f7569d1816329dab4021ab36f89733b38641dfa5

Author: felixtrz

src/js/systems/xplat/xplat.js

@@ -194,12 +194,31 @@ export class XPlatControlSystem extends System {
 			if (document.pointerLockElement) {
 				this._pointerLocked = true;
 				document.addEventListener('mousemove', onDocumentMouseMove);
+				window.dispatchEvent(new Event('resize'));
 			} else {
 				this._pointerLocked = false;
 				document.removeEventListener('mousemove', onDocumentMouseMove);
 			}
 		});
 
+		const onResize = () => {
+			if (this._canvas) {
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const pixelRatio = renderer.getPixelRatio();
+
+				this._canvas.width = Math.floor(width * pixelRatio);
+				this._canvas.height = Math.floor(height * pixelRatio);
+
+				this._canvas.style.width = width + 'px';
+				this._canvas.style.height = height + 'px';
+
+				renderer.setViewport(0, 0, width, height);
+			}
+		};
+
+		window.addEventListener('resize', onResize);
+
 		renderer.xr.addEventListener('sessionstart', () => {
 			this._canvas = renderer.xr.getBaseLayer().context.canvas;
 			this._canvas.requestPointerLock =