Three.js particles

Question

I've been trying to generate a particle system recently and I've been struggling to get it to work as it's based from an outdated version of three.js, it isn't appearing in the scene and I'm not sure why. It's probably obvious to why but I'm not that good at this.

var particleCount = 1800,
  particles = new THREE.Geometry(),
  pMaterial = new THREE.PointsMaterial({
    size: 20,
    map: THREE.TextureLoader("x.png"),
    blending: THREE.AdditiveBlending,
    transparent: true
  });
var particleCount = 500,
  particleSystem;

init();
render();

function init() {
  for (var p = 0; p < particleCount; p++) {
    (pX = Math.random() * 500 - 250),
      (pY = Math.random() * 500 - 250),
      (pZ = Math.random() * 500 - 250),
      (particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)));
    particle.velocity = new THREE.Vector3(0, Math.random(), 0);
    particles.vertices.push(particle);
  }

  particleSystem = new THREE.Points(particles, pMaterial);

  particleSystem.sortParticles = true;
  scene.add(particleSystem);
  particleSystem.position.set(0, 0, 0);
  particleSystem.scale.set(100, 100, 100);
}

function update() {
  particleSystem.rotation.y += 0.01;

  pCount = particleCount;
  while (pCount--) {
    particle = particles.vertices[pCount];
    if (particle.y < -200) {
      particle.y = 200;
      particle.velocity.y = 0;
    }

    particle.velocity.y -= Math.random() * 0.1;
    particle.add(particle.velocity);
  }

  particleSystem.geometry.__dirtyVertices = true;

  renderer.render(scene, camera);
}

I might be missing a few things as this is a few lines I had to pick out from a few hundred.

(I'm new here so please don't bully me for awful structure.)

Thanks in advance for anyone who responds.

Are you getting errors in your developer tools? Which exact old version of Three is this from? You may have missed some migration paths. Have you stepped through your code? What have you tried to do to address this issue yourself? — zero298
@zero298 Most of the things I based this apon were outdated, and not working at all. I've had to redo a bunch of the positioning but I've tried to keep away from touching the calculations for the way it actually deals with the particles as I want to know when it works and when it doesn't so It's easier to work from for what I want. It's been a couple of weeks of trying to get any particle systems to work AT ALL because most of them are outdated, so I geuinelly can't specify how much I have and haven't changed as It's been over a week I've been coming back and messing with it now and then. — user10787392

prisoner849 prisoner849 · Accepted Answer · 2018-12-13T19:56:00

map: THREE.TextureLoader("x.png"), should be map: new THREE.TextureLoader().load("x.png"),
particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)); should be particle = new THREE.Vector3(pX, pY, pZ);
particleSystem.geometry.__dirtyVertices = true; is outdated, you have to use particleSystem.geometry.verticesNeedUpdate = true;
Add depthTest: false to points material

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 400);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var particleCount = 1800,
  particles = new THREE.Geometry(),
  pMaterial = new THREE.PointsMaterial({
    size: 20,
    map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/circle.png"),
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthTest: false
  });
var particleCount = 500,
  particleSystem;

for (var p = 0; p < particleCount; p++) {
  pX = Math.random() * 500 - 250,
    pY = Math.random() * 500 - 250,
    pZ = Math.random() * 500 - 250,

    particle = new THREE.Vector3(pX, pY, pZ);
  particle.velocity = new THREE.Vector3(0, Math.random(), 0);
  particles.vertices.push(particle);
}

particleSystem = new THREE.Points(particles, pMaterial);

scene.add(particleSystem);


function update() {

  particleSystem.rotation.y += 0.01;

  pCount = particleCount;
  while (pCount--) {
    particle = particles.vertices[pCount];
    if (particle.y < -200) {
      particle.y = 200;
      particle.velocity.y = 0;
    }

    particle.velocity.y -= Math.random() * .1;
    particle.add(particle.velocity);
  }

  particleSystem.geometry.verticesNeedUpdate = true;

}

renderer.setAnimationLoop(() => {
  update();
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.js"></script>

Three.js particles

1 Answers