用 three.js 创建粒子 animation

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.

Answer 1

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.