Okay! I already solve this: [https://jsfiddle.net/sebasz1000/35jodpyr/342/]
By using quaternions approach I finally did it! I made getQuaternionFromPoints that returns the quaternion value between given points A(clicked pickertPoint - aqua box) and B(fixed point- red plane).
function getQuaternionFromPoints(initPoint, endPoint) {
var startVector = (initPoint === undefined ? new THREE.Vector3() : initPoint.normalize())
var endVector = (endPoint === undefined ? new THREE.Vector3() : endPoint.normalize())
var q = new THREE.Quaternion();
q.setFromUnitVectors(startVector, endVector)
return q
}
So I got my target Quaternion to make the tweening:
const euler = new THREE.Euler()
const startQuaternion = new THREE.Quaternion()
const endQuaternion = getQuaternionFromPoints(pickerPoint, staticPoint.position)
startQuaternion.copy(sphere.quaternion).normalize()
const worldRotation = new TWEEN.Tween(startQuaternion)
.to( endQuaternion, 2000)
.delay(500)
.easing(TWEEN.Easing.Exponential.InOut)
.onUpdate( function() {
euler.setFromQuaternion(startQuaternion)
sphere.setRotationFromEuler(euler)
});
worldRotation.start()
Solved Issue!
ADDITIONAL THING: Yellow point trajectory is calculated using spherical point with getAngleFromSphericals() method. This point is expected to be the camera travel position( I am working on how to stick camera on it now), so this way Camera and clicked pickerPoint will meet just in the static redPoint.