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

map: THREE.TextureLoader("x.png"), 应该是 map: new THREE.TextureLoader().load("x.png"),
particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)); 应该是 particle = new THREE.Vector3(pX, pY, pZ);
particleSystem.geometry.__dirtyVertices = true; 已经过时了，你必须使用 particleSystem.geometry.verticesNeedUpdate = true;
加depthTest: false点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 个粒子

Three.js particles

system

particles

three.js