Three.js更改每个粒子的枢轴点

Question

我试图使每个粒子沿其自身的旋转轴旋转，而不是使它们全部沿一个点旋转。我已经看过许多关于设置枢轴点的类似问题，但是老实说，我迷失了方向。

我的目标是对粒子进行动画处理，就像它们从顶部掉落到底部一样，类似于this animation。

var camera,
  scene,
  renderer,
  materials = [],
  parameters;

var windowHalfX = window.innerWidth / 2,
  windowHalfY = window.innerHeight / 2;

var particles = [];

var confetti = {
  maxCount: 2000, //set max confetti count
  speed: 1, //set the particle animation speed
  frameInterval: 30, //the confetti animation frame interval in milliseconds
  waveThreshold: 3, //
  start: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
  stop: null, //call to stop adding confetti
  toggle: null, //call to start or stop the confetti animation depending on whether it's already running
  pause: null, //call to freeze confetti animation
  resume: null, //call to unfreeze confetti animation
  togglePause: null, //call to toggle whether the confetti animation is paused
  remove: null, //call to stop the confetti animation and remove all confetti immediately
  isPaused: null, //call and returns true or false depending on whether the confetti animation is paused
  isRunning: null //call and returns true or false depending on whether the animation is running
};

init();
animate();

window.addEventListener('resize', onWindowResize);

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 20, 900);
  camera.position.z = 100;

  var geometry = new THREE.BufferGeometry();
  var vertices = [];
  var textureLoader = new THREE.TextureLoader();

  var sprite1 = textureLoader.load('https://i.postimg.cc/Rhx8t6CM/confetti1.png');
  var sprite2 = textureLoader.load('https://i.postimg.cc/Rhx8t6CM/confetti1.png');
  var sprite3 = textureLoader.load('https://i.postimg.cc/Rhx8t6CM/confetti1.png');
  var sprite4 = textureLoader.load('https://i.postimg.cc/Rhx8t6CM/confetti1.png');
  var sprite5 = textureLoader.load('https://i.postimg.cc/Rhx8t6CM/confetti1.png');

  for (var i = 0; i < confetti.maxCount; i++) {
    var x = Math.random() * 2000 - 1000;
    var y = Math.random() * 2000 - 1000;
    var z = Math.random() * 1000 - 900;
    vertices.push(x, y, z);
    //particles[i].tilt = Math.random() * 10 - 10;
    //particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
    //particles[i].tiltAngle = Math.random() * Math.PI;
    particles.push({
      'tilt': Math.random() * 1 - 1,
      'tiltAngle': Math.random() * Math.PI
    })
  }

  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

  parameters = [
    [sprite2, 10],
    [sprite3, 9],
    [sprite1, 10],
    [sprite5, 8],
    [sprite4, 10]
  ];

  for (var i = 0; i < parameters.length; i++) {
    var sprite = parameters[i][0];
    var size = parameters[i][1];
    materials[i] = new THREE.PointsMaterial({
      size: size,
      map: sprite,
      blending: THREE.AdditiveBlending,
      depthTest: false,
      transparent: true
    });
    var particle = new THREE.Points(geometry, materials[i]);
    particle.rotation.x = Math.random() * 5;
    particle.rotation.y = Math.random() * 5;
    particle.rotation.z = Math.random() * 5;
    scene.add(particle);
  }

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setClearColor('#121212')
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

function onWindowResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var time = Date.now() * 0.00005;
  for (var i = 0; i < scene.children.length; i++) {
    var object = scene.children[i];
    if (object instanceof THREE.Points) {
      //object.rotation.x = time * ( i < 4 ? i + 1 : ( i + 1 ) );
      //object.position.x -= time * ( i < 4 ? i + 1 : -( i + 1 ) );
      object.position.y -= 1;
      object.position.x += particles[i]['tilt'] / 3;
      object.rotation.y += .001;
      //object.rotation.x += time * particles[i]['tiltAngle'];
    }
  }
  renderer.render(scene, camera);
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js" type="text/javascript"></script>