三.js - 3D 空间中的 2D 对象(通过顶点)

Question

我有一个问题：

我有一个 3D 点数组。 如何在3D空间中绘制脸部？我的意思是：一个平面物体，但在3D空间中。 我想画一条从点[0]到点[1]，从点[1]到点[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>