Move orbit control on button click

Questions
,
1

Hi all, I’m newbie in threejs.

I have a cube with 6 different color faces. User can use OrbitControls to see different faces of the cube. I also have 6 buttons in dat.gui as a shortcut to go to the desired color face. My objective is when clicking on those buttons, the camera in OrbitControls will move from its current position to the desired color face just like when user manually move/drag the OrbitControls, when it stops, user should see the desired color face only. I somewhat got it working when y value of the camera is 0, using right angled triangle to calculate x,z for the tween. When y value is not 0, the tween sometime give unexpected result.

I have my demo at https://syckkt.csb.app/

Is my approach correct or is there a better way to do it? Thanks.

2

I propose to use a spherical coordinate system (longitude/latitude, constant height), instead of cartesian x,y,z coordinates. Of particular interest should be the part on conversion between spherical and cartesian coordinate systems. This would make it easier to interpolate in one (1) clip, instead of two separate steps.

(Did you notice how in your current approach the distance between the camera and cube keeps increasing with repeated and alternating clicks on a “side” and a “pole” face, like for instance “Green” and “Blue” face?)

A rough outline of the algorithm I would aim for:

  • compute the current longitude, latitude of the camera position.
  • identify ∆-longitude, ∆-latitude between camera orientation and target face normal.
  • over the same time interval: interpolate both ∆-longitude and ∆-latitude in one go.
3

Thanks for your suggestion. Your idea is spotted on. I found camera-control library for threejs, it uses sphere coordinate system and I got it working now. I will look more into the math behind it to see if I can achieve the same result using orbitcontrols in the future. Thanks again!!

1 Like