Hi there, I am looking for a way to animate curved arrows going from point A to B. They can be static as well. But I am not sure where I should start. Also before I do animation I am also not sure how I can create a curved object that looks like an arrow. If anyone can point me to right direction…

And here is the arrow. [2022-04-08 20.34.35] But you have to create the peak separately, otherwise it is only correct from a distance. for ( let i = - 25; i <= 0.4; i ++ ) { points.push( new THREE.Vector3( i / 4 * Math.sin( i / 20 ), 0, -i / 2 ) ); } for ( let i = - 5; i <= 5; i ++ ) { …

If you’re using THREE.Curve. (Which I never but this is what I see from the doc ) A simple idea is to use curve.getPoint( t ) while t value is 0-1 (start to end of the curve) You just need to animate the t value from 0 to 1 from time to time. And use t value to update your arrow position arrow.po…

Perhaps these examples will give you a starting point. From the Collection of examples from discourse.threejs.org CurvedArrowHelper discourse.threejs.hofk.de getPoint( ) getPointAt( ) ColorStripeChanging 2021 eXtended eXamples CurveGenerator :slightly_smiling_face:

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 arrowOutli…

Here is an example of bending a generic mesh around a curve https://threejs.org/examples/webgl_modifier_curve.html

I have it there MotionAlongCurve used. ( From the Collection of examples from discourse.threejs.org ) But it does not bend a single mesh. :frowning_face: See the following posts. [2022-04-08 11.35.01]

Looks like the box needs segmentation greater, than 1, along X-axis.

Yeah, needs more vertices in the axes its being curved in.

In fact [2022-04-08 12.19.05] I had no subdivision for the example of the movement. Then an arrow that is curved can be created easily. [2022-04-08 12.26.53]

If you need many arrows there is also an instanced version which is useful for animating 100s of objects at the same time such as: XR Koi Garden

Everybody likes Koi fish :slight_smile: Spline + DataTexture

How to animate curved arrows in threejs?

Questions

hofk April 9, 2022, 6:39pm 16

This is how it works
ArrowLinesFat

2022-04-09 20.34.25

FatLines + noise

Topic		Replies	Views
Curved2Geometry - a twofold curved geometry Resources geometry , animation , buffergeometry , curve , catmullromcurve3	1	1599	April 22, 2021
FatLines + noise Resources fat-lines , noise	2	1166	April 12, 2022
Animate path between two points on globe threejs Questions animation	3	1871	March 29, 2023
Struggling with paths Questions webgl-renderer	15	9834	May 27, 2021
How do you make a custom arrow? Questions geometry	8	2878	August 28, 2023

How to animate curved arrows in threejs?

Related topics