Three.js - How to rotate an object to lookAt one point and orient towards another
3d, javascript, three.js
Solution
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.
three.js r.143
Problem
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