How to Align Particles Along the Z-Axis for a Tunnel Effect in Three.js?

[Parisa_Shahbazi]

I want to create a tunnel of particles where, as I scroll, it feels like I’m traveling inside the tunnel, with some div elements appearing along the way.

My main challenge is aligning the direction of the particles to match my reference.

Currently, when I add particles and apply textures, they appear aligned along the Y-axis (top to bottom). However, in my reference, the particles are aligned along the Z-axis, moving towards the camera.

How can I adjust the particles so that they appear along the Z-axis, creating the correct tunnel effect?

[Chaser_Code]

https://codepen.io/illuminsi/pen/rNYWdWd

[Parisa_Shahbazi]

such a complex code
Would you please tell me which part related to direction of particle?

[Chaser_Code]

https://codepen.io/illuminsi/pen/PwoaYNZ

[Lukasz_D_Mastalerz]

Don’t forget to write which part is related to direction of particle…

[prisoner849]

Inspired with this topic.
The burst is made of patched fat lines.

Picture:

Demo: https://codepen.io/prisoner849/full/pvoKoGz

PS Not sure, if this is relevant to the topic at all. Apologies in advance. Made it just for fun.

[PavelBoytchev]

Let me hop in with a demo I made in June 2023, more like a motion blur than a tunnel effect:

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