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

如何为运动引入一些限制？即当粒子到达屏幕的边缘时，我想＆＃34;反弹＆＃34;他们回来了。

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，那么你可以参考这个非常好的SO answer

设置粒子运动的界限

1 个答案: