adaptive FOV

www/src/components/test3D.svelte

@@ -3,8 +3,52 @@
   import { beforeUpdate, afterUpdate } from 'svelte';
   import * as Three from 'three';
 
+//#region variables
   let innerWidth: number = 0;
   let innerHeight: number = 0;
+  let maxInnerWidth: number = 0;
+  let maxInnerHeight: number = 0;
+
+  let portrait: boolean = true;
+  let focalLength: number = (540/Math.atan(70*Math.PI / 180));
+  let fov = 75;
+  //let baseHorizontalFOV: number = 2.0*Math.atan(baseAspectRation*Math.tan(baseVerticalFOV*0.5));
+//#endregion
+
+
+//#region functions
+  function updateVerticalFOV(){
+    fov = (180/Math.PI)*Math.tan(innerHeight/(focalLength*2));
+  }
+
+
+  function resetMaxDimensions(){
+    maxInnerWidth = 0;
+    maxInnerHeight = 0;
+  }
+
+  function updateMaxInnerDimensions(){
+    if(maxInnerWidth < innerWidth){
+      maxInnerWidth = innerWidth;
+    }
+    if(maxInnerHeight < innerHeight){
+      maxInnerHeight = innerHeight;
+    }
+  }
+
+  function checkOrientation(oldPortrait: boolean){
+    if (innerWidth > innerHeight){
+      portrait = false;
+    } else {
+      portrait = true;
+    }
+
+    if (oldPortrait != portrait){
+      resetMaxDimensions();
+    }
+  }
+//#endregion
+
 
   let scene: Three.Scene = new Three.Scene();
   let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(
@@ -40,16 +84,20 @@
   function animate() {
     requestAnimationFrame(animate);
 
-    cube.rotation.x += 0.02;
+    cube.rotation.x += 0.05;
-    cube.rotation.y += 0.02;
+    cube.rotation.y += 0.05;
 
     renderer.render(scene, camera);
   }
   animate();
 
-  beforeUpdate(() => {});
+  beforeUpdate(() => {
+    checkOrientation(portrait);
+    updateMaxInnerDimensions();
+    updateVerticalFOV();
 
-  afterUpdate(() => {
+    camera.aspect = innerWidth / innerHeight;
+    camera.fov = fov
     camera.setViewOffset(
       window.innerWidth,
       window.innerHeight,
@@ -59,6 +107,12 @@
       window.innerHeight,
     );
     renderer.setSize(window.innerWidth, window.innerHeight);
+
+    //renderer.setClearColor(0x000000, (innerHeight/(maxInnerHeight))/2 + 0.5);
+  });
+
+  afterUpdate(() => {
+
   });
 </script>
 
@@ -67,15 +121,15 @@
 <style>
   html,
   body {
-    overflow-x: hidden;
+    overflow: hidden;
-    overflow-y: hidden;
     padding: 0;
     margin: 0;
-  }
-
-  body {
     position: absolute;
     width: 100%;
     height: 100%;
   }
+
+  body {
+    
+  }
 </style>