How do you create a plane from an array of Vector3 Positions

Questions
,
1

[Example One] [Example Two] , These two examples show yellow points on the mesh, I have all the positions of the yellow dots, how would I go about creating a plane in the shape of the dots?

2

Try this. but its not completed: Polygon from points - #5 by Chaser_Code

<button id="pressMe" style="position: absolute">PressMe</button>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


<script>

     var mesh;
     var pointsHelper;
     var bufferPoints;

      const roundVector = (digits, vector) => {
        if (!vector) {
          return null;
        }
        const e = Math.pow(10, digits || 0);

        vector.x = Math.round(vector.x * e) / e;
        vector.y = Math.round(vector.y * e) / e;
        vector.z = Math.round(vector.z * e) / e;

        return vector;
      };

      const setPointOfIntersection = (line, plane) => {
        const pointOfIntersection = plane.intersectLine(
          line,
          new THREE.Vector3()
        );
        const rounded = roundVector(2, pointOfIntersection);
        if (rounded && !pointsOfIntersection.some((el) => rounded.equals(el))) {
          pointsOfIntersection.push(pointOfIntersection.clone());
        }
      };

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

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

      const objGeom = new THREE.DodecahedronGeometry(10);
      const obj = new THREE.Mesh(
        objGeom,
        new THREE.MeshBasicMaterial({
          color: "white",
          wireframe: true,
        })
      );
      obj.position.set(0, 0, 0);
      scene.add(obj);

      const pointsOfIntersection = [];

      var a = new THREE.Vector3(),
        b = new THREE.Vector3(),
        c = new THREE.Vector3();
      var lineAB = new THREE.Line3(),
        lineBC = new THREE.Line3(),
        lineCA = new THREE.Line3();

      const drawIntersectionPoints = () => {
        const mathPlane = new THREE.Plane();
        mathPlane.setFromCoplanarPoints(
          new THREE.Vector3(-18, 1.8, -27),
          new THREE.Vector3(-18, 1.8, 20),
          new THREE.Vector3(10, 1.8, 0)
        );

        for (let i = 0; i < obj.geometry.attributes.position.count; i += 3) {
          obj.localToWorld(a.copy(new THREE.Vector3().fromBufferAttribute(obj.geometry.attributes.position,i)));
          obj.localToWorld(b.copy(new THREE.Vector3().fromBufferAttribute(obj.geometry.attributes.position,i+1)));
          obj.localToWorld(c.copy(new THREE.Vector3().fromBufferAttribute(obj.geometry.attributes.position,i+2)));

          lineAB = new THREE.Line3(a, b);
          lineBC = new THREE.Line3(b, c);
          lineCA = new THREE.Line3(c, a);
          setPointOfIntersection(lineAB,mathPlane);
          setPointOfIntersection(lineBC,mathPlane);
          setPointOfIntersection(lineCA,mathPlane);
        }

        pointsHelper = new THREE.Points(
          new THREE.BufferGeometry().setFromPoints(pointsOfIntersection),
          new THREE.PointsMaterial({
            size: 1,
            color: 0xffff00,
          })
        );
        scene.add(pointsHelper);

        // draw polygon
        const box2 = new THREE.Box3();
        const center = new THREE.Vector3();

        box2.setFromPoints(pointsOfIntersection);
        box2.getCenter(center);

        var tri = new THREE.Triangle(
          pointsOfIntersection[0],
          pointsOfIntersection[1],
          center
        );
        var normal = new THREE.Vector3();
        tri.getNormal(normal);

        var baseNormal = new THREE.Vector3(0, 0, 1);
        var quaternion = new THREE.Quaternion().setFromUnitVectors(
          normal,
          baseNormal
        );

        tempPoints = [];
        pointsOfIntersection.forEach((p) => {
          tempPoints.push(p.clone().applyQuaternion(quaternion));
        });

        var shape = new THREE.Shape(tempPoints);
        var shapeGeom = new THREE.ShapeBufferGeometry(shape);
        mesh = new THREE.Mesh(
          shapeGeom,
          new THREE.MeshBasicMaterial({
            color: "red",
            side: THREE.DoubleSide,
            wireframe: false,
          })
        );

        var box = new THREE.Box3().setFromObject(mesh);
        var size = new THREE.Vector3();
        box.getSize(size);
        var vec3 = new THREE.Vector3(); // temp vector
        var attPos = mesh.geometry.attributes.position;
        var attUv = mesh.geometry.attributes.uv;
        for (let i = 0; i < attPos.count; i++) {
          vec3.fromBufferAttribute(attPos, i);
          attUv.setXY(
            i,
            (vec3.x - box.min.x) / size.x,
            (vec3.y - box.min.y) / size.y
          );
        }

        // turn vectors' values to a typed array
        bufferPoints = [];


       for(var n=0;n<pointsOfIntersection.length;n++){
       pointsOfIntersection[n].angle=Math.atan2(pointsOfIntersection[n].x,pointsOfIntersection[n].z);
       pointsOfIntersection[n].angle = (pointsOfIntersection[n].angle*(180/Math.PI)+360)%360;
       }
       pointsOfIntersection.sort((a,b)=>b.angle-a.angle);
       //pointsOfIntersection.push({x:40,y:0,z:0});
       // pointsOfIntersection.sort((a,b)=>b.angle-a.angle);
        
        var z=0;
        pointsOfIntersection.slice().forEach((p) => {
          //if(z<70){
          bufferPoints.push(p.x, p.y, p.z);
         // }
        z++;
        });
        var F32A = new Float32Array(bufferPoints);
        //attPos.set(F32A, 0);
        mesh.geometry.attributes.position=new THREE.BufferAttribute(F32A,3)
        scene.add(mesh);
        
        
                var shape = new THREE.Shape(pointsOfIntersection);
        var shapeGeom = new THREE.ShapeBufferGeometry(shape);
        mesh2 = new THREE.Mesh(
          shapeGeom,
          new THREE.MeshBasicMaterial({
            color: "red",
            side: THREE.DoubleSide,
            wireframe: false,
          })
        );
scene.add(mesh2)
        
        
        
      };

      pressMe.addEventListener("click", drawIntersectionPoints, false);
      render();

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


</script>
3

I’ll give it a shot, than you!