Why is lookAt not looking at specified vector?

Question

I have this three js scene: http://codepen.io/giorgiomartini/pen/ZWLWgX

The scene contains 5 things:

Camera - Not Visible

Answer 1

Here is the corrected codepen: http://codepen.io/anon/pen/oxGpPQ?editors=0010

Now the green disk rides around its parent (the red sphere) all while looking at the blue disk (or the 'origen' vector).

Uncomment lines 163 and 164 to make the camera be at the green disk's location and have the camera also look at the blue disk ('origen' vector) while it orbits its parent red sphere.

How I accomplished this is: 1. make parent Red Mesh 2. make dummyChild Object3D (this is an invisible math object) 3. make child Green Mesh 4. make origen centerOfScene Blue Mesh 5. attach parent, child, and centerOfScene mesh to Scene (not dummyChild though) 6. attach dummyChild to parent like so: parent.add(dummyChild);

In render function: 1. Move parent around with noise function (which offsets dummyChild) 2. Move dummyChild with another noise function (which revolves around its parent position, the center of dummyChild's world is its red parent's position) 3. Stick the green child mesh wherever the invisible dummyChild is. But since dummyChild is offset by red parent, we need to get it's world coordinates in relation to Scene, not its coordinates in red's world, so we use

child.setFromMatrixPosition(dummyChild.matrixWorld); 

Notice its matrixWorld and not matrix - matrix holds its local system and matrixWorld holds its coordinated relative to the Scene or World coordinate system. 4. Use lookAt to make the green child disk 'lookAt' the blue centerOfScene Mesh which is at the origen vector or the center of the Scene.

Hope this helps! :)

Answer 2

Object3D.lookAt() does not support objects with rotated and/or translated parent(s).

Your work-around is to (1) add the child as a child of the scene, instead, and (2) replace the child object with a dummy Object3D, which, as a child of the parent object, will move with the parent.

Then, in your render loop,

child.position.setFromMatrixPosition( dummy.matrixWorld );
child.lookAt( origin );

three.js r.75