How do I set the width of the line so that a rectangular image can be attached to the line

[JYuan94]

I want to achieve a yellow ray like the one shown here, like a satellite trajectory, it’s like a parabola.

To achieve this effect, I first used PlaneGeometry and MeshBasicMaterial, where it looks good on a flat surface

But I ran into a lot of problems with using lines to replicate this effect：

First of all, I found that LineBasicMaterial and LineDashedMaterial couldn’t set the width of the line,
so I chose LineMaterial because it set the width,

but when I put the image on the line, this happened

I’ve noticed that LineMaterial line widths are more a function of small segments

Please give me some help from the community tech leaders. How can I better paste the picture on the line to make my parabola look better

[JYuan94]

stupefied-davinci-gqknfh - CodeSandbox

This is my code address, please help to have a look

[PavelBoytchev]

When I zoom enough, I can see the texture well, but it looks like turned by 90°. Could you try with rotated color.png either clockwise or counterclockwise by 90°?

[JYuan94]

@PavelBoytchev

When I zoom enough, I can see the texture well, but it looks like turned by 90°. Could you try with rotated color.png either clockwise or counterclockwise by 90°?

Hello, I rotated the picture 90 degrees according to what you said, and it became like this:

Then, I reference it to my code, and it looks like this：

Next to the line, like a layer wrapped

[JYuan94]

These are some of the phenomena I observed, I was very moved and surprised, please give me some help to see：

Here is my modified code example:

naughty-hooks-srcqbr - CodeSandbox

[drcmda]

wouldn’t it be easier to just make the line glow in postpro? like i just don’t see the benefit of faking that with a png, it will most likely end up taking more performance.

her’s one example using pmndrs/meshline (lines look more flat) and pmndrs/postprocessing

Confetti - CodeSandbox

or using three.line2 (lines look more round)

glowlines - CodeSandbox

[PavelBoytchev]

It is somewhat tricky as some changes are also required for the shader code. It is possible to get it partly OK (see first two snapshots), but some strange shapes are unavoidable with this approach (see the third snapshot). It might be beter to follow @drcmda’s advice.

Edit: forgot to show the changes, they are in lines 136, 142, 144-146, 156:

136: require("./image/color.png") // #1
142: linewidth: 20, // #2
144: transparent: true, // #3
145: depthTest: false,  // #4
146: depthWrite: false, // #5
156: gl_FragColor = texture2D(colorMap, vec2(0.0001*vUv.y,vUv.x+0.5)); //#6

[JYuan94]

@drcmda

postprocessing

Thank you very much for your advice. I also tried to use postprocessing to make the lines light up before, but the post-processing would affect the effect of the whole Scene and make other things bright, so I chose pictures for processing, and the pictures could completely restore the design effect

[JYuan94]

Thank you very much for your help. I think this effect has met my needs now. However, I will continue to work hard and try more ways to achieve better effects on the basis of you. Thanks!

[drcmda]

postpro won’t affect anything else, as you can verify in the box i posted. the only thing affected is the line. it won’t make lights brighter etc. this can only happen if bloom is configured wrongly.

postpro off

postpro on

[JYuan94]

Thank you so much for showing me the effect! I also think there may be something wrong with my post-processing setting. I hope you can help me to find out why I set the post-processing and the whole scene was exposed. Can it only be applied to my curve?

Here is my code example, please look at:

sharp-wozniak-1beton - CodeSandbox

[makc3d]

I think this version can simply be replaced by cylinder + matcap material if you use glowing circle texture.