Three.js - how do vectors work with lookAt ()?

Question

I am trying to understand how up vectors and lookAt () work together in three.js. I set the vector up on this Helper axis, so the Y axis always points to the target geometry, which marks the position of the vector up. It works as expected for X and Y, rotating the axis around the Z axis; and when I try to adjust the Z value of the vector up, I would expect the axes to rotate around the X axis, but nothing will happen.

http://jsfiddle.net/68p5r/4/ [Edit: I added a geo to show the target position.]

I have a dat.gui interface that manipulates the up vector to demonstrate, but the problem exists when I also set the vector manually.

I suspect the problem is with line 74:

zControl.onChange(function(value) { axes.up.set(this.object.x, this.object.y, value); axes.lookAt(new THREE.Vector3(0, 0, 1)); }); 

When I update the vector up, I instruct axisHelper to update its orientation on the screen by moving its lookAt () down along its Z axis. Changing X and Y works as expected, why not Z?

(This also happens if I use geo instead of axisHelper: http://jsfiddle.net/68p5r/5/ )

Answer 1

When you call Object.lookAt( vector ) , the object rotates so that its inner z axis points to the vector target.

But this is not enough to indicate the orientation of the object, because the object itself can still “rotate” along the z axis.

Thus, the object then “rotates” so that its inner axis y is in the plane of its inner axis z and the vector up .

The target vector and the up vector, together, are sufficient to uniquely indicate the orientation of the object.

three.js r.63

---

Tip. An axis in three .js must always have a unit of length; be sure to call the axis.normalize () code in the code.

Answer 2

I assume that your heading means turning on Z instead of X?

In any case, the culprit is axes.lookAt(new THREE.Vector3(0, 0, 1)); if you change it to axes.lookAt(new THREE.Vector3(0, 1, 0)); for all methods, then Y does not spin as expected. You tell the axis assistant to look down on a specific axis (in your case, Z). Therefore, why the value Z does not work.

Is there an example of what you are trying to accomplish that can help us?

Perhaps someone else can give a more detailed explanation of what is happening. I hope my answer will push you in the right direction.

Answer 3

This is how I came to understand the problem:

The vector lookAt and up determine the orientation of the object as follows:

• The lookAt vector is applied by FIRST, which sets the rotation of X and Y, blocking the direction that the object's Z axis points to.
• Then the upper vector determines how the object rotates around the Z axis to set the direction that the point of the object Y points to - it will not affect the rotation of X and Y at all.

In my example, the Helper axis looks down its blue Z axis in the direction of the vector lookAt, which is a point in space at (0, 0, -1), so the X and Y rotations were already set. It remains only to figure out how to rotate the Helper axis around its Z axis, which means setting the X and Y points of the vector up - moving the vector back and forth along the Z axis will not change anything.

Here's a script with a demo illustrating this relationship: the blue arrow is the lookAt axis, and the green arrow is the up axis.

http://jsfiddle.net/68p5r/8/

  Links to jsfiddle.net must be accompanied by code