Three.js粒子

Question

最近我一直在尝试生成一个粒子系统，但我一直在努力使其工作，因为它基于的是Three.js的过时版本，它没有出现在场景中并且我没有确定为什么。原因可能很明显，但我对此并不擅长。

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);
}

我可能会缺少一些东西，因为这是我必须从几百行中挑选出来的几行。

（我是新来的，请不要因为结构糟糕而欺负我。）

在此先感谢任何响应的人。

Answer 1

1. map: THREE.TextureLoader("x.png"),应该是map: new THREE.TextureLoader().load("x.png"),

2. particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ));应该是particle = new THREE.Vector3(pX, pY, pZ);

3. particleSystem.geometry.__dirtyVertices = true;已过时，您必须使用particleSystem.geometry.verticesNeedUpdate = true;

4. 将depthTest: false添加到要点材料

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>