threeJS .lookAt looking the wrong way, inherited rotations

Question

I am just trying to get this._mesh.skeleton.bones[ 5 ](location: the bend in the green thing coming from the hand) to point the same way as the helper yellow line

    _FindBubble() {
        const handPosition2world = new THREE.Vector3();
        this._anchor['LeftHandIndex1'].getWorldPosition(handPosition2world);
        const dir = handPosition2world;

// helper yellow line
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const points = [];
points.push( new THREE.Vector3( handPosition2world.x, handPosition2world.y, handPosition2world.z ) );
points.push( new THREE.Vector3( this._bubble._components.BubbleModelController.averageOfVertices.x, this._bubble._components.BubbleModelController.averageOfVertices.y, this._bubble._components.BubbleModelController.averageOfVertices.z ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line( geometry, material );
this._scene.add( line );

        dir.sub(this._bubble._components.BubbleModelController.averageOfVertices);
        dir.normalize();
        return dir.negate();
    }


    _Updateanimation(timeInSeconds) {
        const dirToBubble = this._FindBubble();
        var dirToBubbleObj = new THREE.Object3D();
        dirToBubbleObj.lookAt(dirToBubble);

        this._mesh.skeleton.bones[ 5 ].quaternion.set(dirToBubbleObj.quaternion);
    } 

photo with this._mesh.skeleton.bones[ 5 ].quaternion.slerp(dirToBubbleObj.quaternion, 1) instead of set, .set(dirToBubbleObj.quaternion) does not render any of the green tube from the hand after bone 5

changing _Updatedateanimation to

  _Updateanimation(timeInSeconds) {
        const dirToBubble = this._FindBubble();
        this._mesh.skeleton.bones[ 5 ].lookAt(dirToBubble);
  } 

has given me this, which sort of feels like progress, i dont know why its different i thought i would do the same as the code above but it was just written cleaner

Answer 1

add a bone of minimal length in place of 0 between the hand and the tube in the code below and make 1 -> 0 so there is not a funky bend at the start, i will update later when i get around to it but below gives the effect i was going for

  _Updateanimation(timeInSeconds) {
    this._mesh.skeleton.bones[ 0 ].lookAt(this._bubble._components.BubbleModelController.averageOfVertices);
    this._mesh.skeleton.bones[ 1 ].rotation.x = Math.PI/2;
  }