Tips for determining the starting horizontal and vertical rotation of a camera for OrbitControls to utilize (Azimuthal and Polar Angles)

Is there a way to set the initial horizontal and vertical rotation of a PerspectiveCamera that the OrbitControl can then use? I attempted to use .rotateX(X) .rotateY(Y) in PerspectiveCamera, but it doesn't seem to have an effect.

In the three.js documentation for the OrbitControl's example, they mention:

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set(0, 20, 100);
controls.update();

I want to achieve the same result but with the horizontal and vertical rotation.

Below is the relevant code:

camera.js

import { PerspectiveCamera } from 'three'
import { tweakParams } from 'src/World/utils/twekParams'

function createCamera() {
  const camera = new PerspectiveCamera(
    35,
    1,
    0.1,
    100
  )

  camera.userData.setInitialTransform = () => {
    // Get initial position and rotation values from a Singleton (tweakParams)
    const cameraPosition = tweakParams.camera.transform.position
    const cameraRotation = tweakParams.camera.transform.rotation
    camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z)
    camera.rotateX(cameraRotation.x)
    camera.rotateY(cameraRotation.y)
  }

  return camera
}

export { createCamera }

controls.js

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createControls(camera, canvas, { enablePan = true, autoRotate = false } = {}) {
  const controls = new OrbitControls(camera, canvas)
  controls.enableDamping = true
  controls.enablePan = enablePan
  controls.autoRotate = false
  controls.autoRotateSpeed = 0.25
  controls.maxDistance = 30

  camera.userData.setInitialTransform()
  controls.update()

  // This function is called in the animation Loop.
  controls.tick = () => controls.update()

  return controls
}

export { createControls }

And here is the singleton that stores the initial transform values of the camera

export const tweakParams = {
  camera: {
    transform: {
      position: {
        x: 6.83487313982359,
        y: 9.164636749995928,
        z: 13.384934657461855
      },
      rotation: {
        x: Math.PI * 0.5,
        y: Math.PI * 0.5
      }
    }
  }
}

Currently, this singleton contains placeholder values, but in the future, it should store the last transform attributes the camera had before leaving the current page.

The initial camera position works, but the rotation does not. Any suggestions on how to address this issue?

Answer №1

When attempting to rotate the PerspectiveCamera, it becomes evident that OrbitControls does not allow for this functionality. This happens because OrbitControls replaces the camera's rotation values.

To overcome this limitation, I have employed the utilization of OrbitControls.target which allows the perspective camera to revolve around specified target coordinates.

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

Reloading the React/Laravel application causes the app to crash and display a blank page

My current setup involves a react application running on the Laravel 5.4 framework. The problem I'm facing is that whenever I refresh a page with a URL structure like {url}/{slug}, it causes issues within the application. Within my App.js file, here ...

Determining if a variable has been defined in JavaScript

In my JavaScript code, I declare global variables named with the prefix "sld_label" where "label" can be any string. These variables are initialized as objects that contain a function called setval. Now, I have a function that receives a label in a string ...

Tips for integrating Material UI Drawer with Redux

I have been attempting to incorporate a Drawer feature that displays on the left side while utilizing Redux to maintain the state of the Drawer. Unfortunately, I seem to have made an error as my onClick events are not responsive. Here is the code: Reduce ...

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

What sets xhr.response apart from xhr.responseText in XMLHttpRequest?

Is there any difference between the values returned by xhr.response and xhr.responseText in a 'GET' request? ...

Was not able to capture the reaction from the Angular file upload

I've been attempting to upload a single file using the POST Method and REST Calling to the server. Despite successfully uploading the module with the code below, I encounter an error afterwards. Is there anyone who can lend assistance in troubleshooti ...

Having trouble with jQuery Ajax not transmitting data properly in a CodeIgniter project?

I am brand new to the Codeigniter MVC framework. Whenever I attempt to send data through ajax from the views to the controller, I encounter an error. Please click here to view the image for more details. Here is the code snippet: views/ajax_post_view.php ...

Adding methods to a constructor's prototype in JavaScript without explicitly declaring them

In the book Crockford's JavaScript: The Good Parts, there is a code snippet that demonstrates how to enhance the Function prototype: Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; }; Crockford elabo ...

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

Retrieving PHP output from multiple arrays using AJAX

I'm new to AJAX and I'm struggling to retrieve arrays. My goal is to update a notification bar in real time using AJAX. I've managed to update the count displayed on the balloon, but I can't figure out how to also fetch messages from My ...

Retrieve the image link from a Flickr JSon Feed

I'm currently displaying images from a flickr feed on my webpage. Everything is working well, but when I click on an image, it takes me to the page where the image is hosted. What I want is for the images to link directly to the image itself, not th ...

The uncertainty surrounding the usage of checkboxes in D3.js

I am faced with the challenge of adding checkboxes to multiple groups within an SVG, each containing a circle and text element. I have attempted to accomplish this by using D3 to append foreignObject tags and then add checkboxes to each group. The code I h ...

Is there a way to display the result array in Node.js after a MongoDB find query has been executed?

I'm new to Node.js and I'm trying to pass an array of data to a controller. However, I'm facing some challenges in inserting for loop data into the array and also looking to access the resulting data outside the function. router.get("/list- ...

Beginning your journey with Mock server and Grunt

Although I have gone through the documentation available at , I am still struggling to get the mockserver up and running despite spending hours on following the instructions provided in the guide. Could someone please outline the precise steps or identify ...

The display message in Javascript after replacing a specific string with a variable

I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...

Optimal method for implementing $scope.$apply(); or $scope in scenarios outside of Angular when working with Angular Components

As outlined in Kendo's best practices, there are instances where Kendo necessitates the use of $scope.$apply(); to update Angular. However, with the emergence of the new AngularJS 1.5 component, it is advised against relying on $scope. The code for t ...

Activate the function for items that are overlapping

Here is a scenario I am working on: HTML <body> <div> <p>Text</p> </div> <body> JQuery $('div').click(function(){ $(this).find('p').fadeToggle('fast'); }); $('bo ...

Capturing error responses in a successful Javascript HTTP GET request

When I make an http request to a url, it returns a 500 error response as expected. However, the error is being captured in the success function instead of the error function. $http.get("myUrl") .then(function (response) { console.log(response) ...

challenges with managing memory during express file uploads

I'm experiencing memory problems with file uploads while hosting my site on NodeJitsu. When I try to upload files, my app crashes with this error message: { [Error: spawn ENOMEM] code: 'ENOMEM', errno: 'ENOMEM', syscall: 'spa ...

Top choices for creating animations using THREE.JS

Which animations work best in three.js? Are you using additional libraries like tween.js or something else for texture animations, moving objects, and showing/hiding objects? Thank you. ...