CODEWITHSUNDEEP
three.jssystemparticles
user10787392
user10787392

Reputation:

Three.js particles

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.

Upvotes: 1

Views: 615

Answers (1)

prisoner849
prisoner849

Reputation: 17586

  1. map: THREE.TextureLoader("x.png"), should be map: new THREE.TextureLoader().load("x.png"),

  2. particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)); should be particle = new THREE.Vector3(pX, pY, pZ);

  3. particleSystem.geometry.__dirtyVertices = true; is outdated, you have to use particleSystem.geometry.verticesNeedUpdate = true;

  4. 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>

Upvotes: 3

Related Questions