Частицы Three.js - PullRequest
Новая
       62

Частицы Three.js

0 голосов
/ 13 декабря 2018

Недавно я пытался создать систему частиц, и я изо всех сил пытался заставить ее работать, поскольку она основана на устаревшей версии 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);
}

Возможно, мне не хватает нескольких вещей, потому что это несколько строк, которые мне пришлось выделить из нескольких сотен.

(Я новичок здесь, поэтому, пожалуйста, не запугивайте меня за ужасную структуру.)

Заранее спасибо всем, кто откликнется.

1 Ответ

0 голосов
/ 13 декабря 2018

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