How can I determine the width of the visible portion of a scene being rendered?
For instance, if there is a mesh with a width of 100 units but is being displayed on the screen with a specific level of zoom, how do I calculate the actual width of the mesh that is currently being rendered on the screen?
It is essential to be accurate in this situation.
To determine the visible rectangular area based on the camera's field-of-view, camera.fov, and a specified distance, dist, from the camera.
Considering that the object likely has depth, you must select one plane within the mesh and perform the calculation at that specific distance.
Here is the method to compute the visible height and width for a given distance of dist from the camera.
const verticalFOV = THREE.MathUtils.degToRad( camera.fov ); // converting vertical fov to radians
const visibilityHeight = 2 * Math.tan( verticalFOV / 2 ) * dist; // visible height
const visibilityWidth = visibilityHeight * camera.aspect; // visible width
UPDATE: A new built-in function is now accessible: PerspectiveCamera.getViewSize():
const targetAngle = new THREE.Vector2(); // create once and reuse it
camera.getViewSize( distance, targetAngle ); // the output will be saved in targetAngle
three.js r162
When dealing with a perfectly spherical object, it is important to consider that it will cover more of the view up close due to the tangent point being in play, making it impossible to see the 'poles'.
Here is how you can calculate this for a spherical object:
// In this calculation, we are using the triangle formed by the camera, tangent point on the sphere, and center of the sphere
var targetAngle = 2 * Math.asin(objectRadius / distanceToCamera);
var vFOV = THREE.Math.degToRad(this.fov);
var normalizedHeight = targetAngle / vFOV;
To obtain the screen height, multiply this value by your viewport width. For determining the width, you must factor in hFOV - refer to: 90 degree field of view without distortion in THREE.PerspectiveCamera
I'm encountering significant challenges when trying to install packages using npm. The output log I'm receiving is not helping me at all, and I'm unsure of where or how to address this issue. 0 info it worked if it ends with ok 1 verbose cli ...
In my project, I have implemented the @typescript-eslint/no-floating-promises rule. This rule highlights code like this - functionReturningPromise() .then(retVal => doSomething(retVal)); The rule suggests adding a catch block for the Promise. While ...
While delving into the world of AngularJS, I stumbled upon an interesting revelation - when objects are placed in a prototype object, any instances inheriting from that prototype will alter the prototype's objects upon assignment. For example: funct ...
Greetings, fellow Stackers! Please pardon my formatting as this is my debut question on this platform. I am currently working on a basic vector drawing tool. If you want to view the full CodePen code for reference, feel free to click here. Here's t ...
There is a confirmation dialog box on my app. When I click the click button, the dialog box pops up. If I then click the 'cancel' button in the dialog box, it should close. The problem arises when I try to open the dialog box for the second time ...
PageMethods worked perfectly when sending a single parameter to a code-behind aspx page. However, I encountered the error "Unknown web method" when attempting to provide two parameters (or an Object other than a String). The functional code in my aspx pag ...
I am currently working on developing a web application using node.js. However, I have encountered an issue when trying to use special characters in my navigation path, resulting in the error message "Cannot get /contest". In order to resolve this problem ...
Within my HTML code, I have included a button like so: <button type="submit" id="post-form" class="btn btn-primary" onclick="send()">Send</button> Accompanying this is the JavaScript function send() : fu ...
Here is the code snippet for Login.ts: export class LoginPage { public version:string; constructor(public navCtrl: NavController, public navParams: NavParams, private appVersion: AppVersion) { this.appVersion.getVersionNumber().then((val) => { ...
Currently, I am working on a client-side javascript application for image manipulation. However, some of the operations are running quite slowly in the browser, taking about 2-3 seconds to complete. To address this issue, I am considering implementing a s ...
I am currently struggling with setting up Braintree hosted fields on my registration form. Unfortunately, there are significant gaps between the fields which doesn't look appealing. Despite referring to the braintree documentation and guides, I find t ...
When developing an application with Symfony2 and using Jquery as a JavaScript FW along with Twig templates, I encountered the need to pass selected tag values from the template back to the controller upon submission. After rendering a template from the con ...
I am looking to update my grouped array with new records. For example: var cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford& ...
Having trouble accessing the array returned by a PHP function in JavaScript. Instead of seeing the actual array, I get the message: function Array() { [native code] } How can I retrieve and work with the items in the array? When I try using alert(pad ...
When implementing this code snippet: jQuery: $(this).next().slideDown() with a selector :$(this).next() HTML: <li class="sub-menu two-level-collapse"> <a href="javascript:void(0);" class="two-level-collapse parent">< ...
Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...
I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...
I'm encountering an issue with updating the state after fetching data from my API. The API response seems to be correct, but for some reason, my weatherData-hook is not getting updated and it returns undefined. Can anyone point out what mistake I migh ...
Here is a link to the complete source code angular .module('app') .factory('Friends', ['$http',function($http){ return { get: function(){ return $http.get('api/friends.json') .t ...
Need help displaying a specific object: cars: { number': 1, 'overload': 1,'brand': {'0': {'porsche': [{'price': 10, 'id': 0}],'vw': [{'price': 20, 'id': 1}] ...