在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?

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

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

推荐答案

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

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

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

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.

本质上，您是使用 THREE.Vector3 创建顶点来提供坐标，然后将它们推送到空 THREE.Geometry() 的 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();

代码来自这个答案

这篇关于在three.js中使用输入顶点渲染多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！