PIXI.js 粒子聚集在角落里。想不通

Question

所以，我正在尝试在 Angular 9 中使用 PIXI.js 创建一个粒子网络。 这是我注入根的服务：

import { Injectable } from '@angular/core';
import * as PIXI from 'pixi.js'

class Particle {
  x: number;
  y: number;
  xDirection: number;
  yDirection: number;
  radius: number;
  graphicCorespondent: PIXI.Graphics;
  
  constructor(){
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.xDirection = Math.random();
    this.xDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    this.yDirection = Math.random();
    this.yDirection *= Math.ceil(Math.random()*2) == 2 ? 1 : -1;
    // this.xDirection = 1;
    // this.yDirection = 1;
    this.radius = 1 + Math.random() * 3;
  }
}

@Injectable({
  providedIn: 'root'
})

export class ParticlesService {
  app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
  density = 3000;
  particles = [];
  velocity = 1;

  constructor() {
    window.onload = () => {
      document.body.appendChild(this.app.view);
      this.app.renderer.backgroundColor = 0xFFFFFF;
      this.app.renderer.view.style.position = "fixed";
      this.app.renderer.view.style.display = "block";
      this.app.renderer.view.style.left = '0';
      this.app.renderer.view.style.top = '0';
      this.app.renderer.view.style.zIndex = '-1';
      // window.onresize = () => {
      //   this.app.renderer.resize(window.innerWidth, window.innerHeight)
      // }
    }
  }

  init(){
    for(let i=0; i<this.density; i++){
      const particle = new Particle();
      const gr = new PIXI.Graphics();
      gr.beginFill(0x000000);
      gr.drawCircle(particle.x, particle.y, particle.radius);
      gr.endFill();

      particle.graphicCorespondent = gr;
      this.particles.push(particle)

      this.app.stage.addChild(gr)
    }
    this.app.ticker.add((delta) => {
      this.animate(delta);
    });
    this.app.ticker.start();
  }

  animate(delta){
    this.particles.forEach((particle, index) => {
      
      if(particle.x > window.innerWidth) particle.x = 0;  
      if(particle.y > window.innerHeight) particle.y = 0;  
      if(particle.x < 0) particle.x = window.innerWidth;  
      if(particle.y < 0) particle.y = window.innerHeight; 

      particle.graphicCorespondent.x = particle.x + delta * particle.xDirection;
      particle.graphicCorespondent.y = particle.y + delta * particle.yDirection;

      particle.x = particle.graphicCorespondent.x;
      particle.y = particle.graphicCorespondent.y;
      
    })
    this.app.render()
  }
}

我设法做到了这一点，它可以工作....但粒子往往每次都聚集在右下角。

如果我去掉“边缘碰撞检测”：

if(particle.x > window.innerWidth) particle.x = 0;  
if(particle.y > window.innerHeight) particle.y = 0;  
if(particle.x < 0) particle.x = window.innerWidth;  
if(particle.y < 0) particle.y = window.innerHeight; 

它似乎工作正常，但粒子会飞到无穷远。 否则......它们往往会聚集在右下角，我不明白为什么。

Screenshot of the clumping

我在这个上浪费了一整天，但我仍然不明白为什么会这样。 我使用 CLI 创建了一个全新的 Angular 应用程序，我创建的唯一东西就是这个服务。结果相同。

<meta name="viewport" content="width=device-width, initial-scale=1"> 存在。

重新缩放似乎有效。

宽度和高度是正确的。

particle.x 和particle.graphicCorespondent.x 在刻度结束时相等。

此外，粒子似乎在大部分时间到达边缘之前消失并重新出现。

如果有人能看一下这个，我将非常感激。快把我逼疯了。

我尝试在粒子离开屏幕后对其进行切片并创建另一个粒子。它会创建另一个，但之后似乎是静态的。

我尝试直接循环通过stage.children，结果相同。

还尝试通过访问particle.graphicCorespondent 上的getBounds() 方法来读取粒子的x 和y 值。相同的值，不相关。

编辑：我在 Chrome 和 Firefox 中得到相同的结果。

PIXI.js 版本：5.2.3

Angular 版本：9.1.1

Answer 1

您的错误在于您绘制精灵的方式。具体来说......
gr.drawCircle(particle.x, particle.y, particle.radius);
您的说法是在 x 和 y 处以这样的半径画一个圆。此绘制操作将相对于 gr 的 x,y 进行。因此，稍后当您在画布上绘制精灵时，该点将从 gr 的 x 和 y 偏移。
所以你真正想要的是....
gr.drawCircle(0, 0, particle.radius);
这是一个工作示例供您查看....
https://codesandbox.io/s/so-pixijs-particles-clumping-in-the-corner-cant-figure-it-out-tsccz?file=/index.js