设置粒子运动的界限

Question

我正在创建粒子并使用 three.js 随机放置它们：

for( var i = 0; i < particleCount; i++ ){
  var pX = Math.random() * 100-50;
  var pY =Math.random() * 100-50;
  var pZ = Math.random() * 100-50;
  particle = new THREE.Vector3(pX,pY,pZ);
  particle.velocity = new THREE.Vector3(Math.random(), Math.random(), pZ);
  particles.vertices.push(particle);
}

然后在我的 requestAnimationFrame 更新函数中移动粒子：

for (var i = 0; i < particleCount; i++) {
    var particle = particles.vertices[i];
    particle.y += particle.velocity.y*speed;
    particle.x += particle.velocity.x*speed;
  }

如何为运动引入一些限制？即当粒子到达屏幕边缘时，我想 "bounce" 它们返回。

Answer 1

每个粒子最好有方向和速度。方向始终是标准化的 THREE.Vector3().

那么你的粒子代码将是这样的：

var particles = [];
var particleCount = 100;
var sizeX = 300;
var sizeY = 200;
var sizeZ = 100;

for (var i = 0; i < particleCount; i++) {
  var pX = Math.random() * sizeX - sizeX / 2;
  var pY = Math.random() * sizeY - sizeY / 2;
  var pZ = Math.random() * sizeZ - sizeZ / 2;
  particle = new THREE.Vector3(pX, pY, pZ);
  particle.direction = new THREE.Vector3(Math.random() - .5, Math.random() - .5, 0).normalize(); // a normalized vector with random values for x,y
  particle.velocity = Math.random() * 50; // speed is 50 units per second
  particles.push(particle);
}

假设您使用 THREE.Points():

var geometry = new THREE.Geometry();
geometry.vertices = particles;

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 5,
  color: "red"
}));
scene.add(points);

要设置合适的速度（我们的每秒 50 个单位），我们需要 THREE.Clock() 及其 .getDelta() 方法：

var clock = new THREE.Clock();
var shift = new THREE.Vector3(); //we will re-use it in the animation loop
var delta = 0; // we will re-use it in the animation loop

在动画循环中我们将这样做：

  delta = clock.getDelta(); // get period between frames (in seconds)

  particles.forEach(function(p) {

    if (p.x > sizeX / 2 || p.x < -sizeX / 2) { // it's also can be like if (Math.abs(p.x > sizeX / 2))
      p.direction.x = -p.direction.x;
    }
    if (p.y > sizeY / 2 || p.y < -sizeY / 2) {
      p.direction.y = -p.direction.y;
    }
    if (p.z > sizeZ / 2 || p.z < -sizeZ / 2) {
      p.direction.z = -p.direction.z;
    }

    p.add(shift.copy(p.direction).multiplyScalar(p.velocity * delta)); // here we re-use the `shift` vector 
  })

  points.geometry.verticesNeedUpdate = true; // important, if you won't set it to true you won't get your particles moving

就是这样。

jsfiddle 例子

PS如果要用BufferGeometry，那么可以参考这个很好

设置粒子运动的界限

Setting bounds on particle movement

javascript

particles

three.js