Rotating a camera in ThreeJS for a quick orbit

Question

Rotating a camera in ThreeJS for a quick orbit

I am using an orbital camera that orbits around a globe with markers for users to interact with. When a user clicks on a marker, the camera moves to that specific point.

To animate this movement, I am utilizing TweenMax as shown below:

 TweenMax.to(currentPos, 3, {
     theta:targetPos.theta, 
     phi:targetPos.phi, 
     radius:targetPos.radius, 
     ease:Circ.easeIn, 
     onComplete:btnZoomComplete,
     onUpdateParams:["{self}"], 
     onComplete:SataliteTweenComplete, 
     onUpdate: function(tween) {
       controls.setThetaPhi(tween.target.theta, tween.target.phi, tween.target.radius);
     }
});

While this method works well, it does not always take the shortest route to reach the destination, often resulting in the camera going 'round the back' of the globe.

I have encountered difficulties with ThreeJS's angle measurement system which jumps from 0 to 1.57 (equivalent to 90 degrees), then to 3.14 (180 degrees), and abruptly shifts to negative values starting at -3.14 and so on. This has made it challenging for me to calculate the optimal path.

For instance, if the camera is at 2.6 and needs to move across to -2.61, the animation currently goes counter-clockwise (from 2.6 to -2.16) instead of clockwise (from 2.6 to 3.14, -3.14, and finally -2.61).

I would greatly appreciate any guidance on how to determine the correct direction to traverse and seamlessly animate from one point to another.

The two main challenges I face are figuring out the direction of rotation and smoothly transitioning from one angle to another, such as moving from 2.6 to 3.14, transitioning to -3.14, and arriving at -2.61

javascript math three.js trigonometry

Answer 1

Answer №1

That "unusual unit-system" mentioned is simply measured in radians, a common practice to represent theta/phi values within a range of -180° to 180° and -90° to 90° (similar to latitude/longitude). The conversion between radians and degrees is straightforward:

angleDegrees = radians / Math.PI * 180;
radians = angleDegrees / 180 * Math.PI;

When using the tweening-library for interpolation, it operates on numerical values without contextual understanding. The challenge arises when determining the shortest path for rotations. However, this can be addressed prior to initiating the tween.

For instance, let's consider animating from 2.6 to -2.6 (equivalent to 149° to -149°).

var from = 2.6, to = -2.6;

The direction and angular distance for the animation can be calculated as

var distance = to - from; 
// === -5.2

A negative value indicates counterclockwise rotation, with 5.2 (~298°) being the total distance covered by the camera. It's important to note that any angle plus or minus 360° (2 * Math.PI) will bring you back to the same position. Let's adjust for this scenario:

var distance = (to + 2 * Math.PI) - from; 
// === 1.083185307179586 (~62°)

Hence, rotating from 2.6 to -2.6 + 2 * Math.PI (i.e., from 149° to 211°) results in a clockwise animation along a shorter path.

To ensure all values remain within their defined ranges, slight modifications are made in the onUpdate-function for proper wrapping:

controls.setThetaPhi(
    tween.target.theta % Math.PI, 
    tween.target.phi % Math.PI, 
    tween.target.radius);

Prior to starting the animation, updating the currentPos value with accurate data is recommended.

The final step involves finding a solution for a generalized case to determine the appropriate rotation direction based on whether the distance exceeds 180°:

if (Math.abs(to - from) > Math.PI) {
  if (to > 0) { // subtract a full circle if 'to' is positive, add otherwise
    to = to - 2 * Math.PI;
  } else {
    to = to + 2 * Math.PI;
  }
}

Answer 2

That "unusual unit-system" mentioned is simply measured in radians, a common practice to represent theta/phi values within a range of -180° to 180° and -90° to 90° (similar to latitude/longitude). The conversion between radians and degrees is straightforward:

angleDegrees = radians / Math.PI * 180;
radians = angleDegrees / 180 * Math.PI;

When using the tweening-library for interpolation, it operates on numerical values without contextual understanding. The challenge arises when determining the shortest path for rotations. However, this can be addressed prior to initiating the tween.

For instance, let's consider animating from 2.6 to -2.6 (equivalent to 149° to -149°).

var from = 2.6, to = -2.6;

The direction and angular distance for the animation can be calculated as

var distance = to - from; 
// === -5.2

A negative value indicates counterclockwise rotation, with 5.2 (~298°) being the total distance covered by the camera. It's important to note that any angle plus or minus 360° (2 * Math.PI) will bring you back to the same position. Let's adjust for this scenario:

var distance = (to + 2 * Math.PI) - from; 
// === 1.083185307179586 (~62°)

Hence, rotating from 2.6 to -2.6 + 2 * Math.PI (i.e., from 149° to 211°) results in a clockwise animation along a shorter path.

To ensure all values remain within their defined ranges, slight modifications are made in the onUpdate-function for proper wrapping:

controls.setThetaPhi(
    tween.target.theta % Math.PI, 
    tween.target.phi % Math.PI, 
    tween.target.radius);

Prior to starting the animation, updating the currentPos value with accurate data is recommended.

The final step involves finding a solution for a generalized case to determine the appropriate rotation direction based on whether the distance exceeds 180°:

if (Math.abs(to - from) > Math.PI) {
  if (to > 0) { // subtract a full circle if 'to' is positive, add otherwise
    to = to - 2 * Math.PI;
  } else {
    to = to + 2 * Math.PI;
  }
}

Rotating a camera in ThreeJS for a quick orbit

Answer №1

Similar questions

Transform form data from square notation to dot notation using jQuery

Steps for adding multiple images to a page in a React application:1. Create a

Animation spinning on a different axis

Puppeteer: Locating elements using HTML attributes

Adding Numerous Elements to a Container

Steps for appending a string to a variable

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

Can Mongoose handle document arrays editing and version control efficiently?

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Guidelines for creating an auto-scrolling React Native FlatList similar to a Marquee

Is there a way to import a module generated by typescript using its name directly in JavaScript?

What are effective methods for testing HTML5 websites?

Using jQuery ajax in PHP, the ability to remove retrieved information from a different page is a

Retrieving information from Firebase using React

Tips on downloading an image using the URL in nestjs

Several mistakes occurred involving auth0, react, apollo, babel, and webpack

Asynchronously retrieving results in MongoDB

Challenges faced when attempting to launch a React-powered application on Railway platform

What steps can be taken to verify if the user has transmitted a JSON Web Token?

Resolving Problems with setInterval in jQuery Ajax Calls on Chrome