Rotating a sphere so that clicked point is Vector toward the camera

Question

I have searched around for an answer to this question and found two answers which are either old or do not have THREE related code.

question and question

What I want to happen is have the clicked point be pointing toward the camera!

if (intersects.length > 0) {
    var point = intersects[0].point;
    //console.log(point);

    var a = new THREE.Vector3(0,0,1);
    var b = point.normalize();

    var rotationAxis = new THREE.Vector3(0, 0, 0);
    rotationAxis.crossVectors(b, a);
    var dot = a.dot(b);
    var angle = Math.acos(dot);

    var quaternion = new THREE.Quaternion();
    var dest = quaternion.setFromAxisAngle(rotationAxis, angle);
    sphere.setRotationFromQuaternion(dest);
}

UPDATE:

I have been trying to convert the math from the first answer to threejs, it's almost going to the right place but out by some degrees, where am I going wrong?

UPDATED JSFIDDLE HERE

Initial position - 0,0,1

After clicking on a point

I think this can be accomplished by using the lookAt function (assume your sphere default facing is +z). Looking from the center of sphere towards the direction of the point you clicked. — WacławJasper, Dec 14 '15 at 21:45
Then it seems to me your second picture is working as intended? — WacławJasper, Dec 14 '15 at 22:15
Is what you are looking for a function that can return a rotational change from direction A to direction B? I have something that MIGHT work. But its not strictly THREE. — WacławJasper, Dec 14 '15 at 22:39
Yeah that's what my code in the question is supposed to be doing, it's going the right way but not accurate enough. I wanted to use Quaternion so that I can animate with slerp. — Neil, Dec 14 '15 at 22:49

score 1 · Accepted Answer · edited May 23 '17 at 12:02

I think what you need is finding a rotation that takes you from the direction from center to the clicked point to the direction from center to camera. An implementation here: Finding quaternion representing the rotation from one vector to another

    var z = new THREE.Vector3(0, 0, 1);             
    var point = continent.position.clone().normalize();
    earthContainer.localToWorld(point.clone()));

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

It turns out THREE js does implement this as q.setFromUnitVectors(u, v);. I updated your fiddle http://jsfiddle.net/6hfxng8n/4/ and it is almost exactly the answer to the first answer you linked to. Yet it is approximately working (click slightly right -> sphere rotates left etc) but something is off. I cant figure out why.

I don't know how to get q.xyz into the quaternion. – Neil Dec 14 '15 at 23:14 — Neil, Dec 14 '15 at 23:14
q.x = a.x; q.y = a.y; q.z = a.z; – WacławJasper Dec 14 '15 at 23:39 — WacławJasper, Dec 14 '15 at 23:39

Rotating a sphere so that clicked point is Vector toward the camera

1 Answers1