CODEWITHSUNDEEP
javascriptthree.jsparticles
Lakhan Khandelwal
Lakhan Khandelwal

Reputation: 25

Create particles animation with three.js

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.

screenshot

Upvotes: 1

Views: 4698

Answers (1)

M -
M -

Reputation: 28482

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.

Upvotes: 2

Related Questions