Three.js - How to rotate an object to lookAt one point and orient towards another

Question

I'm new to three.js and 3d programming in general, so this may seem like a very simple question. Ideally, I hope the answer can help me understand the underlying principles.

I have an object that needs to "point" at another point (the origin, in this case, for simplicity), which can be done easily with the Object3D.lookAt(point) function. This points the Z axis of the object at the point nicely.

I also want to rotate my object, called looker, around its Z axis such that its X axis points generally towards another object, refObj. I know that the X axis can't point directly at the refObj unless that object happens form a right angle with the origin. I want the X axis of looker to lie on the plane created by origin, refObj and looker, as diagramed below:

The simplest way of doing the rotation would seem to be to modify looker.rotation.z, but I don't know how to calculate what the value should be.

In general, I would like an extended version of the lookAt function which takes a second coordinate to which the X axis would be oriented. Something like this:

function lookAtAndOrient(objectToAdjust, pointToLookAt, pointToOrientXTowards)
{
  // First we look at the pointToLookAt
  objectToAdjust.lookAt(pointToLookAt);

  // Then we rotate the object
  objectToAdjust.rotation.z = ??;
}

I have created a jsFiddle with the example diagramed above

Answer 1

What you are really saying is you want the y-axis of the object (the object's up-vector) to be orthogonal to the plane.

All you have to do is set the object's up-vector before you call lookAt( origin ).

You compute the desired up vector by taking a cross-product of two vectors you know lie in the plane.

Here is a working fiddle: http://jsfiddle.net/rQasN/43/

Note that there are two solutions to your problem, as both the computed vector and it's negation will be orthogonal to the plane.

EDIT: fiddle updated to three.js r.71