Calculating field of view distance in Three.js

I'm currently working on dynamically resizing the FOV value as the screen sizes change in three JS. I have a calculation that seems to work well for any screen size, but I'm unsure about how to determine the distance in FOV. Any suggestions you have would be greatly appreciated.

    const distance = 1000;
    const diag = Math.sqrt((height * height) + (width * width));
    this.camera.fov = Math.atan((diag) / (3 * distance)) * (180 / Math.PI);

If you could provide guidance on how to determine and calculate the distance value dynamically based on the screen size without using fixed ranges, I would be very grateful.

javascriptthree.js

Answer №1

In perspective projection view, the ratio between the Z-distance and the height of an object is calculated using this formula:

h_z_ratio = Math.tan(this.camera.fov/2.0 * Math.PI/180.0) * 2.0;

This can also be expressed as:

h_z_ratio = this.camera.getFilmHeight() / this.camera.getFocalLength();

https://i.sstatic.net/cMgJT.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes an error when attempting to add a new user to the database?

Currently, I am delving into the world of Mongodb. To kick things off, I initiated by executing npm install --save mongoose uuid within the confines of Terminal. The primary objective of my project revolves around storing user information in the database. ...

javascriptmongodb

Child stateless component in React receiving outdated props from parent Class component

Within my Parent Component, there is a form that users interact with. The form displays real-time information that updates as fields are edited. However, I am encountering an issue where the child component sometimes receives outdated props from the previo ...

javascriptreactjstypescript

What is the best way to designate my field as $dirty within my unique directive implementation?

I have created a custom dropdown/select directive to replace the default select boxes within my form. I also have some buttons that are set to disable while the form remains in its pristine state. app.directive('dropdown', function ($timeout) { ...

javascriptangularjsangularjs-directive

Error: Unable to find the definition for Image (Next.js)

This new component in my next js project allows me to write a quote on an image and display it on the canvas. However, I am encountering an issue with the Image() function in JavaScript which typically runs on the browser. It seems that Next.js first execu ...

javascriptnext.jscanvas

Is there a way to alphabetically and numerically organize a table in vue.js?

Currently, I am implementing sorting functionality for a table using vue.js. While I have successfully achieved ascending sorting for numbers, I am facing challenges with getting the descending and alphabetical sorting to function properly. Below is the H ...

javascripthtmlsortingvue.js

Should I consider using Derby.js or Meteor for a production app with authentication capabilities?

Recently, I delved into researching Derby.js and Meteor for a project I'm currently working on. Both frameworks offer real-time functionalities that could be quite useful. However, I have some reservations and am contemplating whether it's the ri ...

javascriptnode.jsmongodbmeteorderbyjs

Experiencing issues with the fadeIn() and fadeOut() methods while constructing a slider using Object-Oriented Programming in JavaScript and jQuery

I'm currently trying to develop a slider using jQuery and JavaScript. I have successfully implemented the slide change functionality, but I am facing difficulties in smoothly adding fadeIn() and fadeOut() effects... No matter where I insert these eff ...

javascriptjqueryslider

Is your Bootstrap accordion expanding correctly, but having trouble collapsing?

I'm encountering an issue with a bootstrap 5 accordion. The panels expand correctly, but they do not collapse back down. I'm unsure if there's a problem with my JS or CSS. No errors are showing up in Chrome's console. When I transferre ...

javascriptbootstrap-5

Using jQuery to Send Data Back to Parent Popup Window

Is there a way to achieve the following functionality with jQuery: create a popup window that sends a value back to the main window when a link in the popup is clicked, then closes the popup and automatically submits a form in the main window based on the ...

asp.netjavascriptjqueryajaxpopup

What steps can be taken to ensure web resources such as scripts, images, etc are loaded from the correct location when implementing CORS support in a web application

In my local IIS, I have two asp.net mvc applications running on different ports. One is "App1" on port 1066 and the other is "App2" on port 1067. My requirement is for App2 to post data to an endpoint in App1 for validation. If the data is valid, App1 sho ...

javascriptjqueryajaxasp.net-mvccors

Experiencing difficulty with the loading process of an ajax call

Why is the loading ajax call #loadingDiv not hidden after an empty value of $(idinput).val() == '': $('#loadingDiv') .hide() // hide it initially .ajaxStart(function() { $(this).fadeIn('slow') ...

javascriptjqueryjquery-validate

The footer should always be anchored at the bottom of the webpage, maintaining a consistent position regardless of any changes to the browser's

I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows: #container { min-height: 10 ...

javascriptasp.netcss

How can I prevent this parsing error from happening? Implementing JSON with double quotation marks

In the JSON string object, we typically have properties and their corresponding values formatted as "Property":"Value". However, if the value itself contains a double quote, such as in the example "Property": "my country is "uk"", this can result in a par ...

javascriptjqueryjson

Adding an image or video to a specific object in a scene that has been loaded from Blender is a simple

After importing a scene from Blender, I am trying to add an image or video on the screens within the scene. I am utilizing the OOP model to build the app. https://i.sstatic.net/oE8rZ.png Note: I have imported the scene using gltfLoader and waiting for al ...

three.js

The namespace does not have any exported object named 'LocationState'

I encountered the following issue while attempting to execute my TypeScript application: Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'. Here is a snippet from my pack ...

javascriptnode.jstypescriptnpm

The useTransition() method in React remains stuck in the isPending state when making API calls from routes in the /pages/api directory

I'm encountering an issue with the useTransition() function where it remains true and never changes back to false. I am attempting to delete a record from MongoDB and after completion, I want to refresh the React Server Component following the guideli ...

javascriptreactjsnext.jsnext.js13

Incorporating a Layered Div onto a Presentation Slider

Over at , we have a slider featured on the homepage. I am attempting to place a div ABOVE the image but BELOW the text. Essentially, my goal is to add a semi-transparent white overlay to enhance the image on the slider while keeping the text visible for b ...

javascriptjqueryhtmlcsswordpress

Revamping the values attribute of a table embedded in a JSP page post an AJAX invocation

I am encountering an issue with displaying the content of a table. The table's data is retrieved via an AJAX request when clicking on a row in another table on the same page. Here is my code for the JSP page: <table id="previousList" class="table" ...

javascriptjqueryajaxjsp

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

I have an image of an arrow inside a div. The div is positioned fixed in the bottom right corner of an extremely wide page. Is there a way to utilize jQuery to scroll the window 600px to the right each time the arrow is clicked? Also, can I detect when th ...

javascriptjqueryhtmlcssscroll

Is there JSON data available to determine the overall attendance rate in percentage?

I have a set of attendance data for a specific student. Each subject is marked with a 1 if the student was present, and a 0 if absent on a particular date. I need assistance in calculating the total attendance based on this information... { " ...

javascriptnode.jsjsonmongodbmongoose