Three.js - 2D object in 3D space (by Vertices)

Question

I have a problem:

I have an array of 3D Points. How to draw 2D, flat object given by Vertices in 3D Space? I want to draw line from Points[0] to Points[1], from Points[1] to Points[2] etc… Now I have a following solution:

var geometry = new THREE.BufferGeometry();

var vertices = faceToTriangles( VerticesArray );  // my 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 );

faceToTriangles() :

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

I wrote it some time ago, and it’s works in most of cases. It makes a triangles from an objects. But in some cases, function faceToTriangles() works incorretly. It generates triangles going beyond the Object.

How make it correctly? How to display 2D flat object (given by an array of vertices) in 3D space? Maybe without converting to triangles?

(sorry for my english)

Answer 1

Just a concept, using a quaternion:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 4).setLength(40);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101010);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.AxesHelper(3));

var rawPoints = [{
  "x": 10,
  "y": 10,
  "z": 1
}, {
  "x": 9.421052631578952,
  "y": 11.736842105263158,
  "z": 6.789473684210525
}, {
  "x": 5,
  "y": 12.142857142857142,
  "z": 7.7142857142857135
}, {
  "x": 5.285714285714286,
  "y": 13,
  "z": 10.628571428571426
}, {
  "x": -1,
  "y": 13,
  "z": 10
}, {
  "x": 0,
  "y": 10,
  "z": 0
}]

var points = [];
rawPoints.forEach(r => {
  points.push(new THREE.Vector3(r.x, r.y, r.z));
});

var tri = new THREE.Triangle(points[2], points[1], points[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 = [];
points.forEach(p => {
  tempPoints.push(p.clone().applyQuaternion(quaternion));
})

var shape = new THREE.Shape(tempPoints);
var shapeGeom = new THREE.ShapeGeometry(shape);
var mesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
  color: "red",
  side: THREE.DoubleSide,
  wireframe: false
}));
console.log(points);
mesh.geometry.vertices = points;
scene.add(mesh);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>