More orientation and resize improvements

main.js

@@ -28,9 +28,12 @@ function init() {
 	cameraOutside.position.z = cameraOutsideDistance;
 
 	renderer = new THREE.WebGLRenderer();
+	renderer.setPixelRatio(window.devicePixelRatio);
 	renderer.setSize( window.innerWidth, window.innerHeight );
 	document.body.appendChild( renderer.domElement );
 
+	window.addEventListener("resize", onWindowResize, false);
+
 	// see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event
 	screen.orientation.addEventListener("change", (event) => {
 		const type = event.target.type;
@@ -55,8 +58,6 @@ function init() {
 
 	});
 
-	// see https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
-	window.addEventListener("resize", (event) => { alert( `New window size ${window.innerWidth} x ${window.innerHeight}` ); });
 
 	addOrbitControls();	// add to outside camera
 
@@ -282,6 +283,16 @@ function updateScreenFOV(fov)
 	cameraInside.updateProjectionMatrix();
 }
 
+function onWindowResize() {
+	cameraInside.aspect = window.innerWidth / window.innerHeight;
+	cameraInside.updateProjectionMatrix();
+
+	cameraOutside.aspect = window.innerWidth / window.innerHeight;
+	cameraOutside.updateProjectionMatrix();
+
+	renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
 function updateUniforms() {
 	shaderMaterial.uniforms.tanHalfFovHU.value = Math.tan(0.5*fovU*Math.PI/180.0);
 	shaderMaterial.uniforms.tanHalfFovVU.value = Math.tan(0.5*fovU*Math.PI/180.0)/aspectRatioU;