How to animate curved arrows in threejs?

Thanks for the suggestion by the question. I am close to finishing a multiform geometry (Open source ).

A test resulted in the following
2022-04-06 21.25.28

Not yet perfect!

function  curvedArrowCenterline( h ) {  
   return { x: 0.1 * Math.sin(  pi * h ), z: 0 };      
}

function  arrowOutline( h ) {

    return{ y: h < 0.9 ? h : (  h === 0.9 ? 0.8 : h ), r: h < 0.9 ?  0.1 : (  h === 0.9 ? 0.2 : 0 ) }

} 

UPDATE

Multiform geometry is easier than my Addon. Produces almost infinite many time-varying geometries with functions

It is not a real space curve, but only a horizontal offset of the layers. So a shear per height segment.

In the addon, it is a correctly bent cylinder. However, the arrowhead is not centered due to the height offset. You can create the arrowhead separately and form a group.

The best solution is certainly a specially created geometry. :slightly_smiling_face: