Skip to main content

​
Overview

The DimensionTool is a singleton utility for creating and managing dimension annotations in your OpenPlans scenes. It provides a centralized way to add visual measurements like length dimensions with labels.

​
Getting Started

The DimensionTool is automatically initialized when you call setupOpenGeometry() on your OpenPlans instance: 
const openplans = new OpenPlans(container);
await openplans.setupOpenGeometry();

// DimensionTool is now ready to use

​
DimensionTool

​
Properties

​
sceneRef
THREE.Scene
Reference to the Three.js scene where dimensions will be rendered. This is automatically set during OpenPlans initialization.

​
Methods

​
createDimension(key, type)
function
Creates a new dimension and adds it to the scene.Parameters:
  • key (string): Unique identifier for the dimension
  • type (DimensionType): Type of dimension to create
Supported dimension types:
  • 'length': Linear distance measurement
  • 'angle': Angular measurement (coming soon)
  • 'area': Area measurement (coming soon)
  • 'radius': Radius measurement (coming soon)
  • 'diameter': Diameter measurement (coming soon)
  • 'volume': Volume measurement (coming soon)
  • 'custom': Custom dimension type (coming soon)
​
getDimensionsById(key)
function
Retrieves a dimension by its unique identifier.Parameters:
  • key (string): The unique identifier of the dimension
Returns: The dimension object associated with the key, or undefined if not found.

​
LineDimension

The LineDimension class creates visual dimension annotations for linear measurements between two points.

​
Constructor

const dimension = new LineDimension({
  start: { x: 0, y: 0, z: 0 },
  end: { x: 5, y: 0, z: 0 },
  color: 0x000000
});
​
dimensionData
ILineOptions
Configuration object for the dimension line.Properties:
  • start (Vector3): Starting point of the dimension
  • end (Vector3): Ending point of the dimension
  • color (number): Color of the dimension line (hex value)

​
Methods

​
setDimensionLabel(label)
function
Updates the text label displayed on the dimension.Parameters:
  • label (string): The text to display (typically the measured distance)
Example:
dimension.setDimensionLabel('5.00 m');
​
setDimensionData(data, length)
function
Updates the dimension’s position and length.Parameters:
  • data (ILineOptions): New start and end points
  • length (number): The measured length to display
Example:
dimension.setDimensionData(
  { 
    start: { x: 0, y: 0, z: 0 },
    end: { x: 10, y: 0, z: 0 }
  },
  10.0
);
​
getDimensionLabel()
function
Gets the current dimension label text.Returns: String containing the current label.

​
Usage Example

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

// Initialize OpenPlans
const container = document.getElementById('canvas');
const openplans = new OpenPlans(container);
await openplans.setupOpenGeometry();

// Create a line to measure
const line = openplans.line({
  startPoint: [0, 0, 0],
  endPoint: [5, 0, 0],
  color: 0x000000
});

// Create a dimension for the line
DimensionTool.createDimension('wall-length', 'length');
const dimension = DimensionTool.getDimensionsById('wall-length');

// Update dimension to show measurement
dimension.setDimensionData(
  {
    start: { x: 0, y: 0.5, z: 0 },
    end: { x: 5, y: 0.5, z: 0 }
  },
  5.0
);
dimension.setDimensionLabel('5.00 m');

​
Styling

Dimension labels are rendered using CSS2D and can be customized through CSS: 
.label {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  padding: 2px 5px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
  border-radius: 4px;
}

​
Notes

  • Dimensions are automatically added to the scene when created via DimensionTool.createDimension()
  • The dimension line includes perpendicular tick marks at both ends
  • Labels are positioned at the midpoint of the dimension line
  • Currently, only ‘length’ dimension type is fully implemented
Last modified on March 7, 2026