The focal length in THREE.js PerspectiveCamera seems to be miscalculated, which is not aligning with the field of view

When working with THREE.js, one of the fundamental aspects is constructing a camera using a specific function:

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

An interesting aspect to consider regarding cameras is the relationship between field of view and focal length in optics, defined by this equation:

FOV = arctan(d/2f)

Here, FOV represents the vertical FOV in degrees, d corresponds to the image plane's height in mm, and f denotes the camera's focal length in mm.

The documentation on this subject speaks about how d is automatically set as 35mm / aspectRatio.

This calculation allows us to express FOV differently:

FOV = arctan((35/(width/height))/2f) = arctan(filmHeight / 2f)

To verify accuracy, I checked the following value to see if it matched the input FOV of 75:

Math.atan(camera.getFilmHeight()/(2 * camera.getFocalLength())) * 180 / Math.PI;

Surprisingly, the result was 37.50000000000001, which stands at precisely half of the projected focal length of 75.

At this point, I pondered whether I made an error during my calculations or misunderstood the values provided by THREE.js.

Answer №1

The field of view (FOV) angle in the perspective camera is the vertical angle from the bottom to the top of the view, measured in degrees.

When calculating the FOV angle, consider the angle of the center of the view to the top:

To calculate this angle, use the formula:

Math.atan( (camera.getFilmHeight()/2) / camera.getFocalLength())) * 180 / Math.PI;

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

This calculated angle is actually half of the FOV angle:

fov = 2 * Math.atan( (camera.getFilmHeight()/2) / camera.getFocalLength())) * 180 / Math.PI;

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

Refresh the page using a promise in Angular after a delay of 3 seconds

Currently, I am working on enhancing the functionality of the login page. In case a user enters an incorrect login and password combination, my goal is to have the page automatically reload after 3 seconds. Despite my best efforts, I have encountered chall ...

What methods can be used to eliminate superfluous `require(...)` or `import "...` statements while working with Rollup?

Currently, I am in the process of developing a library named share which will be utilized in various other services. To bundle this library, I have opted for Rollup.js. share serves as a common library accessed by multiple services, therefore it is essent ...

What is the best way to access external value in an Angular directive?

check out this plunker link. HTML: <body ng-app="app"> <h1>selectable</h1> <selectable text="link1" status="true"></selectable> <selectable text="link2" status="false"></selectable> <p> ...

What is the process ShaderToy uses to load sound files directly into a texture?

I'm attempting to replicate the functionality of shadertoy in passing audio frequency and waveform into a shader using three.js. In this specific example, it appears that IQ is converting audio data into an image which is then utilized as a texture i ...

Is it possible to synchronize functions in node.js with postgresql?

I’m facing some challenges in managing asynchronous functions. Here is the code snippet that's causing the issue: var query = client.query("select * from usuario"); query.on('row', function(user) { var queryInterest = client. ...

Whenever a click event is triggered, the Vue method is executed twice

Why is the set method being executed twice? Check the console when you click the star. Removing @click="set(rating)" results in no action, indicating it is not called elsewhere. http://jsfiddle.net/q22tqoLu/ HTML <div id="star-app" v-cloak> ...

Fetching user feeds from Facebook with AngularJS is easier than you think

I have searched through multiple articles but have yet to find a solution for this particular issue. My goal is to retrieve user feeds from Facebook. How can I achieve this? Below is my code: var newMod = angular.module('newapp', []); newMod.c ...

Addressing simple JavaScript "async" AJAX requests that are sequenced and reliant on each other

I'm currently developing an application that includes a dashboard on its main page. In order to address any potential loading issues, the content of the dashboard is being calculated asynchronously using Ajax. This means that users do not have to wait ...

How is it possible for the javascript condition to be executed even when it is false?

Despite the condition being false, the javascript flow enters the if condition. Check out the code snippet below: <script> $(document).ready(function() { var checkCon = "teststr2"; console.log("checkCon: "+checkCon); if(checkCon == " ...

Why does the shadow in Three.js only appear in a limited region?

I brought in a model and noticed that the shadow is only visible in a small area (highlighted in green in the image). How can I make all objects display their shadows? https://i.sstatic.net/hmzp2.png Below is my code snippet. light = new THREE.Direction ...

Enhance your SVG path by allowing users to drag points on Quadratic or Cubic Bezier curves

In my project, I am trying to make it so that when a user drags the point, it always stays aligned with the path. The goal is for the command Q, C, or S to adjust the curve based on the position of this draggable point, rather than treating it as a control ...

Incorporating Meteor js into an established user system

I'm completely new to the world of Meteor and I am looking to integrate it with my current system that relies on a MongoDB database. As I explore Meteor, I have discovered that there are packages like accounts-facebook and accounts-twitter which assis ...

What is the best way to activate an event listener only after a button has been clicked?

Currently, I am developing a game that includes a timer and an event listener that notifies the user not to switch tabs. However, I am facing an issue where the event listener triggers before the game's start button is clicked. Is there a way in JavaS ...

What are some methods for singling out a specific table row?

When working on my app, I faced the task of importing a JSON file and displaying its contents in a table with 3 columns. However, there are two main issues that arose: Utilizing array index for the row key is not recommended due to the table also having ...

Tips on customizing the MSAL login commands for successful integration with numerous users

Successfully implemented the code to login using a username and password combination with Cypress for a webapp integrated with MSAL. In the end-to-end Testfile: describe('Login with MSAL as xxUsername', () => { beforeEach(() => { cy.Lo ...

Using ngFor in Angular 2-5 without the need for a div container wrapping

Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...

Fetching basic information from an API using Ember.js

I am facing an issue with my Ember.js page where I am trying to retrieve data from a REST API. The API is provided by apiary.io and it returns a simple set of data as shown below: {"semantics": [ {key : "11111", name : "Block 1"}, {key : "22222", name ...

Error in AngularJS: The argument 'fn' is not a function and is undefined

I'm encountering an issue with AngularJS 1.6, and the error message is stating: Error: [ng:areq] Argument 'fn' is not a function, got undefined I suspect the problem lies within my testService, and I'm seeking assistance in identify ...

Repeated Values Issue in Material Ui List Function

Struggling to display only the newly added todo item in the list? Utilizing the material ui library for list creation, I have successfully displayed the new item. However, instead of showing just the specific value that was added, the entire array is being ...

The website I created seems to be stuck in an infinite loop, preventing it from fully loading due to the continuous execution of code in JavaScript

The web page I created to calculate the number of possible 3-digit numbers using only the digits 1 - 6 in ascending order is not loading. I suspect there may be an error in the while loop section of the code below. I attempted to replicate the same output ...