Three.js 粒子动画：如何控制单个粒子移动

要控制每一个粒子的移动，可以使用 three.js 的 ParticleSystem 类或 Points 类。

首先，需要定义粒子系统，可以使用 ParticleSystem 或 Points 创建：

// 定义粒子系统
var particleSystem = new THREE.ParticleSystem(geometry, material);

其中，geometry 是一个 THREE.Geometry 对象，包含粒子的位置和其他属性，material 是一个 THREE.Material 对象，定义粒子的外观。

接下来，需要更新每一个粒子的位置和其他属性。可以在渲染循环中调用 ParticleSystem 的 update 方法，该方法会自动更新粒子的位置和其他属性：

// 渲染循环
function render() { 
    requestAnimationFrame(render);

    // 更新粒子系统
    particleSystem.update();
    
    renderer.render(scene, camera);
}

要控制每一个粒子的移动，可以在 update 方法中遍历每一个粒子，修改其位置和其他属性：

// 更新粒子系统
particleSystem.update = function() {
    for (var i = 0; i < this.geometry.vertices.length; i++) {
        var particle = this.geometry.vertices[i];
        
        // 修改粒子位置
        particle.x += 0.1;
        particle.y += 0.2;
        particle.z += 0.3;
        
        // 修改其他属性
        // ...
    }
    this.geometry.verticesNeedUpdate = true;
};

在这个示例中，粒子的位置每次更新时增加了一定的值，可以根据需求修改。修改完粒子的属性后，需要设置 geometry.verticesNeedUpdate 为 true，以通知 three.js 更新粒子的位置和其他属性。

注意，如果需要控制每一个粒子的移动，必须使用 ParticleSystem 或 Points 类，而不能使用 ParticleSystemRenderer 或 PointCloudRenderer 类，因为后者只能控制整个粒子系统的位置，而无法控制每一个粒子的位置。