Ensuring Consistency in Object Size When Switching Between Perspective and Orthographic Cameras

Struggling to toggle between Perspective and Orthographic cameras in my script. I need objects at certain depths to maintain their projection size. I've reached a point of confusion when trying to understand the geometry...

Can anyone recommend a simple tutorial? This one seems too complex for me.

For objects with position.z==0, I currently have:

perspCamera = new THREE.PerspectiveCamera(45, W / H, 1, 1000);
perspCamera.position.z = 100;

var S=Math.tan((45/180)*Math.PI)*100;
orthoCamera = new THREE.OrthographicCamera( -S, S, S, -S, 1, 1000 );

This setup is incorrect.

Update:

I finally figured it out and will share my solution with a codepen link.

javascriptthree.jscoordinate-transformationperspectivecameraorthographic

Answer №1

Understanding the correlation between Z-distance and size during perspective projection:

var fov_y   = 45;
var depht_s = Math.tan(fov_y/2.0 * Math.PI/180.0) * 2.0;

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

In order to achieve orthographic projection using THREE.OrthographicCamera:

var Z      = 100;
var aspect = W / H;
var size_y = depht_s * Z;
var size_x = depht_s * Z * aspect; 

orthoCamera = new THREE.OrthographicCamera(
    -size_x/2,  size_x/2,
     size_y/2, -size_y/2,
     1, 1000 );

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 is the best method for displaying multiple slices within an SVG circle?

I'm currently working on a project involving a reactJS application. The goal is to display an svg circle that, when clicked, divides into n equal slices. I have successfully generated the individual slices with the following code: renderSlices = () ...

javascriptreactjssvgpath

What could be causing the failure of the JSON parse for dynamic link parameters?

I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application. This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invo ...

javascriptnext.jsaws-amplify

Encountering an issue when running the 'cypress open' command in Cypress

I am working with a Testing framework using node, cypress, mocha, mochawesome, and mochawesome-merge. You can check out the project on this github repo. https://i.sstatic.net/ItFpn.png In my package.json file, I have two scripts defined: "scripts": { ...

javascriptnode.jswindowsnpmcypress

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

javascriptcssreactjsantd

Can we move the "user" object to the forefront and retrieve it from a location other than the "on.AuthSateChanged(user => .... }" function?

Is there a way to define a ref in vuefire to firebase path that relies on the current User object? Can I bring the "user" object to the top level so it can be accessed outside the "on.AuthSateChanged(user => .... }" block? firebase-config.js import * ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

When you click, apply the hidden class to all the div elements

Is there a way to apply the .hide class to all .slide divs whenever the .option button is clicked? If so, how can I modify my JavaScript code so that all .slide divs receive the .hide class (if they don't already have it) upon clicking the .option bu ...

javascriptjqueryradio-button

I developed a straightforward MVC application that sends an HttpGet request and delivers an array containing 7 randomly generated, unidentified numbers to the View. [RESOLVED

A new MVC app was launched with a simple task of generating 7 random numbers between 0 and 9 to be placed at positions 1 through 7 (without starting with 0). Initially, the numbers are hidden with "X" marks. When the user clicks on the "Submit" button and ...

javascriptc#jqueryajaxasp.net-core

In Express.js, what is the best way to redirect to a specific route after sending a response to the client side?

As a beginner learning Express.JS, I am facing an issue with redirecting routes. My goal is to display a message to the user saying "Your data has been registered successfully." and then redirect them back to the form page after a certain time period. Howe ...

javascriptnode.jsexpressmean-stack

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

phpjavascriptjqueryhtmlcombobox

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

Currently, I am using components from https://material.angularjs.org/latest/ for a searcher project. One specific component I am working with is the md-datepicker, and I would like to implement some custom styles on it such as changing the background colo ...

javascriptjquerycssangularjs

The section element cannot be used as a <Route> component. Every child component of <Routes> must be a <Route> component

I recently completed a React course on Udemy and encountered an issue with integrating register and login components into the container class. The course used an older version of react-router-dom, so I decided to upgrade to v6 react router dom. While makin ...

javascriptreactjsreact-routerreact-router-dom

Transferring a JavaScript variable to PHP using Ajax within the same webpage

Check out my HTML and JavaScript code: <form id="form" action="javascript:void(0)"> <input type="submit" id="submit-reg" value="Register" class="submit button" onclick="showtemplate('anniversary')" style='font-family: georgia;font- ...

javascriptphpajax

Tips for transforming user inputs in HTML format into text within a prompt box

Is there a way to create a text prompt box for the user to input their name without risking the insertion of HTML elements into the page? I want to avoid any potential issues like inadvertently creating a new HTML element instead of displaying the intended ...

javascripthtmlprompt

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Currently, I am facing an issue with my hardware scanner that is connected to a Windows computer. Whenever I scan an item using the hardware scanner, the Windows computer retrieves the price/information about that specific item. Then, I manually input this ...

javascriptdatabasewindowsbrowser

What is the formula for finding the distance from the top-left corner of an HTML element to the top-left corner of the window?

Looking for a simple way to accomplish this? Take into account properties such as border and padding. Will this approach be effective even with box-sizing set to content-box or border-box? ...

javascripthtmlcssdom

What is the most effective method for attempting an AJAX request again after it fails with the help of jQuery?

Here is a suggestion for handling ajax errors: $(document).ajaxError(function(e, xhr, options, error) { xhr.retry() }) An improvement could be incorporating exponential back-off strategies ...

javascriptjqueryajaxxmlhttprequest

What could be causing the network error that keeps occurring when attempting to sign in with Google using React and Firebase?

Having an issue with Google authentication using Firebase. I set up the project on Firebase console and copied the configuration over to my project. Enabled Google sign-in method in the console which was working fine initially. But, after 2 days when I tri ...

javascriptreactjsfirebase

Improperly aligned rotation using tween.js and three.js

Utilizing three.js and tween.js, my goal is to develop a Rubik's cube made up of 27 small cubes grouped together for rotation by +Math.PI/2 or -Math.PI/2. To ensure smooth rotation, I am implementing the tween library. The specific issue I encounter ...

javascriptrotationthree.jstween

What is the proper way to use AJAX for sending data through a POST request?

Check out my Fiddle Currently, I am in the process of learning AJAX through a tutorial and so far, I have managed to retrieve the desired data and display it on the DOM quite effortlessly. However, I have encountered some difficulties when attempting to ...

javascriptjqueryajax

Display or conceal specific fields depending on the selection from a dropdown menu

I'm currently experimenting with using JavaScript and/or jQuery to dynamically hide specific HTML elements based on the selection in a drop down menu. Here is what my page setup looks like: [Drop down menu] [text field 1] [text field 2] [text field ...

javascripthtml