如何动态地将点添加到三个js点系统？

Question

我正在开展一个小项目，我试图在使用三个js的点云可视化中显示NSF OpenTopography数据。我已经成功绘制了预先加载的数据，但是我希望通过ajax读取多个数据文件，并在加载数据时动态地将点添加到系统中。我目前正在使用BufferGeometry和BufferAttributes来生成可视化。

预加载数据的工作示例

http://jsfiddle.net/mcroteau/e6x73kad/

多个文件中具有相同数据的当前实施

http://jsfiddle.net/mcroteau/22xvj97j/

var container, scene, 
    camera, renderer, 
    controls, stats,
    geometry, material;

var SCREEN_WIDTH = window.innerWidth, 
    SCREEN_HEIGHT = window.innerHeight;

var VIEW_ANGLE = 45, 
    ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, 
    NEAR = 0.1, 
    FAR = 20000;

var POINT_SIZE = 1,
    PADDING = 20;

var BACKGROUND_COLOR = 0xefefef,
    POINT_COLOR = 0x4466B0;

var COLOR_DIVISOR = 65025;

var maxX = maxY = maxZ = 0;
var minX = minY = minZ = 0;

var DATA_LENGTH = 896238;


var positions = new Float32Array( DATA_LENGTH * 3 );
var colors = new Float32Array( DATA_LENGTH * 3 );    

var bufferPositions = new THREE.BufferAttribute( positions, 3 )
var bufferColors = new THREE.BufferAttribute( colors, 3 ) 

var NUMBER_FILES = 8;
var FILE_NAME = 'san-simeon';
var BASE_URL = 'http://104.237.155.7/jsfiddle/point-cloud1/data/output/';

function init() {

    scene = new THREE.Scene();

    container = document.createElement('div');
    document.body.appendChild( container );

    if ( Detector.webgl ){
        renderer = new THREE.WebGLRenderer({ antialias: true });
    }else{
        renderer = new THREE.CanvasRenderer(); 
    }

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.setClearColor( BACKGROUND_COLOR, 1);

    container.appendChild( renderer.domElement );


    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );


    geometry = new THREE.BufferGeometry();
    geometry.dynamic = true;

    geometry.addAttribute( 'position', bufferPositions );
    geometry.addAttribute( 'color', bufferColors );

    loadDrawData();

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

    camera.position.x = 10;
    camera.position.z = 50;
    camera.position.y = 20;

    scene.add(camera);

    camera.lookAt(scene.position);

    controls = new THREE.OrbitControls( camera, renderer.domElement );

    material = new THREE.PointCloudMaterial({ size: POINT_SIZE, vertexColors: THREE.VertexColors });
    particles = new THREE.PointCloud( geometry, material );
    scene.add( particles );

    window.addEventListener( 'resize', onWindowResize, false );

    animate();
}


function loadDrawData(){
    for(var m = 1; m < NUMBER_FILES; m++){
        var file = FILE_NAME + '-' + m + '.csv'
        var fileUrl = BASE_URL + FILE_NAME + '/' + file
        console.log(fileUrl) 
        loadData(fileUrl).then(updateGeometryBuffers).then(recomputeGeometry).fail(failed)
    }
}



function recomputeGeometry(){
    console.info('recompute geometry')
    geometry.attributes.position.needsUpdate = true
    geometry.computeBoundingBox();
    geometry.center();
}



function updateGeometryBuffers(csv){
    var parsedData = csv.split(/\n/);

    $(parsedData).each(function(index, row){
        var data = row.split(',');
        var x = data[1];
        var y = data[2];
        var z = data[0];

        if(x && y && z){
            positions[3 * index] = x
            positions[3 * index + 1] = y;
            positions[3 * index + 2] = z;

            var red = data[3]
            var green = data[4]
            var blue = data[5]

            red = red/COLOR_DIVISOR;
            green = green/COLOR_DIVISOR;
            blue = blue/COLOR_DIVISOR;

            colors[3 * index] = red;
            colors[3 * index + 1] = green;
            colors[3 * index + 2] = blue;

        }else{
            console.warn('no data in row', index);
        }
    });
}


function loadData(url){
    return $.ajax({
        url      : url,
        dataType : 'text'
    });
}


function failed(){
    console.warn('failed to load data');
}



function onWindowResize() {
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}


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


function update(){
    controls.update();
    stats.update();
}



function render() {
    renderer.render( scene, camera );
}



init();

在当前的实现中，几何不是重新定心，这是它不工作的一个原因。如何强制几何体重新居中？动态添加点到三js点系统的最佳方法是什么？

提前感谢您提供的任何指导。