How to callculate rotation 2D plane inside of 3D with 4 Points

2D plane

As you can see in this picture I have 4 Coordinates for 4 corners of the plane and I calculate the middle point because I need a central point for Three.Plane. And I calculate the width and height of that plane like width = p1.x - p2.x , height = p2.y - p3.y. For the Z axis, I set 0.001 so it just represents thickness.

In python, you can create a plane and give them these 4 points and they end up being rotated automatically because all of them represent the corners of plane. But in the javascript world, you can't, it asking plane.position(X,Y,Z) - the central point of plane, width and height, and plane.rotation(new Eluer(x,y,z))

So my question is how to get from these points rotation in the 3D world? My idea is from the central point to calculate the degree of min and max values of X,Y,Z

Points:

[
             P1:{ 
                    "x": 4.67234597,
                    "y": 1.23728261,
                    "z": 1.39149472
                },
             P2:{
                    "x": 4.81798247,
                    "y": 1.24044999,
                    "z": 1.37566767
                },
             P3:{
                    "x": 4.82283908,
                    "y": 1.53690504,
                    "z": 1.3727246
                },
             P4:{
                    "x": 4.68827069,
                    "y": 1.53065347,
                    "z": 1.38727569
                }
]

The cube.mesh that I have now: Present cube

And what I want:

Future

This is Three.Line I just connect 4 points that I have and as you can see in the image above they have their own rotation

How I'm adding the Three.Mesh

 const boxGeometry = new THREE.BoxGeometry(scale[0], 0.01, scale[2]);
    const materialForCube = new THREE.MeshBasicMaterial({
        wireframe: true,
        opacity: 0.001,
        transparent: true,
    });

    const cube = new THREE.Mesh(boxGeometry, materialForCube);

    var geo = new THREE.EdgesGeometry(cube.geometry); // or WireframeGeometry
    var mat = new THREE.LineBasicMaterial({ color: 0xffffff });
    var wireframe = new THREE.LineSegments(geo, mat);
    cube.add(wireframe);

    cube.geometry.computeBoundingBox();
    cube.layers.set(2);

    cube.position.x = position[0];
    cube.position.y = position[1];
    cube.position.z = position[2];

scene.add(cube)

How I add dummy Lines:

        const material = new THREE.LineBasicMaterial({
        color: 0x0000ff,
    });

    const points = [];
    points.push(new THREE.Vector3(item.Coordinates[0].x, item.Coordinates[0].y, item.Coordinates[0].z));
    points.push(new THREE.Vector3(item.Coordinates[1].x, item.Coordinates[1].y, item.Coordinates[1].z));
    points.push(new THREE.Vector3(item.Coordinates[2].x, item.Coordinates[2].y, item.Coordinates[2].z));
    points.push(new THREE.Vector3(item.Coordinates[3].x, item.Coordinates[3].y, item.Coordinates[3].z));
    points.push(new THREE.Vector3(item.Coordinates[0].x, item.Coordinates[0].y, item.Coordinates[0].z));

    const geometry = new THREE.BufferGeometry().setFromPoints(points);

    const cube1 = new THREE.Line(geometry, material);

    scene.scene.add(cube1);