Three JS - Access ArrowHelper direction?

Question

Suppose I create an arrow helper, e.g. something like:

        const arrowPosition = new THREE.Vector3(0, 0, 0);
        const arrowPosition = new THREE.Vector3(2, -2, 0);

        arrowDirection.subVectors( scene.position, new THREE.Vector3(1, 1, 1)).normalize();

        arrow = new THREE.ArrowHelper( arrowDirection, arrowPosition, arrowLength, 0xffff00, arrowHeadLength, arrowHeadWidth);

After creating it, how do I access its direction?

Does this answer your question? [Three JS - Rotate arrow in 3D to track mouse](https://stackoverflow.com/questions/70918227/three-js-rotate-arrow-in-3d-to-track-mouse) — 2pha, Jan 30 '22 at 22:06
No, the answer on that page doesn't show how to access the arrow's direction after creating it. — Rylan Schaeffer, Jan 30 '22 at 22:47
You can write direction into helper's `.userData` to obtain it later. — prisoner849, Jan 31 '22 at 06:56

score 1 · Accepted Answer · answered Feb 22 '22 at 06:35

In short, I'm not sure there is an easy way to access the direction, at least in a vector3 format. The value dir used in the ArrowHelper constructor (as described in the docs) is never assigned directly to a vector property of ArrowHelper or the Object3D parent class, but is instead used to set the quaternion property of the ArrowHelper, inherited from the parent class.

See the code snippet below from the helper source code:

setDirection( dir ) {

    // dir is assumed to be normalized

    if ( dir.y > 0.99999 ) {

        this.quaternion.set( 0, 0, 0, 1 );

    } else if ( dir.y < - 0.99999 ) {

        this.quaternion.set( 1, 0, 0, 0 );

    } else {

        _axis.set( dir.z, 0, - dir.x ).normalize();

        const radians = Math.acos( dir.y );

        this.quaternion.setFromAxisAngle( _axis, radians );

    }

}

As listed in the Object3D docs, the quaternion describes the helper's rotation (quaternion docs). A better discussion on the math might be found on this unity forum, but to get the vector direction you'll need to use the quaternion field

Hope this helps and if someone can improve this explanation please do, my experience with Eulers and quaternions is limited

Three JS - Access ArrowHelper direction?

1 Answers1