Three JS Point Buffer point shadow/size

I am relatively new to threeJS and I am creating a 3D view point cloud app.

I have created a threejs app which loads a series of points into a THREE.BufferGeometry and then updates the camera position.

 scene.clear();

    var pointBuffer = new THREE.BufferGeometry();
    var points = [];
    var colors = [];

    for(var i = 0; i < array.length; i++){
        var point = array[i];
        var x = parseFloat(point.x);
        var y = parseFloat(point.y);
        var z = parseFloat(point.z);
        var r = parseFloat(point.r);
        var g = parseFloat(point.g);
        var b = parseFloat(point.b);

        //If not Nah then add to the array
        if(!isNaN(x) && !isNaN(y) && !isNaN(z) && !isNaN(r) && !isNaN(g) && !isNaN(b))
        {
            points.push(x, z, y);
            colors.push(r / 255, g / 255, b / 255);
        }
    }

    pointBuffer.setAttribute('position', new THREE.Float32BufferAttribute(points, 3));
    pointBuffer.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

    var boundingSphere = new THREE.Sphere();
    boundingSphere.setFromPoints(points);
    pointBuffer.boundingSphere = boundingSphere;

    //Stop the points chnaing size when zooming in and out

    var pointMaterial = new THREE.PointsMaterial({size: 0.1, vertexColors: true});
    var pointCloud = new THREE.Points(pointBuffer, pointMaterial);
    scene.add(pointCloud);

    var pointCamera = array[0];
    var x = parseFloat(pointCamera.x);
    var y = parseFloat(pointCamera.y);
    var z = parseFloat(pointCamera.z);
    var r = parseFloat(pointCamera.r);
    var g = parseFloat(pointCamera.g);
    var b = parseFloat(pointCamera.b);

    controls.target.set(x, z, y);
    camera.position.set(x, z + 5, y);

The camera has been set up as follows:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.05, 250 );

    const renderer = new THREE.WebGLRenderer();
            var container = document.getElementById('webglviewer');
            renderer.setSize(container.offsetWidth, container.offsetHeight);
            container.appendChild( renderer.domElement );

            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);
            controls.enableDamping = true;
            controls.dampingFactor = 0.1;
            camera.position.set(0, 0, 5);
            renderer.render( scene, camera );

            animate();

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

            window.addEventListener('click', MoveCamera);

When this code is run the following shadows or point size "bands or lines" appear within the view.

enter image description here

I am expecting the points to appear at a fixed size which is then updated depending on the distance from the camera? (If this is a point size issue).

Or the "Shadows" to have a smooth transition across the points. I havent explicitly setup a light within the app.

Any help with this is much appreciated :)

Via Active questions tagged javascript - Stack Overflow https://ift.tt/0Cb8oBq