在three.js中使用输入顶点渲染多边形答案

【问题标题】：Rendering a polygon with input vertices in three.js在three.js中使用输入顶点渲染多边形
【发布时间】：2018-10-14 18:21:21
【问题描述】：

我有一个多边形的顶点（x，y，z 坐标）作为输入。如何在 three.js 中渲染具有这些顶点的多边形？

有this 文档。但它似乎涉及贝塞尔曲线。我需要简单的直边多边形。

【问题讨论】：

标签： three.js

【解决方案1】：

您可以使用以下代码从顶点创建多边形：

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

scene.add(object);

复制并粘贴此代码，然后将 v1、v2 和 v3（或您需要的任意多个顶点）的 x、y 和 z 坐标更改为您的顶点坐标。

本质上，您是使用THREE.Vector3 创建顶点来提供坐标，然后将它们推送到空THREE.Geometry() 的顶点属性；

代码来自this答案

【讨论】：