# align local Y to be parallel with global Y during or after slerp

I am using the following function to have a globe rotate a point on its surface to face the global Z toward the camera. This works fine, but after each rotation the Y axis seen as a green line is not vertically aligned.

I believe this is how slerp between two unit vectors works, it takes the shortest path.

I would like to know how can I achieve this rotation whilst getting the globe to rotate itself so that Y is at least parallel to the global Y?

        function rotateToHub(continent){
var speed = 2000;
var z = new THREE.Vector3(0, 0, 1);

point = continent.position.clone().normalize();

var q = new THREE.Quaternion();
q.setFromUnitVectors(point, z);

var duration = {t: 0};
var tween = new TWEEN.Tween(duration)
.to({t: 1}, speed)
.onStart(function(){
slerp = true;
})
.onUpdate(function(){
earthContainer.quaternion.slerp(q, this.t);
})
.onComplete(function(){
slerp = false;
update();
})
.start();
}


• Do not cross-post between SE sites. – Almo Dec 19 '15 at 21:11
• I will delete from SO and keep the question here – Neil Dec 19 '15 at 21:11
• Well, I don't know about THREE js but I think you are rotating target vector to Z (0,0,1) that making it like this. Just my guess, what would happen if you try q.setFromUnitVectors(point, new THREE.Vector3(0, point.y, 1)); and sorry in advance if I did any syntax or spelling mistake – Hamza Hasan Dec 19 '15 at 21:43
• @HamzaHasan thanks for the suggestion, unfortunately that moves my point away from centring on the Z and goes further to the Y axis up the globe. – Neil Dec 19 '15 at 21:53
• I think both cases would be applicable at the same time. Either you will get your desired point at exact front and aligned to Z axis, or freeze the Y axis, I don't think both can be true at a time. What you say? – Hamza Hasan Dec 19 '15 at 21:56