Javascript 三个.js粒子移向一侧，而不是移向摄影机

我正在尝试创建一个类似于此的云层，只是具有更高的机动性：

我在使用精灵创建时没有问题，但是我想提高性能，所以我尝试使用粒子和THREE.PointCloud

问题是，当我飞向粒子时，当粒子挂在相机前面，然后滑向侧面时，会出现一些奇怪的效果，而不是在相机中“碰撞”，我在这里举了一个例子： 所有粒子都沿直线向相机移动，但没有一个粒子在其中发生碰撞，改变大小也无济于事

有人知道是什么原因造成的，也许我该怎么解决

谢谢

JSIDLE代码：

    var geometry, renderer, scene, camera, cloud, uniforms, attributes;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 600;

    var particleMaterial = new THREE.PointCloudMaterial({
            color:0xffffff,
            size: 100,        
            transparent:true,
            opacity:0.5,
            sizeAttenuation:false
        });
    particleMaterial.depthTest = true;
    particleMaterial.depthWrite = false;    

    // point cloud geometry
    geometry = new THREE.PlaneGeometry( 10, 10, 5, 5);

    for( var i = 0; i < geometry.vertices.length; i++)
    {
        geometry.vertices[i].velocity = new THREE.Vector3(0, 0, random(50, 300) / 100);
    }    

    cloud = new THREE.PointCloud(geometry, particleMaterial);

    scene.add( cloud );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    for( var i = 0; i < geometry.vertices.length; i++ )
    {
        geometry.vertices[i].add(geometry.vertices[i].velocity);
        if (geometry.vertices[i].z > 650) geometry.vertices[i].z = 0;
    }

    geometry.verticesNeedUpdate = true;

    renderer.render( scene, camera );

}

function random(min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var几何体、渲染器、场景、摄影机、云、制服、属性；
init（）；
制作动画（）；
函数init（）{
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//场面
场景=新的三个。场景（）；
//摄像机
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=600；
var particleMaterial=新的三点云材料({
颜色：0xffffff，
尺码：100，
透明：是的，
不透明度：0.5，
sizeAttenuation:false
});
particleMaterial.depthTest=真；
particleMaterial.depthWrite=false；
//点云几何
几何=新的三个平面几何（10,10,5,5）；
对于（var i=0；i650）geometry.vertices[i].z=0；
}
geometry.verticesNeedUpdate=true；
渲染器。渲染（场景、摄影机）；
}
随机函数（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min+1））+min；
}

我假设当粒子碰撞时，你希望它们反弹回来或其他什么。然而，从我在代码中看到的情况来看，您实际上还没有实现任何逻辑来检测冲突并处理它们。我不相信库中有本机碰撞处理。不，代码只是一个显示滑动的示例，看看我添加的JSFIDLE链接，我使用了“碰撞”一词，但我的意思是粒子看起来不像是朝着相机移动，而是在相机旁边移动，这就是我想要解决的问题。在JSFIDLE链接中，白色的方块向不同的方向移动-这就是你说的滑到一边的意思吗？你想让它们在靠近相机时继续增大尺寸吗？（从视觉上讲，不是数学上）是的，这正是我想要的，但从数学上讲，它们都朝着相机直线移动，如果我使用精灵而不是点云，视觉表现将看起来正常（正方形将增大，最终填充屏幕，直到它们进入相机后面）。但当使用粒子时，我得到了奇怪的效果。这是几何体。顶点[I]。添加（几何体。顶点[I]。速度）；不仅仅是z？或者我还没有完全理解这行代码。