Accessing each pixel data of a three.js shape - just like getImageData() in case of images

Questions
,
1

I actually ran across this https://codepen.io/Mamboleoo/pen/JYJPJr?q=map&limit=Mamboleoo [ in which several points make up a png image ( a world map, in this case) ]

I was trying to do something just like this with Three.js shapes.

Here’s what I had written in order to emulate the pen.

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,0.01,1000);
        var renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //Making a square
        var squareGeometry = new THREE.Geometry(); 
        var v1 = new THREE.Vector3(-1.0,  1.0, 0.0);
        var v2 = new THREE.Vector3( 1.0,  1.0, 0.0);
        var v3 = new THREE.Vector3( 1.0, -1.0, 0.0);
        var v4 = new THREE.Vector3(-1.0, -1.0, 0.0);
        squareGeometry.vertices.push(v1); 
        squareGeometry.vertices.push(v2); 
        squareGeometry.vertices.push(v3); 
        squareGeometry.vertices.push(v4); 
        squareGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
        squareGeometry.faces.push(new THREE.Face3(0, 2, 3)); 

        var squareMaterial = new THREE.MeshBasicMaterial({ 
            color:0xFFFFFF, 
            side:THREE.DoubleSide 
         }); 
       
        var squareMesh = new THREE.Mesh(squareGeometry, squareMaterial); 

        var previousTime = 0;

        //Height and width of the square
        var height = v1.distanceTo ( v2 );
        var width = v2.distanceTo ( v3 );

        function makingParticles(){
            var geometry2 = new THREE.Geometry();

            var material2 = new THREE.PointsMaterial({
                size: 3,
                color: 0xffffff,
                sizeAttenuation: false
            });

            for (var y = 0, y2 = height; y < y2; y += 0.03) {
                for (var x = 0, x2 = width; x < x2; x += 0.03) {
                        var vertex = new THREE.Vector3();
                        vertex.x = Math.random() * 1000 - 500;
                        vertex.y = Math.random() * 1000 - 500;
                        vertex.z = -Math.random() * 500;

                        vertex.destination = {
                            x: x - width / 2,
                            y: -y + height / 2,
                            z: 0
                        };

                        vertex.speed = Math.random() / 200 + 0.015;
                        geometry2.vertices.push(vertex);
                }
            }
            particles = new THREE.Points(geometry2, material2);
            scene.add(particles);
            requestAnimationFrame(render);
        }

       camera.position.z = 10;

       var render = function(a) {
            requestAnimationFrame(render);
            
            for (var i = 0, j = particles.geometry.vertices.length; i < j; i++) {
                var particle = particles.geometry.vertices[i];
                particle.x += (particle.destination.x - particle.x) * particle.speed;
                particle.y += (particle.destination.y - particle.y) * particle.speed;
                particle.z += (particle.destination.z - particle.z) * particle.speed;
            }

            if(a-previousTime>100){
                var index = Math.floor(Math.random()*particles.geometry.vertices.length);
                var particle1 = particles.geometry.vertices[index];
                var particle2 = particles.geometry.vertices[particles.geometry.vertices.length-index];
                previousTime = a;
            }

            particles.geometry.verticesNeedUpdate = true;
            renderer.render(scene,camera);
        }

        makingParticles();

JSFiddle: https://jsfiddle.net/Rich18/4jyojru1/4/

This code does exactly what is needed. But, I am able to make the shape form these arbitrary points, which will not be the case if I change the camera’s position or change (in this case, increase) the size of the shape, or change(in this case, decrease) the number of points making up the shape.

Is there a way, we can access each pixel data of the shape just like we can do with images using getImageData() ?