How to give each dashed line part an arrow shaped head

Please forgive my poor English :sweat_smile:.
Hi,every one.
I used Line2 to generated an dashed fat line, is there any method to give each dashed line part an arrow shaped head.

Not a built in way.

But you can use a cylinder to make a cone, and place it at the endpoints maybe?

1 Like

Thanks for reply.
Use cylinder to generate the arrow may too expensive, can we start with the shader?

Yeah but it’s gonna be hard. :smiley:

1 Like

You can borrow shapes from Inigo Quilez and mix them… with some adjustments.
But like @manthrax wrote that very hard and… for me (without ready patterns) probably almost impossible. So.. I vote for cylinder → cone and cylinder → ā€œlinesā€ā€¦ :soft_ice_cream:

https://codepen.io/Lucas_Mas/full/bNGLqjR

1 Like

Is too hard for me :sweat_smile:…

The reason why I don’t use cone and cylinder is that i have many lines and then want them to turn into an arrow flow. Will using the method cylinder → cone and cylinder → ā€œlinesā€œ... lead to performance issues.
The Line2 generated fat line can use dashOffset property to make a flow effect,that’s why I asked if we could start from here… :slightly_smiling_face:

You can use a CatmullRomCurve3 with an InstancedMesh and distribute cone or cylinder geometries along the path, similar to the approach in the spline example.

Line2 use an InstancedMesh under the hood, so the performances are the same or even better.

Would you consider using textures?

https://codepen.io/boytchev/full/MYWVywq

image

4 Likes

I like the way how even single arrows ā€œbendā€ around narrow turns :+1:

1 Like

I have already implemented a version using the texture method.
I had used three-path lib to generate the path and set an arrow picture as texture, but the only problem is that the path isn’t always visible because it’s flat.


If your paths are strictly straight lines, you could combine the inherently 2D texture solution with a billboarding approach. For 3D curved paths that probably wouldn’t be enough, if at all feasible.

Need for rotateble shader like three.quarks – particle system / VFX library for three.js
GitHub - Alchemist0823/three.quarks: Three.quarks is a general purpose particle system / VFX engine for three.js

1 Like

OK,thanks.