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

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

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

我前段时间写的，在大多数情况下都可以正常工作。 它用物体制作三角形。 但在某些情况下，函数 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(rx, ry, rz)); }); 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>