Create particles animation with three.js

Question

I am new to three.js, I have created a simple particle app with three.js, but the flow of particles is moving from centre. I want move particles something like displayed in the attached screenshot (top right corner to bottom left corner). working code is at https://jseditor.io/?key=ee98d51a9b4111eab74e00224d6bfcd5. any reference will be very helpful. Thank you.

M - · Accepted Answer · 2020-05-22 18:03:27Z

2

Your updateParticles function is only changing the particles' z position:

particle.position.z +=  mouseY * 0.1;
if(particle.position.z>1000) particle.position.z-=2000;

If you want to move them vertically and horizontally, you're going to have to update the x and y positions as well.

particle.position.x -=  mouseY * 0.1;
particle.position.y -=  mouseY * 0.1;
if(particle.position.x<-500) particle.position.x+=1000;
if(particle.position.y<-500) particle.position.y+=1000;

I don't know the size of your scene, so you might need to adjust the numbers accordingly.

answered May 22, 2020 at 18:03

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakhan Khandelwal Over a year ago

I have try to change as suggested, but it is adding circle in same line, not creating multiple lines as shown in screenshot

M - Over a year ago

Use Math.random() again, like you did during particle creation.

Collectives™ on Stack Overflow

Create particles animation with three.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related