threejs 粒子运动函数

在 Three.js 中，可以使用 `THREE.Points` 来创建粒子，然后通过设置粒子的位置、颜色等属性来实现粒子的运动效果。以下是一个简单的例子：

// 创建粒子对象
var particleCount = 1000;
var particles = new THREE.Geometry();
for (var i = 0; i < particleCount; i++) {
    var particle = new THREE.Vector3(
        Math.random() * 200 - 100,
        Math.random() * 200 - 100,
        Math.random() * 200 - 100
    );
    particles.vertices.push(particle);
}

// 创建粒子材质
var particleMaterial = new THREE.PointsMaterial({
    size: 5,
    color: 0xffffff
});

// 创建粒子系统
var particleSystem = new THREE.Points(particles, particleMaterial);

// 将粒子系统添加到场景中
scene.add(particleSystem);

// 粒子运动函数
function animateParticles() {
    for (var i = 0; i < particleCount; i++) {
        var particle = particles.vertices[i];
        particle.x += Math.random() * 2 - 1;
        particle.y += Math.random() * 2 - 1;
        particle.z += Math.random() * 2 - 1;
    }
    particleSystem.geometry.verticesNeedUpdate = true;
}

在上面的代码中，通过循环创建了 1000 个粒子，并将它们的位置随机设置在一个立方体范围内。然后创建了粒子材质，并使用 `THREE.Points` 创建了粒子系统。在 `animateParticles` 函数中，每次更新粒子的位置，通过 `particles.verticesNeedUpdate = true` 来告诉 Three.js 需要更新粒子的位置。最后，在渲染循环中调用 `animateParticles` 函数即可实现粒子的运动效果。