Looking for advice on drawing a face in 3D Space using an array of 3D Points. How can I achieve this? Essentially, I want to create a flat object in a 3D environment.
My current approach involves connecting points Points[0] to Points[1], Points[1] to Points[2], and so on.
Here is the code snippet I am currently using:
var geometry = new THREE.BufferGeometry();
var vertices = faceToTriangles(VerticesArray); // custom function
var uvs = new Float32Array([
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 0.0,
1.0, 1.0,
0.0, 1.0
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
var material = new THREE.MeshLambertMaterial({ color: 'red' });
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, material);
The custom function used:
function faceToTriangles(VerticesArray) {
var Triangles = new Float32Array((VerticesArray.length - 2) * 9);
var i = 0;
for ($v = 1; $v < Face.Vertices3D.length - 1; $v++) {
Triangles[i++] = parseFloat(Face.Vertices3D[0].x);
Triangles[i++] = parseFloat(Face.Vertices3D[0].y);
Triangles[i++] = parseFloat(Face.Vertices3D[0].z);
Triangles[i++] = parseFloat(Face.Vertices3D[$v].x);
Triangles[i++] = parseFloat(Face.Vertices3D[$v].y);
Triangles[i++] = parseFloat(Face.Vertices3D[$v].z);
Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].x);
Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].y);
Triangles[i++] = parseFloat(Face.Vertices3D[$v + 1].z);
}
return Triangles;
}
While this function works well in most scenarios, it sometimes generates inaccuracies where triangles extend beyond the intended object boundaries.
Any suggestions on how to improve this process? Is there a way to display a 2D flat object (represented by a vertex array) in 3D space without converting it to triangles?