Skip to main content

Overview

OpenGeometry is the underlying geometry kernel used by OpenPlans. It provides WebAssembly-powered geometric operations and core type definitions. The kernel is initialized through the setupOpenGeometry() method on the OpenPlans instance.

Core Types

Vector3

Represents a 3D point or vector in space.
import { Vector3 } from '@opengeometry/openplans';

const point = new Vector3(x, y, z);
x
number
required
X coordinate
y
number
required
Y coordinate
z
number
required
Z coordinate
Example:
const center = new Vector3(0, 1, 0);
const offset = new Vector3(5, 0, 3);

Interface Definitions

ILineOptions

Configuration options for creating a line.
interface ILineOptions {
  ogid?: string;
  start: Vector3;
  end: Vector3;
  color: number;
}
ogid
string
Optional unique identifier
start
Vector3
required
Starting point of the line
end
Vector3
required
Ending point of the line
color
number
required
Hexadecimal color value (e.g., 0x000000 for black)

IArcOptions

Configuration options for creating an arc.
interface IArcOptions {
  ogid?: string;
  center: Vector3;
  radius: number;
  startAngle: number;
  endAngle: number;
  segments: number;
  color: number;
}
ogid
string
Optional unique identifier
center
Vector3
required
Center point of the arc
radius
number
required
Radius of the arc
startAngle
number
required
Starting angle in radians
endAngle
number
required
Ending angle in radians
segments
number
required
Number of segments for curve smoothness (e.g., 16, 32)
color
number
required
Hexadecimal color value

IRectangleOptions

Configuration options for creating a rectangle.
interface IRectangleOptions {
  ogid?: string;
  center: Vector3;
  width: number;
  breadth: number;
  color: number;
}
ogid
string
Optional unique identifier
center
Vector3
required
Center point of the rectangle
width
number
required
Width of the rectangle
breadth
number
required
Breadth (height) of the rectangle
color
number
required
Hexadecimal color value

IPolylineOptions

Configuration options for creating a polyline.
interface IPolylineOptions {
  ogid?: string;
  points: Vector3[];
  color: number;
}
ogid
string
Optional unique identifier
points
Vector3[]
required
Array of Vector3 points defining the polyline path
color
number
required
Hexadecimal color value

ICuboidOptions

Configuration options for creating a cuboid (3D box).
interface ICuboidOptions {
  ogid?: string;
  center: Vector3;
  width: number;
  height: number;
  depth: number;
  color: number;
}
ogid
string
Optional unique identifier
center
Vector3
required
Center point of the cuboid
width
number
required
Width dimension (X-axis)
height
number
required
Height dimension (Y-axis)
depth
number
required
Depth dimension (Z-axis)
color
number
required
Hexadecimal color value

ICylinderOptions

Configuration options for creating a cylinder.
interface ICylinderOptions {
  ogid?: string;
  center: Vector3;
  radius: number;
  height: number;
  color: number;
}
ogid
string
Optional unique identifier
center
Vector3
required
Center point of the cylinder
radius
number
required
Radius of the cylinder
height
number
required
Height of the cylinder
color
number
required
Hexadecimal color value

Kernel Classes

The OpenGeometry kernel provides low-level geometry classes that are extended by OpenPlans primitives and shapes:

Line

Base class for line geometry.
import { Line, Vector3 } from '@opengeometry/openplans';

const line = new Line({
  start: new Vector3(0, 0, 0),
  end: new Vector3(5, 0, 0),
  color: 0x000000
});

Arc

Base class for arc geometry.
import { Arc, Vector3 } from '@opengeometry/openplans';

const arc = new Arc({
  center: new Vector3(0, 0, 0),
  radius: 2,
  startAngle: 0,
  endAngle: Math.PI,
  segments: 32,
  color: 0x000000
});

Rectangle

Base class for rectangle geometry.
import { Rectangle, Vector3 } from '@opengeometry/openplans';

const rect = new Rectangle({
  center: new Vector3(0, 0, 0),
  width: 4,
  breadth: 2,
  color: 0x0000ff
});

Polyline

Base class for polyline geometry.
import { Polyline, Vector3 } from '@opengeometry/openplans';

const polyline = new Polyline({
  points: [
    new Vector3(0, 0, 0),
    new Vector3(1, 0, 0),
    new Vector3(1, 0, 1)
  ],
  color: 0x0000ff
});

Polygon

Base class for polygon geometry.
import { Polygon, Vector3 } from '@opengeometry/openplans';

const polygon = new Polygon({
  vertices: [
    new Vector3(0, 0, 0),
    new Vector3(1, 0, 0),
    new Vector3(1, 0, 1),
    new Vector3(0, 0, 1)
  ],
  color: 0x00ff00
});

Cuboid

Base class for 3D box geometry.
import { Cuboid, Vector3 } from '@opengeometry/openplans';

const cuboid = new Cuboid({
  center: new Vector3(0, 1, 0),
  width: 2,
  height: 3,
  depth: 1,
  color: 0x8B4513
});

Cylinder

Base class for cylinder geometry.
import { Cylinder, Vector3 } from '@opengeometry/openplans';

const cylinder = new Cylinder({
  center: new Vector3(0, 1.5, 0),
  radius: 0.5,
  height: 3,
  color: 0xCCCCCC
});

Opening

Base class for architectural openings (doors, windows).
import { Opening, Vector3 } from '@opengeometry/openplans';

// Opening is typically extended by BaseDoor, BaseSingleWindow, etc.
const opening = new Opening({
  center: new Vector3(0, 1, 0),
  width: 1,
  height: 2.1,
  depth: 0.2,
  color: 0x8B4513
});

Initialization

OpenGeometry must be initialized before using geometry operations:
import { OpenPlans } from '@opengeometry/openplans';

const container = document.getElementById('viewport');
const op = new OpenPlans(container);

// Initialize the geometry kernel
await op.setupOpenGeometry();

// Now you can use geometry methods
const line = op.line({
  startPoint: [0, 0, 0],
  endPoint: [5, 0, 0],
  color: 0x000000
});

Custom WASM URL

You can specify a custom WebAssembly module URL:
await op.setupOpenGeometry('/custom/path/to/opengeometry.wasm');

Type Exports

All geometry types and interfaces can be imported from the main package:
import {
  // Core Types
  Vector3,
  
  // Interface Definitions
  ILineOptions,
  IArcOptions,
  IRectangleOptions,
  IPolylineOptions,
  ICuboidOptions,
  ICylinderOptions,
  
  // Kernel Classes
  Line,
  Arc,
  Rectangle,
  Polyline,
  Polygon,
  Cuboid,
  Cylinder,
  Opening,
  
  // Main Class
  OpenPlans
} from '@opengeometry/openplans';

Working with Coordinates

Converting Array to Vector3

When working with the OpenPlans API, you can use simple arrays for coordinates, which are internally converted to Vector3:
// Using arrays (OpenPlans API)
const line = op.line({
  startPoint: [0, 0, 0],    // Array format
  endPoint: [5, 0, 0],      // Array format
  color: 0x000000
});

// Using Vector3 directly (Kernel API)
import { Line, Vector3 } from '@opengeometry/openplans';

const kernelLine = new Line({
  start: new Vector3(0, 0, 0),  // Vector3 format
  end: new Vector3(5, 0, 0),    // Vector3 format
  color: 0x000000
});

Vector3 Operations

Vector3 supports common vector operations:
import { Vector3 } from '@opengeometry/openplans';

const v1 = new Vector3(1, 2, 3);
const v2 = new Vector3(4, 5, 6);

// Access components
console.log(v1.x, v1.y, v1.z);  // 1, 2, 3

// Set components
v1.set(10, 20, 30);

// Copy from another vector
v1.copy(v2);

// Clone a vector
const v3 = v1.clone();

Color Values

All color parameters accept hexadecimal color values:
// Common colors
const black = 0x000000;
const white = 0xffffff;
const red = 0xff0000;
const green = 0x00ff00;
const blue = 0x0000ff;

// Using in geometry
const line = op.line({
  startPoint: [0, 0, 0],
  endPoint: [5, 0, 0],
  color: 0x000000  // Black line
});

const cuboid = op.cuboid({
  center: new Vector3(0, 1, 0),
  width: 2,
  height: 3,
  depth: 1,
  color: 0x8B4513  // Wood brown
});

Example: Creating Complex Geometry

import { OpenPlans, Vector3 } from '@opengeometry/openplans';

const container = document.getElementById('viewport');
const op = new OpenPlans(container);

// Initialize kernel
await op.setupOpenGeometry();

// Create a complex polyline path
const path = op.polyline({
  points: [
    [0, 0, 0],
    [5, 0, 0],
    [5, 0, 5],
    [7, 0, 5],
    [7, 0, 8],
    [0, 0, 8],
    [0, 0, 0]
  ],
  color: 0x000000
});

// Add an arc at a corner
const cornerArc = op.arc({
  center: [5, 0, 5],
  radius: 0.5,
  startAngle: 0,
  endAngle: Math.PI / 2,
  segments: 16,
  color: 0xff0000
});

// Create a 3D element
const column = op.cylinder({
  center: new Vector3(2.5, 1.5, 2.5),
  radius: 0.3,
  height: 3,
  color: 0xCCCCCC
});
Last modified on March 7, 2026