Question

我正在尝试创建一个类似于此的云飞行，只有更多的机动性： http://mrdoob.com/lab/javascript/webgl/clouds/

使用精灵创建它没有问题，但我想提高性能，所以我试图使用带有THREE.PointCloud的粒子。

问题在于，当我飞向粒子时，而不是相机中的“碰撞”，当粒子挂在相机前面然后向侧面滑动时会产生一些奇怪的效果，我在这里做了一个例子：{{ 3}} 所有粒子都以直线向相机移动，但实际上没有粒子碰撞，改变尺寸无济于事。

任何人都知道造成这种情况的原因，也许我该如何解决？

由于

JSFiddle代码：

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

Three.js粒子移向侧面而不是相机

0 个答案: