Skip to main content
This example demonstrates how to create and configure doors and windows in OpenPlans. You’ll learn about door quadrants, window types, and how to position these elements correctly.

​
Complete example

Here’s a complete example creating a room with a door and two windows: 
import { OpenPlans } from '@opengeometry/openplans';

const container = document.getElementById('app');
const openPlans = new OpenPlans(container);
await openPlans.setupOpenGeometry();

// Create a door
const door = openPlans.baseDoor({
  labelName: 'Main Door',
  dimensions: {
    start: { x: -0.5, y: 0, z: 0 },
    end: { x: 0.5, y: 0, z: 0 },
    length: 1
  },
  doorPosition: [0, 0, -2],  // Position at bottom wall
  doorType: 'WOOD',
  doorHeight: 2.1,
  doorThickness: 0.05,
  frameThickness: 0.15,
  doorColor: 0x8B4513,      // Brown
  frameColor: 0x000000,     // Black
  doorRotation: 1.5,        // Half-open position
  doorQuadrant: 1,          // Opens into the room
  coordinates: []
});

// Create a single window
const window1 = openPlans.baseSingleWindow({
  labelName: 'Left Window',
  dimensions: {
    start: { x: -0.6, y: 0, z: 0 },
    end: { x: 0.6, y: 0, z: 0 },
    length: 1.2
  },
  windowPosition: [-1.5, 0, 2],  // Left side, back wall
  windowType: 'CASEMENT',
  windowHeight: 1.2,
  sillHeight: 0.9,
  windowThickness: 0.05,
  frameThickness: 0.1,
  windowColor: 0x87CEEB,    // Sky blue
  frameColor: 0xFFFFFF,     // White
  sillColor: 0xD3D3D3,      // Light gray
  windowRotation: 1.5,
  windowQuadrant: 1,
  coordinates: []
});

// Create a double window
const window2 = openPlans.baseDoubleWindow({
  labelName: 'Double Window',
  dimensions: {
    start: { x: -1, y: 0, z: 0 },
    end: { x: 1, y: 0, z: 0 },
    length: 2
  },
  windowPosition: [1.5, 0, 2],   // Right side, back wall
  windowType: 'CASEMENT',
  windowHeight: 1.2,
  sillHeight: 0.9,
  windowThickness: 0.05,
  frameThickness: 0.1,
  mullionWidth: 0.05,           // Center divider
  leftWindowRotation: 1.5,
  rightWindowRotation: 1.5,
  windowColor: 0x87CEEB,
  frameColor: 0xFFFFFF,
  sillColor: 0xD3D3D3,
  windowQuadrant: 1,
  coordinates: []
});

// Fit camera to view all elements
openPlans.fit('DOOR');

​
Understanding door quadrants

Doors in OpenPlans use a quadrant system to determine which direction they open:

Quadrant 1

Door opens to the right when viewed from the front

Quadrant 2

Door opens to the left when viewed from the front

Quadrant 3

Door opens to the left when viewed from the back

Quadrant 4

Door opens to the right when viewed from the back

​
Configuring door rotation

The doorRotation property controls how far the door is open: 
door.doorRotation = 2;    // Fully closed
door.doorRotation = 1.5;  // Half open (default)
door.doorRotation = 1;    // Fully open (90 degrees)
The rotation value ranges from 1 (fully open) to 2 (fully closed). The value represents a divisor for π, so 1.5 means π / 1.5 radians.

​
Creating interactive door controls

Based on the example from baseDoor.html, here’s how to add interactive controls: 
// Change door properties dynamically
function updateDoorLength(newLength) {
  door.doorLength = newLength;
}

function updateDoorHeight(newHeight) {
  door.doorHeight = newHeight;
}

function updateDoorQuadrant(quadrant) {
  door.doorQuadrant = quadrant;  // 1, 2, 3, or 4
}

function updateDoorRotation(rotation) {
  door.doorRotation = rotation;  // 1.0 to 2.0
}

// Get current configuration
const config = door.getOPConfig();
console.log('Door config:', config);

​
Window types

OpenPlans supports multiple window types: 
// Different window types
const casementWindow = openPlans.baseSingleWindow({
  windowType: 'CASEMENT',  // Traditional hinged window
  // ... other properties
});

const slidingWindow = openPlans.baseSingleWindow({
  windowType: 'SLIDING',   // Horizontal slider
  // ... other properties
});

const awningWindow = openPlans.baseSingleWindow({
  windowType: 'AWNING',    // Top-hinged, opens outward
  // ... other properties
});

const fixedWindow = openPlans.baseSingleWindow({
  windowType: 'FIXED',     // Non-opening window
  // ... other properties
});

​
Window configuration example

From the baseSingleWindow.html example: 
const singleWindow = openPlans.baseSingleWindow();

// Update window properties
singleWindow.windowLength = 1.5;              // Width of the window
singleWindow.windowThickness = 0.05;          // Glass thickness
singleWindow.propertySet.windowHeight = 1.2;  // Height of window
singleWindow.propertySet.sillHeight = 0.9;    // Height from floor to sill
singleWindow.setOPGeometry();                 // Apply changes

// Change window quadrant (opening direction)
singleWindow.windowQuadrant = 2;  // 1, 2, 3, or 4

// Adjust opening rotation
singleWindow.windowRotation = 1.5;  // Half-open

​
Double window configuration

Double windows have separate rotation controls for each panel: 
const doubleWindow = openPlans.baseDoubleWindow({
  labelName: 'French Windows',
  windowPosition: [0, 0, 0],
  windowHeight: 1.5,
  sillHeight: 0.8,
  dimensions: {
    start: { x: -1, y: 0, z: 0 },
    end: { x: 1, y: 0, z: 0 },
    length: 2
  },
  leftWindowRotation: 1.5,   // Left panel rotation
  rightWindowRotation: 1.5,  // Right panel rotation
  mullionWidth: 0.05,        // Center divider width
  windowQuadrant: 1,
  windowType: 'CASEMENT',
  windowColor: 0x87CEEB,
  frameColor: 0xFFFFFF,
  coordinates: []
});

​
Positioning elements on walls

When positioning doors and windows, consider your wall locations: 
// For a room with these wall coordinates:
const roomWalls = [
  [-3, 0, -2],  // Bottom-left
  [3, 0, -2],   // Bottom-right (south wall)
  [3, 0, 2],    // Top-right (east wall)
  [-3, 0, 2],   // Top-left (north wall)
  [-3, 0, -2]   // Back to start (west wall)
];

// Place door on south wall (bottom)
const southDoor = openPlans.baseDoor({
  doorPosition: [0, 0, -2],  // Center of south wall
  // ... other config
});

// Place window on east wall (right)
const eastWindow = openPlans.baseSingleWindow({
  windowPosition: [3, 0, 0],  // Center of east wall
  // ... other config
});
Make sure door and window positions align with your actual wall coordinates. Elements won’t automatically “snap” to walls.

​
Complete room example with multiple elements

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

const openPlans = new OpenPlans(document.getElementById('app'));
await openPlans.setupOpenGeometry();

// Create floor slab
const floor = openPlans.baseSlab({
  slabPosition: [0, 0, 0],
  slabThickness: 0.2,
  slabColor: 0xE8E8E8,
  coordinates: [
    [-3, 0, -2],
    [3, 0, -2],
    [3, 0, 2],
    [-3, 0, 2]
  ]
});

// Entry door (south wall)
const entryDoor = openPlans.baseDoor({
  doorPosition: [0, 0, -2],
  doorLength: 1,
  doorHeight: 2.1,
  doorQuadrant: 1,
  doorColor: 0x8B4513
});

// Window 1 (east wall)
const window1 = openPlans.baseSingleWindow({
  windowPosition: [3, 0, -1],
  windowHeight: 1.2,
  sillHeight: 0.9,
  dimensions: { length: 1.2 },
  windowColor: 0x87CEEB
});

// Window 2 (east wall)
const window2 = openPlans.baseSingleWindow({
  windowPosition: [3, 0, 1],
  windowHeight: 1.2,
  sillHeight: 0.9,
  dimensions: { length: 1.2 },
  windowColor: 0x87CEEB
});

// Window 3 (north wall) - double window
const window3 = openPlans.baseDoubleWindow({
  windowPosition: [0, 0, 2],
  windowHeight: 1.2,
  sillHeight: 0.9,
  dimensions: { length: 2 },
  windowColor: 0x87CEEB
});

​
Next steps

Custom elements

Learn how to create custom elements by combining primitives

Architectural elements guide

Complete guide to all architectural elements
Last modified on March 7, 2026