Maintaining camera orientation is not retained when switching between different camera types in Three.js

Check out the full code

Hey there, I've encountered an issue when switching between a perspective camera and an orthographic camera. My objective is to seamlessly transition between these two camera types while maintaining the camera's position and orientation intact. Take a look at the relevant code snippet (line 98):

let display = gui.addFolder("Display");
display.add(guiOptions.display,"orthographicCamera").name("Orthographic Camera").onChange(function(){
  var position=camera.position;
  var target=controls.target;
  var quaternion=camera.quaternion;
  if (guiOptions.display.orthographicCamera){
    camera = new THREE.OrthographicCamera(
      window.innerWidth / - (zoom / scaleFactor),
      window.innerWidth / (zoom / scaleFactor),
      window.innerHeight / (zoom / scaleFactor),
      window.innerHeight / - (zoom / scaleFactor),
      -500, 1000);
  }
  else{
    camera = new THREE.PerspectiveCamera( 115, window.innerWidth / window.innerHeight, 0.000001, 10000 );
  }
  camera.position.set(position.x,position.y,position.z);
  camera.quaternion.set(quaternion._x,quaternion._y,quaternion._z,quaternion._w);
  controls=new THREE.TrackballControls(camera,renderer.domElement);
  controls.dynamicDampingFactor = .15;
  controls.target=target;
});

I'm facing an issue where transitioning from a perspective camera to an orthographic one results in a different orientation for certain camera rotations. Initially, I thought it was related to the quaternion attribute, but resetting it didn't yield any changes.

I'm currently stuck on resolving this problem. Any assistance would be greatly appreciated, thank you in advance!

EDIT: I managed to solve the issue, but I am occupied at the moment. I'll update with my solution later on.

Answer №1

If you want to achieve something similar, consider the following approach:

orthoCamera = createOrthographicCamera();
orthoControls = document.body.appendChild(renderer.domElement);
orthoControls = new THREE.TrackballControls(orthoCamera, renderer.domElement);

perspectiveCamera = createPerspectiveCamera();
perspectiveControls = new THREE.TrackballControls(perspectiveCamera, renderer.domElement);
...
display.add(guiOptions.display, "orthoCamera").name("Orthographic Camera");
...
function animate() {
    requestAnimationFrame(animate);
    orthoControls.update();
    perspectiveControls.update();
    
    if (guiOptions.display.orthoCamera) {
        renderer.render(scene, orthoCamera)
    } else {
        renderer.render(scene, perspectiveCamera)
    }
}

This setup allows both controls to be active simultaneously, making it easy to switch between different camera views for rendering.

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

use angular to dynamically add attributes to html components

When I need to insert attributes into a component that I plan to reuse, I receive different attributes as strings. For example, if I want to add an element in my component: <input type="text" maxlength="10" placeholder="enter your name"/> I will re ...

Handling session expiration in ASP.NET MVC when making an AJAX call by redirecting to the login page

I'm currently learning ASP.NET MVC and I'm a newbie in it, so I'm struggling to find a solution for a specific problem. If anyone has encountered this issue before, I would appreciate any advice. Thank you! In my project, I am using ASP.NET ...

Seeking a method to create a straight path connecting two points on a sphere using Three.js

My app, a flight tracker, is in need of drawing a line between two points (such as cities) on a sphere (representing the Earth) along its surface (using the great circle route) with Three.js. I am considering 2 different approaches - (a) creating a Three. ...

What is the method to establish a default value for ion.rangeSlider?

Can anyone assist me in setting the default value for my input? When I submit the range within the form, it always defaults to the minimum and maximum values rather than considering the default value I specified in the input field. How can I resolve this ...

Understanding Javascript array output / Breaking down URL hash parameters

Currently, I am working on extracting a single value from a URL String that contains three variables. The code snippet I am using for this task is as follows: var hash_array = location.hash.substring(1).split('&'); var hash_key_val = new Arr ...

Personalize the 'Standard', 'Fresh', and 'Modify' aspx widget devoid of Share Point or Infopath integration

As I work on developing a Sharepoint 2010 page to meet my team's needs, I am faced with restrictions on using Sharepoint Designer and InfoPath. This means I am unable to customize the default form for adding, editing, or viewing items on my individual ...

The Process of Enforcing Immutability

I am curious about the implementation of tries in immutability as it relates to JS. I understand that there is significant structural sharing involved. Let's consider a graph-like structure: a -- b | c | d -- h | e ...

Do Vue component props have the ability to be changed?

Hello everyone! I've been diving into a Vue.js project recently and my goal is to break it down into smaller components whenever possible. One of the components in question is responsible for rendering a list from the parent component, and I'm in ...

Extract the innerHTML input value of each row in an HTML table

I've encountered an issue with my HTML table that contains static values, except for one cell which has an input field. When I try to convert the row data into JSON, the single input field is causing complications. Without the input field, I can suc ...

I am facing an issue with my JavaScript JSON code in an HTML page where the RESTful API array objects are not rendering, even though I am successfully retrieving data from the API. What steps

view image description hereMy issue arises from the fact that the items in the API are not appearing in HTML, where did I make a mistake? <button onclick = "showCountries()">Display Countries</button> <div id = &qu ...

Guide on rendering a component in React jsx using innerHTML

In my current project, I am developing a feature that allows users to toggle between graph and list views. The view's container is assigned the class name "two". toggleGraphView() { const two = document.getElementsByClassName('two') ...

Retrieve mongodb objects that fall within a specified date range

Within my collection, there is an example document structured as follows: { "_id" : ObjectId("5bbb299f06229dddbaab553b"), "phone" : "+38 (031) 231-23-21", "date_call" : "2018-10-08", "adress_delivery" : "1", "quantity_concrete" : "1", ...

jQuery experiences difficulty in sending arrays in the JSON content type

I have a JavaScript script that looks like this: $.ajax({ url: 'myservice', type: 'POST', contentType: 'application/json', data: ["test"], }); However, when I execute the script, it sends a request to myservi ...

Reset form upon submission

When submitting a form and adding the contents to an array, I encounter an issue where the item added to the array remains linked to the form. How can I add the item to the array and then clear the form, similar to using jQuery's reset() function? Be ...

The local npm package that has been installed is not linked by symlink

After running the command npm i ./my_modules/mypackage, I noticed that the local npm package was added to my dependencies as: "dependencies": { "mypackage": "file:my_modules/mypackage" } Although it appeared in the no ...

Save the click value for future use

My appointment form is divided into separate panels. At Step 1, if a user clicks on London (#Store1), I want to hide the Sunday and Monday options from the calendar in panel 5. Essentially, I need to save this click event so that when the user reaches th ...

Tips for integrating SQL queries into a document that consists mostly of JavaScript and JQuery

I am currently in the process of integrating a SQL database write into my file that is primarily comprised of JavaScript and jQuery. While I have come across some PHP resources online, I am facing challenges incorporating the PHP code into my existing scri ...

"Which is the better choice for a Django application's for loop: views.py or

I'm in the process of creating a Django app that features a word list. The app currently utilizes a speech function to inform the user of the first word on the list. The user is then able to record an audio clip of a word they say, which is converted ...

Eloquent JavaScript Chapter 5 Poser: Can you solve the exercise question using the array.some method

This particular challenge really had me scratching my head for a while. After struggling with it, I finally caved and resorted to looking up the solution online. The hint provided was quite cryptic, and dealing with "De Morgan's Laws" in JavaScript us ...

Unable to display Boostrap modal upon clicking href link

Can someone help me troubleshoot why my pop modal is not displaying after a user clicks on a specific link on my webpage? I have attempted the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></s ...