particle wont center

[adhiartawika]

hi guys i recently start experimenting lots of thing using points to make a particle effect and one of it try to create is a space wrap animation, the animation is correctly display but the position of the effect it wont center, it always goes in right or left i try to change the camera type and the position of the canvas camera it seems it doesn't help at all i think am missing something. can anyone help me to figure this out am quite confused if its the camera or the logic of the particle that wrong here is the code am working on hope it help thank you

https://codesandbox.io/s/spacewrap-l82e3s?file=/src/App.js:0-1784

[mwmwmw]

The issue is that positions are a flat array where all coordinates exist in one dimension.

They're mapped like this.

[0,  1,  2,  3,  4,  5,  6,  7,  8, ...
[x1, y1, z1, x2, y2, z2, x3, y3, z3, ...

In your loop, you're moving the particle in the x, y, and z, axes simultaneously.

for(i; i<particles.length; i++) {
   particle[i] += acceleration
}

To have all the particles fly away from the camera, you have to target the z axes.

What I do is increase my index value by three, then calculate the other two. Once you have the index for the specific axes, you can do your calculation.

for(let i = 0; i<particles.length; i+=3) {
   let x = i;
   let y = i+1;
   let z = i+2;
   particle[z] += acceleration // only move in the z direction
}

Here is a modified version of your example with this setup
https://codesandbox.io/s/spacewrap-forked-ev9el1?file=/src/App.js