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!
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.
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:
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.
Curves:
Use predefined curves to define the camera’s path. See this spline example (enable the animationView checkbox).
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.
Lines 92-97 are inside a function defined at line 88, which then gets called after r_inc and p_inc values are defined (I checked to make sure by running a console.log() of their values). The change in y-axis values looks visually like a sine wave, even though r_inc and p_inc are constant. So, to me, that result is confusing.
I think that’s it. The camera will literally move in a straight line from point A to point B, unless a specific path is defined for it to follow.
I wonder if they might also be trigonometric values.
The gizmo is very intuitive and impressive! It must be doing something more than just adding the control itself - as in this example, the animations of the model are smooth when controlled via the gizmo.
I do need to be able to control camera position programmatically.
Object3D as the camera’s parent - this sounds like a solid way to do it. I assume the Object3D here is not the model being viewed, but rather an additional invisible object, set at the model’s position, just for simplifying manipulation of the camera’s position. So if I understand correctly, for the above example, this would be positioned at e.g. (0,0,0) and simply gets rotated in an animation loop when switching to a particular view of the model. EDIT: Is there an example of Set the camera’s distance from the Object3D - not sure how to implement that step? (like this?)
Curves: this makes sense. As a solution, it’s probably more limited as you’d need to handle for various from/to transitions.
Virtual sphere: do you know if there’s an example of how to implement this somewhere? I assume it’s the same idea as 1), but using a Spherical class for the parent rather than object3D (with spherical coordinates, as you had said).
Thank you so much! These approaches are really insightful!
Made a parent Object3D, added the camera to it and rotated that instead.
However, that doesn’t seem to solve any of the issues - in fact, it messes up the OrbitControls after animation (even with controls.update()). A little bit lost with what exactly to do with that.