how to draw polygon in three js using vertices?

Question

I have vertices(x,y,z) of a polygon as input. How can I render a polygon having these vertices in three.js? THREE.Geometry() is removed from three js. how to draw plane polygon with bufferGeometry or any other method ? now when i draw polygon with vertices it drawing incomplete mesh (polygon). following code is used to draw polygon.

const verticesGeometry = new THREE.BufferGeometry().setFromPoints(measurement.coordinates.map((coord) => new THREE.Vector3(coord.x, coord.y, coord.elevation)))
const polygon  = new THREE.Mesh(verticesGeometry , new THREE.MeshBasicMaterial({ color: measurement.color, side: THREE.DoubleSide}))
scene.add(polygon)

screenshots attached of issue, which is i am facing right now, (3 points polygon working perfectly, more than it, rendering incomplete.) thanks in advance.

i also tried THREE.ShapeGeometry() but polygon are rendering to the bottom because THREE.shape() is accepting only VECTOR2 points.i am passing vector3 but it neglecting 3rd (z) point.

 let polyShape = new THREE.Shape(measurement.coordinates.map((coord) => 
 new THREE.Vector3(coord.x, coord.y, coord.elevation)))
const geometry = new THREE.ShapeGeometry( polyShape )
let polygon = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: measurement.color, side: THREE.DoubleSide }))

see the below image for reference.

After you uploaded your second picture, I can see that your points have quite heavy height differences. Are you sure you want 2D polygons and not general triangulated mesh surfaces? — Berthur, Nov 08 '22 at 12:50
I am going to have multiple points of polygon with different heights, as shown in the image. I want to fill polygon with mesh, which I have already drawn if you will refer to the 2nd picture. — Aakash Govardhane, Nov 08 '22 at 12:56
So you have successfully drawn polygons, but they render too far down. Then move them up? Or do you mean that you want the polygons to follow the height of the terrain? — Berthur, Nov 08 '22 at 12:59
Yes exactly !! that is what I want, I want the points of polygon to follow height of terrain. Also I already have height for particular points. — Aakash Govardhane, Nov 08 '22 at 13:02
Right, that changes the question a bit because they aren't, strictly speaking, polygons as polygons are flat. In that case, do you want only the vertices to follow the terrain, or do you want all the points inside the polygon to also follow the terrain? — Berthur, Nov 08 '22 at 13:06
i really appreciate your tip, but as you I have used shape geometry, which is drawing complete polygon mesh, but the polygon vertices height is same, which is 0. In your tip you referred to buffer geometry ,can you please define in detail ? — Aakash Govardhane, Nov 08 '22 at 13:42
Yes, ShapeGeometry extends BufferGeometry (so it is a BufferGeometry already). So you should be able to just call `shapeGeometry.getAttribute(...)`. — Berthur, Nov 08 '22 at 13:52
Thank you so much @buthur, ShapeGeometry is working now for me, as you said, i updated polygon vertices to vector3 points, after drawing 2d polygon in shape geometry. i am posting code reference in the answer. — Aakash Govardhane, Nov 09 '22 at 11:05
Does this answer your question? [Rendering a polygon with input vertices in three.js](https://stackoverflow.com/questions/50171936/rendering-a-polygon-with-input-vertices-in-three-js) — Developer66, Dec 25 '22 at 16:51

Berthur · Answer 1 · 2022-11-09T11:43:29.063

1

You're just giving your points to a Mesh. They are interpreted as triples, each of which represent a triangle. If you want to render a filled polygon, it must be triangulated.

Easier though, is probably to use ShapeGeometry, see the doc in the link. This should do exactly what you need, if you can take the time to learn its interface.

If you want to make the vertices follow the height of your terrain, you can then edit the height coordinates of all vertices in the shape geometry (see how to update a buffer geometry; notice that ShapeGeometry extends BufferGeometry) back with its original Z or whatever your up direction is. The mesh topology will follow because it's already triangulated, and since you don't seem to have massive height variation, it should work nicely.

If you want to triangulate yourself instead of using ShapeGeometry, Three.js also provides a helper for this here.

edited Nov 09 '22 at 11:43

answered Nov 08 '22 at 11:12

Berthur

4,300
2
14
28

i tried shape geometry, but it takes only vector2 points, that's why polygon drawing at the bottom. see the 2nd image attached to the Question. – Aakash Govardhane Nov 08 '22 at 12:39
@AakashGovardhane Well polygons are in 2 dimensions. If your points are at different heights, you will need to project them into the same plane, if you want your polygons to be flat. Then, you will have the Vector2 that ShapeGeometry requires. – Berthur Nov 08 '22 at 12:47
1

please see 2nd image again.it is updated just now. – Aakash Govardhane Nov 08 '22 at 12:49

Aakash Govardhane · Accepted Answer · 2023-01-13T06:06:00.847

As per the @berthur answer I tried following code and it worked. Thanks to https://stackoverflow.com/users/10559142/berthur

let coordinates = [
 {
   x : 1,
   y : 1,
   elevation : 10
 },
 {
   x : 2,
   y : 1,
   elevation : 10
 },
 {
   x : 2,
   y : 2,
   elevation : 10
 },
 {
   x : 1,
   y : 2,
   elevation : 10
 }
]
let polyShape = new THREE.Shape(coordinates.map((coord) => new THREE.Vector2(coord.x, coord.y)))
const polyGeometry = new THREE.ShapeGeometry(polyShape);
polyGeometry.setAttribute("position", new THREE.Float32BufferAttribute(coordinates.map(coord => [coord.x, coord.y, coord.elevation]).flat(), 3))
let polygon = new THREE.Mesh(polyGeometry, new THREE.MeshBasicMaterial({ color: "ColorYouWant, side: THREE.DoubleSide}))
scene.add(polygon);

how to draw polygon in three js using vertices?

2 Answers2