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
stupefied-davinci-gqknfh by JYuan94 using @tweenjs/tween.js, loader-utils, react, react-dom, react-scripts, three
This is my code address, please help to have a look
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
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 by JYuan94 using @tweenjs/tween.js, loader-utils, react, react-dom, react-scripts, three
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
or using three.line2 (lines look more round)
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
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
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
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!
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.
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 by JYuan94 using @tweenjs/tween.js, loader-utils, react, react-dom, react-scripts, three
I think this version can simply be replaced by cylinder + matcap material if you use glowing circle texture.