Rendering a polygon with input vertices in three.js

Question

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.

score 4 · Accepted Answer · edited Jan 27 '23 at 16:56

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

can any one help, how to draw polygon using THREE.BufferGeometry? — Aakash Govardhane, Nov 08 '22 at 07:34

score 1 · Answer 2 · edited Jan 20 '23 at 07:58

1

THREE.Geometry is removed, try the following method

    let coordinates = [
     {
       x : 1,
       y : 1,
       z: 10
     },
     {
       x : 2,
       y : 1,
       z: 10
     },
     {
       x : 2,
       y : 2,
       z: 10
     },
     {
       x : 1,
       y : 2,
       z: 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.z]).flat(), 3))
    let polygon = new THREE.Mesh(polyGeometry, new THREE.MeshBasicMaterial({ color: "colorYOuWant", side: THREE.DoubleSide}))
    scene.add(polygon);

edited Jan 20 '23 at 07:58

AsukaMinato

1,017
12
21

answered Nov 09 '22 at 11:20

Aakash Govardhane

303
1
7

what is 'measurement' or how to define it? – Developer66 Dec 25 '22 at 16:50
Why does the polyGeometry need the 2D Shape at initialization when you seem to overwrite the points anyway with `setAttribute("position",..`? Or is this setAttribute not overwriting the points' positions? – andymel Feb 10 '23 at 19:02

score 0 · Answer 3 · answered Feb 24 '23 at 14:22

I also need this and while the answer of @Aakash helped me to start, setting the points in the ShapeGeometry was a problem

Just

Build a Shape object with the 2D coordinates (Vector2)
Build a ShapeGeometry from that Shape
Build the Mesh from that Geometry and the Material you want
rotate and scale the Mesh the way you want

Perfect example for it is https://threejs.org/examples/webgl_geometry_shapes

Especially have a look at the californiaShape object and the addShape function

const californiaPts = [];

californiaPts.push( new THREE.Vector2( 610, 320 ) );
californiaPts.push( new THREE.Vector2( 450, 300 ) );
californiaPts.push( new THREE.Vector2( 392, 392 ) );
...
            
const californiaShape = new THREE.Shape( californiaPts );

addShape( californiaShape, ... );

function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {

    let geometry = new THREE.ShapeGeometry( shape );

    mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
    mesh.position.set( x, y, z - 125 );
    mesh.rotation.set( rx, ry, rz );
    mesh.scale.set( s, s, s );
    ...
}

Rendering a polygon with input vertices in three.js

3 Answers3

Linked