Overview The OpenPlans class is the core of the OpenPlans library. It provides a complete rendering environment with camera controls, scene management, and methods for creating architectural elements like lines, arcs, doors, windows, and more.
Constructor OpenPlans() Creates a new OpenPlans instance in the specified HTML container.
The HTML element where the 3D scene will be rendered
const container = document . getElementById ( 'viewport' ); const op = new OpenPlans ( container );
Initialization setupOpenGeometry() Initializes the OpenGeometry kernel and glyph rendering system. Must be called before using geometry methods.
Optional URL to the WebAssembly module
Returns a promise that resolves when initialization is complete
await op . setupOpenGeometry (); // or with custom WASM URL await op . setupOpenGeometry ( '/path/to/opengeometry.wasm' );
2D Primitives line() Creates a straight line primitive.
Configuration object for the line Optional unique identifier
Starting point as [x, y, z]
Ending point as [x, y, z]
Hexadecimal color value (e.g., 0x000000)
const line = op . line ({ startPoint: [ 0 , 0 , 0 ], endPoint: [ 5 , 0 , 0 ], color: 0x000000 });
arc() Creates an arc primitive.
Configuration object for the arc Optional unique identifier
Center point as [x, y, z]
Starting angle in radians
Number of segments for smoothness
const arc = op . arc ({ center: [ 0 , 0 , 0 ], radius: 2 , startAngle: 0 , endAngle: Math . PI , segments: 32 , color: 0x000000 });
rectangle() Creates a rectangular primitive.
Configuration object for the rectangle Optional unique identifier
Center point as [x, y, z]
Breadth (height) of the rectangle
The created rectangle object
const rect = op . rectangle ({ center: [ 0 , 0 , 0 ], width: 4 , breadth: 2 , color: 0x0000ff });
polyline() Creates a polyline (multi-segment line) primitive.
Configuration object for the polyline Optional unique identifier
Array of points, each as [x, y, z]
The created polyline object
const polyline = op . polyline ({ points: [ [ 0 , 0 , 0 ], [ 1 , 0 , 0 ], [ 1 , 0 , 1 ], [ 2 , 0 , 1 ] ], color: 0x0000ff });
3D Shapes cuboid() Creates a 3D cuboid (box) shape.
Configuration object for the cuboid Optional unique identifier
Center point of the cuboid
The created cuboid object
import { Vector3 } from '@opengeometry/openplans' ; const cuboid = op . cuboid ({ center: new Vector3 ( 0 , 1 , 0 ), width: 2 , height: 3 , depth: 1 , color: 0x8B4513 });
cylinder() Creates a 3D cylinder shape.
Configuration object for the cylinder Optional unique identifier
Center point of the cylinder
The created cylinder object
import { Vector3 } from '@opengeometry/openplans' ; const cylinder = op . cylinder ({ center: new Vector3 ( 0 , 1.5 , 0 ), radius: 0.5 , height: 3 , color: 0xCCCCCC });
Architectural Elements baseDoor() Creates a door element with frame and panel.
Configuration object for the door doorPosition
[number, number, number]
required
Position as [x, y, z]
Width of the door opening
Height of the door panel (default: 2.1)
Thickness of the door panel (default: 0.1)
Thickness of the door frame (default: 0.2)
Color of the door panel (default: 0x8B4513)
Color of the door frame (default: 0x000000)
Opening rotation (1-2 range, default: 1.5)
Hinge quadrant (1-4, default: 1)
const door = op . baseDoor ({ labelName: 'Main Entrance' , doorPosition: [ 5 , 0 , 0 ], dimensions: { start: { x: - 0.5 , y: 0 , z: 0 }, end: { x: 0.5 , y: 0 , z: 0 }, length: 1 }, doorHeight: 2.1 , doorThickness: 0.1 , frameThickness: 0.2 , doorColor: 0x8B4513 , frameColor: 0x000000 , doorQuadrant: 1 });
baseSingleWindow() Creates a single window element with frame and panel.
Configuration object for the window Name/label for the window
windowPosition
[number, number, number]
required
Position as [x, y, z]
Width of the window opening
Height of the window (default: 1.2)
Thickness of the window panel (default: 0.05)
Thickness of the window frame (default: 0.15)
Color of the window panel (default: 0x87CEEB)
Color of the window frame (default: 0x000000)
Height from floor to window bottom (default: 0.9)
The created window object
const window = op . baseSingleWindow ({ labelName: 'Living Room Window' , windowPosition: [ 3 , 0 , 0 ], dimensions: { start: { x: - 0.6 , y: 0 , z: 0 }, end: { x: 0.6 , y: 0 , z: 0 }, length: 1.2 }, windowHeight: 1.2 , sillHeight: 0.9 , windowColor: 0x87CEEB , frameColor: 0x000000 });
baseDoubleWindow() Creates a double window element.
Configuration object for the double window (similar structure to single window)
The created double window object
const doubleWindow = op . baseDoubleWindow ({ labelName: 'Large Window' , windowPosition: [ 0 , 0 , 5 ], dimensions: { start: { x: - 1.0 , y: 0 , z: 0 }, end: { x: 1.0 , y: 0 , z: 0 }, length: 2.0 }, windowHeight: 1.5 , sillHeight: 0.9 });
baseSlab() Creates a floor or ceiling slab element.
Configuration object for the slab slabPosition
[number, number, number]
required
Position as [x, y, z]
Thickness of the slab (default: 0.2)
Color of the slab (default: 0xCCCCCC)
Material type (default: ‘concrete’)
const slab = op . baseSlab ({ labelName: 'Ground Floor' , slabPosition: [ 0 , 0 , 0 ], dimensions: { start: { x: - 5 , y: 0 , z: - 5 }, end: { x: 5 , y: 0 , z: 5 }, width: 10 , length: 10 }, slabThickness: 0.2 , slabColor: 0xCCCCCC , slabMaterial: 'concrete' });
baseStair() Creates a staircase element.
Configuration object for the stair stairPosition
[number, number, number]
required
Position as [x, y, z]
Height of each step (default: 0.17)
Depth of each step (default: 0.28)
Color of the stairs (default: 0x8B7355)
Material type (default: ‘wood’)
const stair = op . baseStair ({ labelName: 'Main Stairs' , stairPosition: [ 0 , 0 , 0 ], dimensions: { width: 1.2 , totalHeight: 3.0 , totalLength: 4.5 }, riserHeight: 0.17 , treadDepth: 0.28 , stairColor: 0x8B7355 , stairMaterial: 'wood' });
Drawing Elements board() Creates a drawing board for organizing elements.
Configuration object for the board dimensions.start
{x: number, y: number, z: number}
required
Starting corner position
Background color (default: 0xffffff)
const board = op . board ({ labelName: 'Floor Plan' , dimensions: { start: { x: 0 , y: 0 , z: 0 }, end: { x: 20 , y: - 20 , z: 0 }, width: 20 , height: 20 }, color: 0xffffff });
paperFrame() Creates a paper frame for technical drawings with standard paper sizes.
Configuration object for the paper frame format
'A4' | 'A3' | 'A2' | 'Custom'
Paper size format (default: ‘A4’)
Paper orientation (default: ‘portrait’)
Margin size in units (default: 10)
Background color (default: 0xffffff)
Border color (default: 0x000000)
Border width (default: 1)
The created paper frame object
const paper = op . paperFrame ({ labelName: 'Sheet 1' , format: 'A3' , orientation: 'landscape' , margin: 10 , backgroundColor: 0xffffff , borderColor: 0x000000 });
Text and Glyphs glyph() Creates a text glyph (label) in the scene.
Text color as hexadecimal
Whether the text size remains constant when zooming (default: true)
The created glyph object with unique ID
const label = op . glyph ( 'Room A' , 0.5 , 0x000000 , true ); label . position . set ( 5 , 0 , 5 );
getGlyph() Retrieves a glyph by its ID.
The unique ID of the glyph
const glyph = op . getGlyph ( 'glyph-id' );
updateGlyphText() Updates the text content of a glyph.
The unique ID of the glyph
op . updateGlyphText ( 'glyph-id' , 'Updated Text' );
rotateGlyph() Rotates a glyph by a specified angle.
The unique ID of the glyph
Rotation angle in radians
op . rotateGlyph ( 'glyph-id' , Math . PI / 4 );
selectGlyph() Selects a glyph for editing.
The unique ID of the glyph
op . selectGlyph ( 'glyph-id' );
clearGlyphSelection() Clears the current glyph selection.
op . clearGlyphSelection ();
View Management create2DView() Creates a 2D orthographic view in a separate container.
The HTML container for the 2D view
Height at which to section the view (default: 0)
object
{camera: THREE.Camera, renderer: THREE.WebGLRenderer}
Object containing the camera and renderer for the 2D view
const view2DContainer = document . getElementById ( 'plan-view' ); const { camera , renderer } = op . create2DView ( view2DContainer , 1.5 );
update() Updates the label renderer. Should be called in your render loop.
function animate () { requestAnimationFrame ( animate ); op . update ( scene , camera ); }
Utility Methods disposeElement() Removes and disposes an element by its ID.
The unique ID of the element to dispose
op . disposeElement ( 'element-id' );
getEntitiesByType() Retrieves all entities of a specific type.
The type of entities to retrieve (e.g., ‘LinePrimitive’, ‘BaseDoor’)
Array of entities matching the type
const allDoors = op . getEntitiesByType ( 'DOOR' ); const allLines = op . getEntitiesByType ( 'LinePrimitive' );
fit() Fits the camera to show all elements of a specific type.
The type of elements to fit to
Properties showGrid Setter to show or hide the grid.
op . showGrid = true ; // Show grid op . showGrid = false ; // Hide grid
glyphNodes Getter that returns all glyph nodes in the scene.
Map of glyph IDs to glyph nodes
const allGlyphs = op . glyphNodes ; for ( const [ id , glyph ] of allGlyphs ) { console . log ( `Glyph ${ id } :` , glyph ); }
Static Methods OpenPlans.toScreenPosition() Converts a 3D world position to 2D screen coordinates.
The 2D screen coordinates
import * as THREE from 'three' ; const worldPos = new THREE . Vector3 ( 5 , 0 , 5 ); const screenPos = OpenPlans . toScreenPosition ( worldPos ); console . log ( `Screen position: ${ screenPos . x } , ${ screenPos . y } ` );
Example: Complete Floor Plan import { OpenPlans , Vector3 } from '@opengeometry/openplans' ; const container = document . getElementById ( 'viewport' ); const op = new OpenPlans ( container ); // Initialize OpenGeometry await op . setupOpenGeometry (); // Create a floor slab const floor = op . baseSlab ({ labelName: 'Ground Floor' , slabPosition: [ 0 , 0 , 0 ], dimensions: { start: { x: - 5 , y: 0 , z: - 5 }, end: { x: 5 , y: 0 , z: 5 }, width: 10 , length: 10 }, slabThickness: 0.2 , slabColor: 0xEEEEEE }); // Create walls using polylines const wall1 = op . polyline ({ points: [ [ - 5 , 0 , - 5 ], [ 5 , 0 , - 5 ], [ 5 , 0 , 5 ], [ - 5 , 0 , 5 ], [ - 5 , 0 , - 5 ] ], color: 0x000000 }); // Add a door const door = op . baseDoor ({ labelName: 'Main Entrance' , doorPosition: [ 0 , 0 , - 5 ], dimensions: { start: { x: - 0.5 , y: 0 , z: 0 }, end: { x: 0.5 , y: 0 , z: 0 }, length: 1 }, doorHeight: 2.1 , doorColor: 0x8B4513 }); // Add a window const window = op . baseSingleWindow ({ labelName: 'Living Room Window' , windowPosition: [ 5 , 0 , 0 ], dimensions: { start: { x: - 0.6 , y: 0 , z: 0 }, end: { x: 0.6 , y: 0 , z: 0 }, length: 1.2 }, windowHeight: 1.2 , sillHeight: 0.9 }); // Add labels const roomLabel = op . glyph ( 'Living Room' , 0.3 , 0x333333 ); roomLabel . position . set ( 0 , 0 , 0 ); // Show grid op . showGrid = true ; // Fit camera to show all doors op . fit ( 'DOOR' );
