用three.js中的输入顶点渲染多边形(Rendering a polygon with input vertices in three.js)

用three.js中的输入顶点渲染多边形(Rendering a polygon with input vertices in three.js)

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

有这个文件，但它似乎涉及贝塞尔。 我需要简单的直边多边形。

I have vertices(x,y,z coords) of a polygon as input. How can I render a polygon having these vertices in three.js?

There is this documentation.But it seems to involve bezier. I need simple straight edged polygon.

最满意答案

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

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() ;的顶点属性。

代码来自这个答案

You can create a polygon from vertices with the following code:

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

Copy and paste this code in and then change x, y, and z coordinates of v1, v2, and v3 (or however many vertices you need) to the coordinates of your vertices.

Essentially you are creating vertices using THREE.Vector3 to supply the coordinates and then pushing them to the vertices property of an empty THREE.Geometry();

Code is from this answer