Skip to main content

​
Overview

Primitives are the fundamental 2D geometric building blocks in OpenPlans. They provide simple, low-level geometric entities that can be combined to create complex architectural drawings.
All primitives extend classes from the OpenGeometry kernel and implement the IPrimitive interface.

​
Available Primitives

​
Line Primitive

The most basic geometric entity, representing a straight line segment between two points. Source: src/primitives/line.ts:17 
const line = openPlans.line({
  startPoint: [0, 0, 0],
  endPoint: [5, 0, 0],
  color: 0x000000
});

// Modify the line dynamically
line.startPoint = [1, 0, 0];
line.endPoint = [6, 0, 0];
line.lineColor = 0xFF0000;

​
Properties

​
startPoint
Array<number>
required
The starting point of the line as [x, y, z] coordinates
​
endPoint
Array<number>
required
The ending point of the line as [x, y, z] coordinates
​
color
number
required
The color of the line in hexadecimal format (e.g., 0x000000 for black)
​
ogid
string
Unique identifier for the line primitive

​
Arc Primitive

A circular arc defined by a center point, radius, and angular range. Source: src/primitives/arc.ts:22 
const arc = openPlans.arc({
  center: [0, 0, 0],
  radius: 2,
  startAngle: 0,
  endAngle: Math.PI,
  segments: 32,
  color: 0x0000FF
});

// Modify arc properties
arc.arcRadius = 3;
arc.arcStartAngle = Math.PI / 4;
arc.arcEndAngle = Math.PI * 1.5;
arc.arcColor = 0x00FF00;

​
Properties

​
center
Array<number>
required
The center point of the arc as [x, y, z] coordinates
​
radius
number
required
The radius of the arc
​
startAngle
number
required
The starting angle in radians
​
endAngle
number
required
The ending angle in radians
​
segments
number
required
Number of segments to approximate the arc (higher = smoother)
​
color
number
required
The color of the arc in hexadecimal format

​
Rectangle Primitive

A rectangular shape defined by a center point and dimensions. Source: src/primitives/rectangle.ts:25 
const rectangle = openPlans.rectangle({
  center: [0, 0, 0],
  width: 4,
  breadth: 3,
  color: 0x0000FF
});

// Modify rectangle properties
rectangle.center = [2, 0, 2];
rectangle.width = 5;
rectangle.breadth = 4;
rectangle.rectangleColor = 0xFF00FF;

​
Properties

​
center
Array<number>
required
The center point of the rectangle as [x, y, z] coordinates
​
width
number
required
The width of the rectangle
​
breadth
number
required
The breadth (height) of the rectangle
​
color
number
required
The color of the rectangle in hexadecimal format

​
Polyline Primitive

A series of connected line segments forming a path through multiple points. Source: src/primitives/polyline.ts:21 
const polyline = openPlans.polyline({
  points: [
    [0, 0, 0],
    [2, 0, 0],
    [2, 0, 2],
    [4, 0, 2],
    [4, 0, 4]
  ],
  color: 0x0000FF
});

// Add more points dynamically
polyline.attachPoint([6, 0, 4]);
polyline.attachPoint([6, 0, 6]);

// Change color
polyline.lineColor = 0xFF0000;

​
Properties

​
points
Array<Array<number>>
required
Array of points defining the polyline path, each point as [x, y, z]
​
color
number
required
The color of the polyline in hexadecimal format

​
Methods

​
attachPoint
(point: Array<number>) => void
Adds a new point to the end of the polyline

​
Common Interface

All primitives implement the IPrimitive interface, which provides: 
interface IPrimitive {
  ogType: string;                          // Type identifier
  ogid: string;                            // Unique ID
  subNodes: Map<string, THREE.Object3D>;   // Child objects
  selected: boolean;                       // Selection state
  edit: boolean;                           // Edit mode state
  propertySet: object;                     // Configuration properties
  
  setOPConfig(config: any): void;         // Update configuration
  getOPConfig(): any;                      // Get configuration
  setOPGeometry(): void;                   // Update geometry
  setOPMaterial(): void;                   // Update material
}

​
Property Management

Primitives use a propertySet object to store their configuration: 
// Access the property set
const config = line.getOPConfig();
console.log(config);
// {
//   ogid: "...",
//   startPoint: [0, 0, 0],
//   endPoint: [1, 0, 0],
//   color: 0x000000
// }
While you can access propertySet directly, it’s recommended to use the provided getter and setter methods for property updates to ensure geometry is correctly regenerated.

​
Geometry Updates

When you modify primitive properties through setters, the geometry is automatically updated: Source: src/primitives/line.ts:87 
set startPoint(value: Array<number>) {
  this.propertySet.startPoint = value;
  this.setOPGeometry();  // Automatically regenerates geometry
}
The setOPGeometry() method handles the conversion from property values to Three.js geometry: Source: src/primitives/line.ts:87 
setOPGeometry(): void {
  this.setConfig({
    start: new Vector3(...this.propertySet.startPoint),
    end: new Vector3(...this.propertySet.endPoint),
    color: this.propertySet.color,
  });
}

​
Working with Primitives

​
Adding to Scene

Primitives are automatically added to the scene when created through the openPlans instance: Source: src/index.ts:237 
line(config?: ILineOptions) {
  const line = new LinePrimitive(config);
  this.openThree.scene.add(line);
  this.ogElements.push(line);
  return line;
}

​
Retrieving Primitives

// Get all primitives of a specific type
const allLines = openPlans.getEntitiesByType('LinePrimitive');
const allArcs = openPlans.getEntitiesByType('ArcPrimitive');

​
Disposing Primitives

// Remove a primitive from the scene
openPlans.disposeElement(line.ogid);

​
Best Practices

Always provide complete configuration objects to avoid default values:
// Good
const line = openPlans.line({
  startPoint: [0, 0, 0],
  endPoint: [5, 0, 0],
  color: 0x000000
});

// Avoid - relies on defaults
const line = openPlans.line();
Use property setters rather than direct propertySet manipulation:
// Good
line.startPoint = [1, 0, 0];

// Avoid - doesn't trigger geometry update
line.propertySet.startPoint = [1, 0, 0];
Always dispose of primitives you no longer need:
openPlans.disposeElement(primitive.ogid);

​
Examples

​
Creating a Room Outline

// Create a rectangular room using a polyline
const roomOutline = openPlans.polyline({
  points: [
    [0, 0, 0],      // Bottom-left corner
    [5, 0, 0],      // Bottom-right corner
    [5, 0, 4],      // Top-right corner
    [0, 0, 4],      // Top-left corner
    [0, 0, 0]       // Close the loop
  ],
  color: 0x000000
});

​
Creating a Curved Wall

// Create a curved wall segment using an arc
const curvedWall = openPlans.arc({
  center: [5, 0, 5],
  radius: 3,
  startAngle: 0,
  endAngle: Math.PI / 2,
  segments: 32,
  color: 0x000000
});

​
Creating Grid Lines

// Create a grid of lines
for (let i = 0; i <= 10; i++) {
  // Vertical lines
  openPlans.line({
    startPoint: [i, 0, 0],
    endPoint: [i, 0, 10],
    color: 0xCCCCCC
  });
  
  // Horizontal lines
  openPlans.line({
    startPoint: [0, 0, i],
    endPoint: [10, 0, i],
    color: 0xCCCCCC
  });
}
Last modified on March 7, 2026