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

[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?

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);

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,
})
);

// 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)

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,
})
);

};