Welcome to Air Ribbons, a tiny little library I've created for animating amazing looking arrows in Three.js. If you need to point to something in an unnecessarily intricate way, Air Ribbons are just right for you.

Each arrow is created by taking in a series of points indicating the path it will traverse and a "timing set" parameter. This consists of a duration, a keyframe pair indicating its position over his duration as well as the easing equation over this duration.


			var ribbon = new AetoRibbonArrow([

			    new THREE.Vector3(-200,    0,  200),

			    new THREE.Vector3( 200,    0,  200)], 

			    {

			        timingSets: [new AetoTimingSet(['0%', '100%'], AetoAnimUtil.easeInOutQuad, 2000)]

			    }

			);

After that, a number of different arrow characteristics can be interpolated within the same parameter list as the timing set. The syntax of these values are the same at the timing sets and can use direct lengths as well as percents to indicate their positions


			var ribbon = new AetoRibbonArrow(locations, {

			    loop: true,

			    logFrames: true,

			    clearOnLoop: true,

			    timingSets: [

			        new AetoTimingSet(['0%', 840], AetoAnimUtil.easeInOutQuad, 1850),

			        new AetoTimingSet([840, '100%'], AetoAnimUtil.easeInOutQuad, 750)

			    ],

			    attributeSets: [

			        new AetoAttributeSet([0, 300], AetoAnimUtil.easeInOutQuad, "opacity", 0, 1),

			        new AetoAttributeSet([180, 220], AetoAnimUtil.easeInOutQuad, "rotation", 0, 70 / 180 * Math.PI),

			        new AetoAttributeSet([720, 840], AetoAnimUtil.easeInOutQuad, "rotation", 70 / 180 * Math.PI, 0),

			        new AetoAttributeSet(['75%', '100%'], AetoAnimUtil.easeInOutQuad, "rotation", 0, Math.PI),

			        new AetoAttributeSet([0, '25%'], AetoAnimUtil.easeInOutQuad, "width", 2, 6),

			        new AetoAttributeSet([0, '60%'], AetoAnimUtil.easeInOutQuad, "length", 50, 300),

			        new AetoAttributeSet(['80%', '100%'], AetoAnimUtil.easeInOutQuad, "length", 300, 30),

			        new AetoAttributeSet([0, '100%'], AetoAnimUtil.easeInOutQuad, "color", 0x63ADFF, 0xAB8BCF)

			    ]

			});

The complete list of modifiable arrow attributes are:

Arrow Smoothness
Looping
Opacity
Rotation
Color
Width
Length
Interpolation Type
Segment Density

Additionally, custom spline types and easing equations can also be specified as additional parameters.

Unless otherwise specified within the parameters, the given locations are used to construct a Catmull-Rom spline to interpolate the positions between the points. Arc length parameterization along the spline allows for consistent length values along it, which is used for the arrow's positional and attribute interpolations. Segment geometries across the entire length of the spline are then generated and cached. These segments already contain all the intepolated arrow values, allowing them to be animated smoothly regardless of the arrow's complexity. When animation occurs, these segments are traversed to create the animation effect. The actual geometries used for creating the ribbon segments are quad geometries based upon the the arc lengths of the curve and the normalized tangent plane. The arrow-head is generated by the tangent of the forward most segment.

Close this window (top-right corner) and click the arrow behind it to see a few live demos of what can be done with this library! The following keys can be used during the demos:

Space (Play/Pause)
'1' (Show spline locations)
'2' (Show frenet frames for each segment)
'3' (Reset the camera)
'4' (Enable looping)

Additionally, the number of arrows in the demo can be modified by changing the quantity value in the top left and then pressing the refresh button in the top right. Camera controls consist of left cick for rotation, right click for panning, and scroll wheel for zooming. Some of the demos such as "Spear" and "Sentinel" are not designed to be looped. It is recommended to turn off looping and restart the animation manually by pressing the spacebar when the entire animation has completed. If you have any trouble, please make sure you're using the latest version of your browser.