How to use lookAt for children and parent objects at the same time?

Questions
,
1

Hello,
I’m trying to use the lookAt function to rotate an object towards the mouse the cursor. The object is a human face created in Blender and it has two children objects for the eyes.

I’m using an invisible plane to raycast the mouse position and in a loop I call the lookAt function on the face object and the eyes. The face rotates perfectly, following the mouse, but the eyes are stuck.
If I try to only move the eyes, they rotate fine as well.

Here’s a pen with the whole example working: https://codepen.io/qarlo/pen/9ed6626a793227cc3a2d8ef122927686
Commenting the line at row 109 makes the eyes rotating.

Is there a limitation in the function so that I can’t use it on the children or something like this? And in case, what would be the best approach?

Thanks!

2

/cc

3

Even if you don’t comment out this line, they eyes slightly rotate so they looking towards the defined target position. The effect is not that noticeable since the head is also transformed. From my point of view, the overall behavior of the transformation is as expected.

1 Like
4

I think you are right. I’d like, though, to make the eyes movement more evident. I’m thinking of a way to limit the movement of the head, instead, so I tried this:

object.lookAt(point.clampScalar(-50, 50));

It kind of does what I want, but somehow it causes some issues in the eyes movement.

5

Maybe this code works better:

var targetHead = new THREE.Vector3();

function render() {  
 
  targetHead.copy( point );
  targetHead.clampScalar( -50, 50 );
  object.lookAt( targetHead );
  
  object.children[ 0 ].lookAt( point );
  object.children[ 1 ].lookAt( point );

  renderer.render(scene, camera);
  
}

The idea is to use a different target position vector for your head.