Polygon

Overview

The Polygon class creates 2D polygonal shapes on the XY plane. It supports complex polygons with holes, automatic triangulation, and outline rendering. Polygons are defined by counter-clockwise (CCW) vertices, with holes specified in clockwise (CW) order.

Constructor

const polygon = new Polygon(options?: IPolygonOptions);

IPolygonOptions

ogid

string

Unique identifier for the polygon. Auto-generated if not provided.

vertices

Vector3[]

required

Array of vertices defining the polygon boundary. Must be in counter-clockwise order when viewed from above (positive Y-axis).

vertices: [
  new Vector3(0, 0, 0),
  new Vector3(10, 0, 0),
  new Vector3(10, 0, 10),
  new Vector3(0, 0, 10)
]

color

number

required

Hexadecimal color value for the polygon fill.

color: 0x00ff00  // Green

Methods

setConfig()

Updates the polygon configuration and regenerates geometry.

polygon.setConfig(options: IPolygonOptions): void

Example:

polygon.setConfig({
  vertices: [
    new Vector3(0, 0, 0),
    new Vector3(5, 0, 0),
    new Vector3(5, 0, 5),
    new Vector3(0, 0, 5)
  ],
  color: 0xff0000
});

addVertices()

Replaces all vertices with a new set and regenerates the polygon.

polygon.addVertices(vertices: Vector3[]): void

Example:

const newVertices = [
  new Vector3(0, 0, 0),
  new Vector3(10, 0, 0),
  new Vector3(5, 0, 10)
];
polygon.addVertices(newVertices);

addHole()

Adds a hole to the polygon. Hole vertices must be in clockwise order.

polygon.addHole(holeVertices: Vector3[]): void

Example:

const holeVertices = [
  new Vector3(2, 0, 2),
  new Vector3(2, 0, 4),
  new Vector3(4, 0, 4),
  new Vector3(4, 0, 2)
];
polygon.addHole(holeVertices);

getBrepData()

Returns the B-Rep (Boundary Representation) data as a JSON string.

polygon.getBrepData(): string | null

generateGeometry()

Regenerates the THREE.js geometry from the current polygon configuration. Automatically called after configuration changes.

polygon.generateGeometry(): void

dispose()

Cleans up geometry and material resources.

polygon.dispose(): void

Properties

ogid

string

Unique identifier for the polygon instance.

options

IPolygonOptions

Current polygon configuration including vertices and color.

transformationMatrix

THREE.Matrix4

Transformation matrix for the polygon geometry.

color

number

Get or set the polygon fill color.

polygon.color = 0xff0000;  // Set to red
const currentColor = polygon.color;  // Get current color

outline

boolean

Enable or disable outline rendering.

polygon.outline = true;   // Show outline
polygon.outline = false;  // Hide outline

outlineColor

number

Get or set the outline color (default: 0x000000 - black).

polygon.outlineColor = 0x0000ff;  // Blue outline

Usage Examples

Basic Rectangle

import { Polygon, Vector3 } from 'opengeometry';

const rectangle = new Polygon({
  vertices: [
    new Vector3(0, 0, 0),
    new Vector3(10, 0, 0),
    new Vector3(10, 0, 8),
    new Vector3(0, 0, 8)
  ],
  color: 0x00ff00
});

// Enable outline
rectangle.outline = true;
rectangle.outlineColor = 0x000000;

Polygon with Hole

import { Polygon, Vector3 } from 'opengeometry';

// Create outer polygon
const polygon = new Polygon({
  vertices: [
    new Vector3(0, 0, 0),
    new Vector3(20, 0, 0),
    new Vector3(20, 0, 20),
    new Vector3(0, 0, 20)
  ],
  color: 0x3498db
});

// Add a rectangular hole in the center
polygon.addHole([
  new Vector3(8, 0, 8),   // Clockwise order
  new Vector3(8, 0, 12),
  new Vector3(12, 0, 12),
  new Vector3(12, 0, 8)
]);

Complex Shape

import { Polygon, Vector3 } from 'opengeometry';

// L-shaped polygon
const lShape = new Polygon({
  vertices: [
    new Vector3(0, 0, 0),
    new Vector3(10, 0, 0),
    new Vector3(10, 0, 5),
    new Vector3(5, 0, 5),
    new Vector3(5, 0, 15),
    new Vector3(0, 0, 15)
  ],
  color: 0xe74c3c
});

lShape.outline = true;

Implementation Details

Triangulation

The polygon is automatically triangulated using the triangulate_polygon_with_holes function from the Rust kernel. This ensures proper rendering of complex shapes with holes. Source: /workspace/source/main/opengeometry/src/shapes/polygon.ts:155

Geometry Generation

Geometry is stored as a THREE.BufferGeometry with double-sided material to ensure visibility from both sides:

const material = new THREE.MeshBasicMaterial({
  color: this.options.color,
  side: THREE.DoubleSide,
});

Source: /workspace/source/main/opengeometry/src/shapes/polygon.ts:176-182

Outline Rendering

Outlines are rendered as THREE.LineSegments, positioned as a child of the polygon mesh to maintain transformation hierarchy. Source: /workspace/source/main/opengeometry/src/shapes/polygon.ts:345-379

Best Practices

Vertex Order: Always define outer polygon vertices in counter-clockwise (CCW) order and hole vertices in clockwise (CW) order when viewed from above.

Minimum Vertices: Polygons require at least 3 vertices. The geometry generation will fail silently if fewer vertices are provided.

Performance: For polygons with many vertices or multiple holes, consider enabling outline rendering only when necessary, as it adds additional geometry.

Live Demo

Polygon Demo

Try the Polygon shape in the browser

Cuboid

Rectangular 3D boxes

Cylinder

Circular extrusions

Sweep

Extrude profiles along paths

2D Primitives

3D Shapes

Operations

Export (Experimental)

Overview

Constructor

IPolygonOptions

Methods

setConfig()

addVertices()

addHole()

getBrepData()

generateGeometry()

dispose()

Properties

Usage Examples

Basic Rectangle

Polygon with Hole

Complex Shape

Implementation Details

Triangulation

Geometry Generation

Outline Rendering

Best Practices

Live Demo

Polygon Demo

See Also

Cuboid

Cylinder

Sweep

​Overview

​Constructor

​IPolygonOptions

​Methods

​setConfig()

​addVertices()

​addHole()

​getBrepData()

​generateGeometry()

​dispose()

​Properties

​Usage Examples

​Basic Rectangle

​Polygon with Hole

​Complex Shape

​Implementation Details

​Triangulation

​Geometry Generation

​Outline Rendering

​Best Practices

​Live Demo

Polygon Demo

​See Also

Cuboid

Cylinder

Sweep

Overview

Constructor

IPolygonOptions

Methods

setConfig()

addVertices()

addHole()

getBrepData()

generateGeometry()

dispose()

Properties

Usage Examples

Basic Rectangle

Polygon with Hole

Complex Shape

Implementation Details

Triangulation

Geometry Generation

Outline Rendering

Best Practices

Live Demo

See Also