Dear Three js community,
After hundred of tutorials and stack overflow items I am out of options here.
Currently I am struggling with moving the camera with Tween from position A to position B and back to position A again.
The problem
Right now when clicking a 3D object in my scene the camera moves correctly to the target with the following orbit controls extension functions.
While this works correctly for the left side of the wall in my 3D scene. (see video) It doesn’t work correctly for the opposite of the wall. Probably this has to do with some mathematics that I am incapable of fixing myself. I tried to reverse the calculations but it did not work.
Video A (showing origin / center of target issue): issue origin target - YouTube
Video B (showing issue of reversed rotation issue): issue rotation opposite side - YouTube
The Goal
The ultimate goals is to be able to move the camera (including rotation and position with offset) and it’s center target of the orbit controls with a nice tween animation from A → B → A
Things that I’ve tried
I have tried to reset the origin / orbit controls target back to the old one. While this works it’s not “Tweened”. So it ends up making a very static movement without any animation. See video: resetting of orbit controls center target - YouTube
Code snippet:
camera.controls.target.set(
controlCenter.x,
controlCenter.y,
controlCenter.z
);
camera.controls.update();
Settings the camera without a tween back to its original position works perfectly as well. But obviously without a nice smooth animation which is wished.
Code snippet:
camera.position.set(oldPosition.x, oldPosition.y, oldPosition.z);
camera.rotation.set(rotation.x, rotation.y, rotation.z);
Hopefully this is enough context to be able to provide me with some helpful tips. If necessary I am able to provide you a code sandbox to make debugging more easy. But meanwhile I hope that this is sufficient information to provide any fixes.
Thanks in advance. Any help is really appreciated!!