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

Posted 2023-03-23

【中文标题】Three.js - 3D 空间中的 2D 对象（通过 Vertices）

【英文标题】：Three.js - 2D object in 3D space (by Vertices)

【发布时间】：2018-10-20 16:40:43

【问题描述】：

我有一个问题：

我有一个 3D 点数组。 如何在 3D 空间中绘制由 Vertices 给出的 2D 平面对象？ 我想画线从 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 平面对象（由顶点数组给出）？ 也许不用转换成三角形？

（对不起我的英语）

【参考方案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>