Animate camera to set positions

Questions
, ,
1

Hello,

I’m trying to rotate/position a camera to arbitrary views of a model (e.g. the start view, top, right, etc.) then have active orbit controls again (similar to Rotate camera and Update orbitControl with the new camera rotation).

To do that, I created a move() function in this example: https://jsfiddle.net/0qfjuaL8/

I’m nearly there, but trying to solve these issues that I’m not quite understanding:

  • Animate from top to start: there is a sudden jump in rotation in the y-axis at the beginning of the animation. What’s causing that and how might I make that smooth throughout the animation?
  • Animate from top to bottom (or vice-versa): the camera moves through the model. How can I detect this case (and cases like it, with opposite views) and have the camera rotate around the model instead?
  • Rotation values (x, y, z): I can make sense of the position coordinates, but some of the rotation values (e.g. x: -3.04 in the top view) have been found only through trial and error. If there’s a more mathematical way to arrive at these numbers for different views, it’d be helpful to understand that. They don’t always seem to be multiples/fractions of Math.PI, as far as I can tell.

Any help would be greatly appreciated. Thank you very much!

2

From my understanding of your jsfiddle:

1st bullet: it looks like you are accessing (lines 92-97) the r_inc and p_inc variables before they have been set (lines 116-125).

2nd bullet: the camera moves along a straight line between current and target position. Transitioning from top <=> bottom (and vice versa) goes right through your model. Instead, you may want to orbit (along a circular path) around your object.

3rd bullet: no opinion yet, sorry

[Edit:] I’d advise to forgo the grid display and insert an AxesHelper instead. An AxesHelper points a red, green and blue line in positive x,y,z directions. That way you can easier keep track of the direction the camera is looking.

3

Instead of using static top, bottom, and right buttons, you can try a more dynamic solution like the viewport gizmo.

If the buttons are just for demonstration and you want to rotate the camera programmatically, you can try one of the following options:

  1. Object3D as the camera’s parent:
  • Add the camera as a child of an Object3D.
  • Set the camera’s distance from the Object3D.
  • Rotate the Object3D.
  • Update the camera’s lookAt (if needed).
  • Update the OrbitControls.

  1. Curves:
    Use predefined curves to define the camera’s path. See this spline example (enable the animationView checkbox).

  2. Virtual sphere:
    Use a virtual sphere with the Spherical class, to control the camera rotation using spherical coordinates (theta, phi). This approach avoids issues like, Gimbal lock or camera inversion, which can occur with the Cartesian rotations or Quaternions, especially when the coordinates are near the poles.

1 Like