Three.js buffergeometry to render ARKit pointcloud data for blog

threejs_create_pointcloud.js

// Pointcloud
pointGeometry = new THREE.BufferGeometry();
var pointArray = [];
var colorArray = [];

for (i = 0; i < points_dataset.length; i++) {

        // Space apart ARKit points appropriately into new environment
        var x = points_dataset[i]["x"] * POINT_SPACING;
        var y = points_dataset[i]["y"] * POINT_SPACING;
        var z = points_dataset[i]["z"] * POINT_SPACING;

        pointArray.push( x, y, z );

        // Build color gradient pointcloud colors based on height in Y dimension
        var delta = maxHeightY - minHeightY;
        var red = ( ( y - minHeightY ) / delta );
        var green = 1.0 - ( ( y - minHeightY ) / delta );
        var blue = ( ( y - minHeightY ) / delta );
  
        // Fade from green (minimal height) to blue (max height) along Y dimension
        colorArray.push( 0.0, green, blue );
}

// Add position and color attributes to our buffergeometry model
pointGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( pointArray, 3 ) );
pointGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colorArray, 3 ) );
pointGeometry.computeBoundingSphere();

// Create points out of our buffergeometry and material, add to scene
points = new THREE.Points( pointGeometry, pointMaterial );
scene.add( points );