Polygon from points

Questions
1

I am trying to draw a polygon from the intersection points of a dodecahedron and a plane. I found this algorithm, but it draws not quite correctly. It works with some figures, but not with dodecahedron or cube.

       var tri = new THREE.Triangle(
          pointsOfIntersection[2],
          pointsOfIntersection[1],
          pointsOfIntersection[0],
        );

        var normal = new THREE.Vector3();

        tri.getNormal(normal);

        var baseNormal = new THREE.Vector3(0, 0, 1);

        var quaternion = new THREE.Quaternion().setFromUnitVectors(

          normal,

          baseNormal

        );

        var tempPoints = [];

        pointsOfIntersection.forEach((p) => {

          tempPoints.push(p.clone().applyQuaternion(quaternion));

        });

        var shape = new THREE.Shape(tempPoints);

        var shapeGeom = new THREE.ShapeBufferGeometry(shape);

        const 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

        var bufferPoints = [];

        pointsOfIntersection.slice().forEach((p) => {

          bufferPoints.push(p.x, p.y, p.z);

        });

        var F32A = new Float32Array(bufferPoints);

        attPos.set(F32A, 0);

        scene.add(mesh);

full code here

2

Looks familiar :slight_smile:
Have you seen this SO answer? three.js - Grouping points after cut plane three js - Stack Overflow

3

not exacly, there is a connection using lines, but I need to connect as a polygon (plane) I have already partially done this, but not for all points

4

So that’s what I tried to achieve in that answer: to put points in order to make proper shapes, that follow contours.

5

I think you need to sort points by degrees.If in future you will have rotated plane (normal), then you need rotate it back to top view and apply it to points and then sort it.
image

After var bufferPoints = []; add:

       for(var n=0;n<pointsOfIntersection.length;n++){
       pointsOfIntersection[n].angle=Math.atan2(pointsOfIntersection[n].x,pointsOfIntersection[n].z);
       }
       pointsOfIntersection.sort((a,b)=>b.angle-a.angle);

image