Three.js - 3D 空间中的 2D 对象（通过顶点）

Question

我有一个 3D 点数组。 如何在3D空间中画脸？我的意思是：一个平面物体，但在 3D 空间中。

我想画从

Points[0]

到

Points[1]

，从

Points[1]

到

Points[2]

等的线

现在我有以下解决方案：

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

我的功能：

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

我前段时间写的，大多数情况下都运行得很好。

它可以将物体变成三角形。但在某些情况下，函数

faceToTriangles()

工作不正确。它生成超出对象的三角形。

如何正确制作？ 如何在 3D 空间中显示 2D 平面对象（由顶点数组给出）？ 也许无需转换为三角形？

Answer 1

只是一个概念，使用四元数：

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>