CODEWITHSUNDEEP
three.js
user7290573
user7290573

Reputation: 1330

How can I create a face from an arbitrarily sized array of vertices?

I have a 3D shape created in UnrealEd 2.0, as shown above. This can be exported into "T3D" format or parsed from the saved map file directly, which looks like the following:

Begin PolyList
   Begin Polygon Item=Wall
      Origin   +00212.077362,+00512.000000,-00128.000000
      Normal   +00000.707107,+00000.707107,+00000.000000
      TextureU +00000.707107,-00000.707107,+00000.000000
      TextureV +00000.000000,+00000.000000,-00001.000000
      Vertex   +00212.077362,+00512.000000,-00128.000000
      Vertex   +00212.077362,+00512.000000,+00128.000000
      Vertex   +00512.000000,+00212.077347,+00128.000000
      Vertex   +00512.000000,+00212.077347,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   +00512.000000,+00212.077347,-00128.000000
      Normal   +00001.000000,+00000.000000,+00000.000000
      TextureU +00000.000000,-00001.000000,+00000.000000
      TextureV +00000.000000,+00000.000000,-00001.000000
      Vertex   +00512.000000,+00212.077347,-00128.000000
      Vertex   +00512.000000,+00212.077347,+00128.000000
      Vertex   +00512.000000,-00212.077393,+00128.000000
      Vertex   +00512.000000,-00212.077393,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   +00512.000000,-00212.077393,-00128.000000
      Normal   +00000.707107,-00000.707107,-00000.000000
      TextureU -00000.707107,-00000.707107,-00000.000000
      TextureV -00000.000000,+00000.000000,-00001.000000
      Vertex   +00512.000000,-00212.077393,-00128.000000
      Vertex   +00512.000000,-00212.077393,+00128.000000
      Vertex   +00212.077255,-00512.000061,+00128.000000
      Vertex   +00212.077255,-00512.000061,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   +00212.077255,-00512.000061,-00128.000000
      Normal   -00000.000000,-00001.000000,+00000.000000
      TextureU -00001.000000,+00000.000000,+00000.000000
      TextureV -00000.000000,+00000.000000,-00001.000000
      Vertex   +00212.077255,-00512.000061,-00128.000000
      Vertex   +00212.077255,-00512.000061,+00128.000000
      Vertex   -00212.077347,-00512.000000,+00128.000000
      Vertex   -00212.077347,-00512.000000,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   -00212.077347,-00512.000000,-00128.000000
      Normal   -00000.707107,-00000.707107,-00000.000000
      TextureU -00000.707107,+00000.707107,+00000.000000
      TextureV +00000.000000,+00000.000000,-00001.000000
      Vertex   -00212.077347,-00512.000000,-00128.000000
      Vertex   -00212.077347,-00512.000000,+00128.000000
      Vertex   -00512.000061,-00212.077179,+00128.000000
      Vertex   -00512.000061,-00212.077179,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   -00512.000061,-00212.077179,-00128.000000
      Normal   -00001.000000,+00000.000000,+00000.000000
      TextureU +00000.000000,+00001.000000,+00000.000000
      TextureV -00000.000000,+00000.000000,-00001.000000
      Vertex   -00512.000061,-00212.077179,-00128.000000
      Vertex   -00512.000061,-00212.077179,+00128.000000
      Vertex   -00511.999969,+00212.077438,+00128.000000
      Vertex   -00511.999969,+00212.077438,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   -00511.999969,+00212.077438,-00128.000000
      Normal   -00000.707107,+00000.707107,+00000.000000
      TextureU +00000.707107,+00000.707107,+00000.000000
      TextureV -00000.000000,+00000.000000,-00001.000000
      Vertex   -00511.999969,+00212.077438,-00128.000000
      Vertex   -00511.999969,+00212.077438,+00128.000000
      Vertex   -00212.077347,+00512.000000,+00128.000000
      Vertex   -00212.077347,+00512.000000,-00128.000000
   End Polygon
   Begin Polygon Item=Wall
      Origin   -00212.077347,+00512.000000,-00128.000000
      Normal   +00000.000000,+00001.000000,+00000.000000
      TextureU +00001.000000,-00000.000000,+00000.000000
      TextureV +00000.000000,+00000.000000,-00001.000000
      Vertex   -00212.077347,+00512.000000,-00128.000000
      Vertex   -00212.077347,+00512.000000,+00128.000000
      Vertex   +00212.077362,+00512.000000,+00128.000000
      Vertex   +00212.077362,+00512.000000,-00128.000000
   End Polygon
   Begin Polygon Item=Cap
      Origin   -00212.077347,+00512.000000,+00128.000000
      Normal   +00000.000000,+00000.000000,+00001.000000
      TextureU +00000.707107,-00000.707107,+00000.000000
      TextureV +00000.707107,+00000.707107,-00000.000000
      Vertex   -00212.077347,+00512.000000,+00128.000000
      Vertex   -00511.999969,+00212.077438,+00128.000000
      Vertex   -00512.000061,-00212.077179,+00128.000000
      Vertex   -00212.077347,-00512.000000,+00128.000000
      Vertex   +00212.077255,-00512.000061,+00128.000000
      Vertex   +00512.000000,-00212.077393,+00128.000000
      Vertex   +00512.000000,+00212.077347,+00128.000000
      Vertex   +00212.077362,+00512.000000,+00128.000000
   End Polygon
   Begin Polygon Item=Cap
      Origin   +00212.077362,+00512.000000,-00128.000000
      Normal   +00000.000000,+00000.000000,-00001.000000
      TextureU -00000.707107,-00000.707107,-00000.000000
      TextureV -00000.707107,+00000.707107,+00000.000000
      Vertex   +00212.077362,+00512.000000,-00128.000000
      Vertex   +00512.000000,+00212.077347,-00128.000000
      Vertex   +00512.000000,-00212.077393,-00128.000000
      Vertex   +00212.077255,-00512.000061,-00128.000000
      Vertex   -00212.077347,-00512.000000,-00128.000000
      Vertex   -00512.000061,-00212.077179,-00128.000000
      Vertex   -00511.999969,+00212.077438,-00128.000000
      Vertex   -00212.077347,+00512.000000,-00128.000000
   End Polygon
End PolyList

Adding the vertices to a Geometry is no problem as I can use new THREE.Vector3(X, Y, Z) for each of the vertices for each polygon, but the problem arises when it comes to adding the faces. All the guides I've come across say to use Face3, but this obviously isn't suitable as the faces in this shape mostly consist of four points, and eight for the top/bottom.

One of the comments on this post suggests using ShapeGeometry but again this isn't suitable as only takes X/Y coordinates.

I feel like I'm missing something obvious here - ideally I would like to do something like:

new THREE.Face(0, 1, 2, 3) // side face 1
new THREE.Face(4, 5, 6, 7) // side face 2
// etc.
new THREE.Face(20, 21, 22, 23, 24, 25, 26, 27) // top face

Is this possible?

Upvotes: 0

Views: 135

Answers (1)

M -
M -

Reputation: 28482

No, it's not possible to use more than 3 vertices for a Face3. WebGL only renders triangles, and what you're trying to do is known as an "n-gon", which is not possible. You could, however, use your existing vertices to make the triangles to create the cap.

Here are two approaches. In the second one, you could create a center vertex by averaging the position of all radial vertices, and then connect them in a fan pattern:

enter image description here

Caveat: manually building each vertex like this will look fine with wireframes, but you might need to calculate normals if you want to use lights and uvs if you want to apply textures.

Upvotes: 1

Related Questions