adaptive FOV
This commit is contained in:
parent
095795a1ee
commit
89b48d67a1
@ -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.y += 0.02;
|
||||
cube.rotation.x += 0.05;
|
||||
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-y: hidden;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user