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 Poin

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://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>