@combeenation/3d-viewer 18.0.0-beta1 → 18.0.0-beta3

package/dist/lib-cjs/viewer.d.ts

@@ -1,5 +1,5 @@
 import * as Index from './index';
-import { AbstractEngine, CameraManager, DebugManager, DefaultSceneSettings, EngineOptions, EventManager, GltfExportManager, MaterialManager, ModelManager, ParameterManager, ParameterSubject, Scene, SceneManager, TextureManager, TransformNode } from './index';
+import { AbstractEngine, CameraManager, DebugManager, DefaultSceneSettings, DimensionLineManager, EngineOptions, EventManager, GltfExportManager, HtmlAnchorManager, MaterialManager, ModelManager, ParameterManager, ParameterSubject, Scene, SceneManager, TextureManager, TransformNode } from './index';
 /**
  * Use this to define geometry to be excluded from autofocus, GLB export, etc.
  */
@@ -51,8 +51,10 @@ export declare class Viewer {
     protected _scene: Scene;
     protected _cameraManager: CameraManager;
     protected _debugManager: DebugManager;
+    protected _dimensionLineManager: DimensionLineManager;
     protected _eventManager: EventManager;
     protected _gltfExportManager: GltfExportManager;
+    protected _htmlAnchorManager: HtmlAnchorManager;
     protected _materialManager: MaterialManager;
     protected _modelManager: ModelManager;
     protected _parameterManager: ParameterManager;
@@ -64,8 +66,10 @@ export declare class Viewer {
     get engine(): AbstractEngine;
     get cameraManager(): CameraManager;
     get debugManager(): DebugManager;
+    get dimensionLineManager(): DimensionLineManager;
     get eventManager(): EventManager;
     get gltfExportManager(): GltfExportManager;
+    get htmlAnchorManager(): HtmlAnchorManager;
     get materialManager(): MaterialManager;
     get modelManager(): ModelManager;
     get parameterManager(): ParameterManager;
@@ -88,7 +92,7 @@ export declare class Viewer {
      */
     constructor(canvas?: HTMLCanvasElement | undefined, viewerSettings?: DeepPartial<ViewerSettings>, defaultSceneSettings?: DeepPartial<DefaultSceneSettings>);
     /**
-     * Pause rendering can be usefull when doing internal scene processings that should not be visible to the user,
+     * Pause rendering can be useful when doing internal scene processings that should not be visible to the user,
      * e.g. cloning meshes for gltf export
      */
     pauseRendering(): void;

package/dist/lib-cjs/viewer.js

@@ -84,12 +84,18 @@ class Viewer {
     get debugManager() {
         return this._debugManager;
     }
+    get dimensionLineManager() {
+        return this._dimensionLineManager;
+    }
     get eventManager() {
         return this._eventManager;
     }
     get gltfExportManager() {
         return this._gltfExportManager;
     }
+    get htmlAnchorManager() {
+        return this._htmlAnchorManager;
+    }
     get materialManager() {
         return this._materialManager;
     }
@@ -119,7 +125,7 @@ class Viewer {
         return Index;
     }
     /**
-     * Pause rendering can be usefull when doing internal scene processings that should not be visible to the user,
+     * Pause rendering can be useful when doing internal scene processings that should not be visible to the user,
      * e.g. cloning meshes for gltf export
      */
     pauseRendering() {
@@ -162,13 +168,19 @@ class Viewer {
             engine.getCaps().parallelShaderCompile = undefined;
         }
         this._scene = new index_1.Scene(engine);
+        // NOTE: rendering group id "1" is reserved for occlusion helper sphere (see `HtmlAnchorManager`)
+        // rendering group id "1" has the same depth buffer as 0 in order to make this work
+        // => use rendering group id "2" or higher for keeping meshes in foreground
+        this._scene.setRenderingAutoClearDepthStencil(1, false, false, false);
         // NOTE: order of manage seems to be a bit counter intuitive as it's sorted alphabetically
         // semantically one would start with scene manager, etc...
         // still this is a good test as the order of manager constructors should not matter
         this._cameraManager = new index_1.CameraManager(this);
         this._debugManager = new index_1.DebugManager(this);
+        this._dimensionLineManager = new index_1.DimensionLineManager(this);
         this._eventManager = new index_1.EventManager(this);
         this._gltfExportManager = new index_1.GltfExportManager(this);
+        this._htmlAnchorManager = new index_1.HtmlAnchorManager(this);
         this._materialManager = new index_1.MaterialManager(this);
         this._modelManager = new index_1.ModelManager(this);
         this._parameterManager = new index_1.ParameterManager(this);

package/dist/lib-cjs/viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../src/viewer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../src/viewer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "18.0.0-beta1",
+  "version": "18.0.0-beta3",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {
@@ -54,6 +54,7 @@
     "@babylonjs/loaders": "7.47.3",
     "@babylonjs/serializers": "7.47.3",
     "eventemitter3": "4.0.7",
+    "html2canvas": "1.4.1",
     "is-svg": "^5.0.0",
     "lodash-es": "4.17.21"
   },

package/src/index.ts

@@ -21,6 +21,7 @@ export * from '@babylonjs/core/Debug/axesViewer';
 export * from '@babylonjs/core/Debug/debugLayer';
 export * from '@babylonjs/core/Engines/abstractEngine';
 export * from '@babylonjs/core/Engines/engine';
+export * from '@babylonjs/core/Engines/Extensions/engine.query';
 export * from '@babylonjs/core/Engines/nullEngine';
 export * from '@babylonjs/core/Engines/thinEngine';
 export * from '@babylonjs/core/Lights';
@@ -33,14 +34,17 @@ export * from '@babylonjs/core/Maths';
 export * from '@babylonjs/core/Meshes/abstractMesh';
 export * from '@babylonjs/core/Meshes/geometry';
 export * from '@babylonjs/core/Meshes/instancedMesh';
+export * from '@babylonjs/core/Meshes/linesMesh';
 export * from '@babylonjs/core/Meshes/mesh';
 export * from '@babylonjs/core/Meshes/meshBuilder';
 export * from '@babylonjs/core/Meshes/transformNode';
+export * from '@babylonjs/core/Misc/observable';
 export * from '@babylonjs/core/Misc/interfaces/screenshotSize';
 export * from '@babylonjs/core/Misc/screenshotTools';
 export * from '@babylonjs/core/Misc/tags';
 export * from '@babylonjs/core/Morph';
 export * from '@babylonjs/core/node';
+export * from '@babylonjs/core/Rendering/boundingBoxRenderer';
 export * from '@babylonjs/core/Rendering/utilityLayerRenderer';
 export * from '@babylonjs/core/scene';
 export * from '@babylonjs/core/types';
@@ -66,9 +70,11 @@ export * from '@babylonjs/core/Materials/Node';
 export * from './viewer';
 export * from './viewer-error';
 export * from './manager/camera-manager';
+export * from './manager/dimension-line-manager';
 export * from './manager/debug-manager';
 export * from './manager/event-manager';
 export * from './manager/gltf-export-manager';
+export * from './manager/html-anchor-manager';
 export * from './manager/material-manager';
 export * from './manager/model-manager';
 export * from './manager/parameter-manager';

package/src/internal/cloning-helper.ts

@@ -186,7 +186,7 @@ function _cloneNode(
     // making deep copies of the node metadata might be an optional flag in the cloning functions in the future
 
     // ATM the assignment from clone to source is needed for reassigning instanced meshes after cloning
-    // may be usefull for other node types in the future as well
+    // may be useful for other node types in the future as well
     setInternalMetadataValue(clone, 'cloneSource', node.uniqueId);
     setInternalMetadataValue(node, 'cloneTarget', clone.uniqueId);
 

package/src/manager/camera-manager.ts

@@ -4,7 +4,6 @@ import {
   ArcRotateCamera,
   BoundingSphere,
   ExcludedGeometryList,
-  IScreenshotSize,
   ScreenshotTools,
   Vector3,
   Viewer,
@@ -64,6 +63,11 @@ export type ScreenshotSettings = {
   autofocusScene?: boolean;
   /** Optional list of geometry to be excluded from consideration */
   exclude?: ExcludedGeometryList;
+  /**
+   * Optional list of html anchor groups (see {@link HtmlAnchorManager}), that should be excluded from the screenshot.\
+   * Excludes ALL html anchor groups if set to `true`.
+   */
+  excludeHtmlAnchorGroups?: string[] | true;
   /**
    * "MIME type" of the returned screenshot image, defaults to `image/png`
    *
@@ -89,11 +93,27 @@ export type ScreenshotSettings = {
   quality?: number;
 };
 
+/**
+ * Internal data type for screenshot sizing.
+ * `imageWidth/Height` defines the size of the final image.
+ * `canvasWidth/Height` is the size of the canvas from which the screenshot is taken.
+ * Canvas size always has the same aspect ratio as the viewport and is larger than image size, as the final image may be
+ * cropped.
+ *
+ * @internal
+ */
+export type ScreenshotSize = {
+  imageWidth: number;
+  imageHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+};
+
 /**
  * Manager for camera related tasks
  */
 export class CameraManager {
-  public static readonly CAMERA_ANIMATION_NAME = '__cameraAnimation__';
+  public static readonly CAMERA_ANIMATION_NAME = '$cameraAnimation';
 
   /** @internal */
   public static readonly DEFAULT_CAMERA_POSITION: CameraPosition = {
@@ -112,7 +132,7 @@ export class CameraManager {
 
   protected static readonly _DEFAULT_AUTOFOCUS_RADIUS_FACTOR = 1;
   protected static readonly _DEFAULT_CAM_SPEED_MS = 250;
-  protected static readonly _SCREENSHOT_CAMERA_NAME = '__screenshotCamera__';
+  protected static readonly _SCREENSHOT_CAMERA_NAME = '$screenshotCamera';
 
   /** @internal */
   public constructor(protected viewer: Viewer) {}
@@ -269,21 +289,38 @@ export class CameraManager {
    * The result is a string containing a base64 encoded image.
    */
   public async createScreenshot(settings?: ScreenshotSettings): Promise<string> {
+    const {
+      width,
+      height,
+      alpha,
+      beta,
+      radius,
+      target,
+      autofocusScene,
+      exclude,
+      excludeHtmlAnchorGroups,
+      fileName,
+      samples,
+      antialiasing,
+      renderSprites,
+      enableStencilBuffer,
+      useLayerMask,
+      quality,
+    } = settings ?? {};
+
     const screenshotCam = this.viewer.scene.activeCamera?.clone(
       CameraManager._SCREENSHOT_CAMERA_NAME
     ) as ArcRotateCamera;
-    const boundingInfo = settings?.autofocusScene
-      ? this.viewer.sceneManager.calculateBoundingInfo(settings.exclude)
-      : undefined;
+    const boundingInfo = autofocusScene ? this.viewer.sceneManager.calculateBoundingInfo(exclude) : undefined;
 
-    if (settings?.alpha !== undefined) {
-      screenshotCam.alpha = settings.alpha;
+    if (alpha !== undefined) {
+      screenshotCam.alpha = alpha;
     }
-    if (settings?.beta !== undefined) {
-      screenshotCam.beta = settings.beta;
+    if (beta !== undefined) {
+      screenshotCam.beta = beta;
     }
-    if (settings?.radius !== undefined) {
-      screenshotCam.radius = settings.radius;
+    if (radius !== undefined) {
+      screenshotCam.radius = radius;
     } else if (boundingInfo) {
       // zoom out to have full scene in view if requested by `autofocusScene` flag
       const distance = this._getAutofocusZoomingDistance(boundingInfo.boundingSphere, screenshotCam);
@@ -292,44 +329,90 @@ export class CameraManager {
     }
     // `cloneAlphaBetaRadius` has to be set to true, otherwise these values get adapted by setting the new target
     // this would also be the case when setting `screenshotCam.target` directly
-    if (settings?.target !== undefined) {
-      screenshotCam.setTarget(settings.target, undefined, undefined, true);
+    if (target !== undefined) {
+      screenshotCam.setTarget(target, undefined, undefined, true);
     } else if (boundingInfo) {
       screenshotCam.setTarget(boundingInfo.boundingSphere.center, undefined, undefined, true);
     }
 
-    // don't expose internal props of `IScreenshotSize` in the API (yet), as it gets rather confusing and it shouldn't
-    // be necessary in the first place
-    // also let Babylon.js do all the fallback handling for missing properties
-    const size: IScreenshotSize = { width: settings?.width, height: settings?.height };
+    // calculate screenshot size manually as it is used for html anchor screenshot as well
+    const screenshotSize = this._getScreenshotSize(width, height);
+    const mimeType = settings?.mimeType ?? 'image/png';
+
+    const imageStr3d = await ScreenshotTools.CreateScreenshotUsingRenderTargetAsync(
+      this.viewer.engine,
+      screenshotCam,
+      { width: screenshotSize.imageWidth, height: screenshotSize.imageHeight },
+      mimeType,
+      samples,
+      antialiasing,
+      undefined,
+      renderSprites,
+      enableStencilBuffer,
+      useLayerMask,
+      quality,
+      texture => {
+        // NOTE: this doesn't work ATM, see https://github.com/BabylonJS/Babylon.js/pull/16081#issuecomment-2652861176
+        // we'll have to wait for a fix or solve the visibility in a different way (e.g. camera layer mask)
+        texture.renderList = this.viewer.scene.meshes.filter(
+          mesh => !settings?.exclude || !isNodeExcluded(mesh, settings.exclude)
+        );
+      }
+    );
 
-    // for some reason the `customizeTexture` property is not exposed in the async version of this function, therefore
-    // we create the promise here manually
-    const imageStr = await new Promise<string>(resolve => {
-      ScreenshotTools.CreateScreenshotUsingRenderTarget(
-        this.viewer.engine,
+    let imageStr = '';
+    const htmlAnchorKeys =
+      excludeHtmlAnchorGroups === true
+        ? []
+        : this.viewer.htmlAnchorManager.getHtmlAnchorKeys(undefined, excludeHtmlAnchorGroups, true);
+    if (htmlAnchorKeys.length) {
+      // html anchors are not included in the main screenshot, as the html elements are located outside of the canvas
+      // the idea is to create a dedicated canvas for these elements and merge the result with the main screenshot into
+      // a combined canvas
+      const screenshotHtmlCanvas = await this.viewer.htmlAnchorManager.createScreenshotCanvas(
+        screenshotSize,
         screenshotCam,
-        size,
-        (data: string) => resolve(data),
-        settings?.mimeType,
-        settings?.samples,
-        settings?.antialiasing,
-        settings?.fileName,
-        settings?.renderSprites,
-        settings?.enableStencilBuffer,
-        settings?.useLayerMask,
-        settings?.quality,
-        texture => {
-          texture.renderList = this.viewer.scene.meshes.filter(
-            mesh => !settings?.exclude || !isNodeExcluded(mesh, settings.exclude)
-          );
-        }
+        htmlAnchorKeys
       );
-    });
+
+      // convert the main screenshot into an image, so that it can be drawn onto a canvas as well
+      const screenshot3dImg = new Image();
+      screenshot3dImg.src = imageStr3d;
+      await new Promise(resolve => {
+        screenshot3dImg.onload = resolve;
+      });
+
+      const screenshotCombinedCanvas = document.createElement('canvas');
+      screenshotCombinedCanvas.width = screenshotSize.imageWidth;
+      screenshotCombinedCanvas.height = screenshotSize.imageHeight;
+
+      // draw main and html screenshot on a new canvas and get the base64 string from it
+      const context = screenshotCombinedCanvas.getContext('2d')!;
+      context.drawImage(screenshot3dImg, 0, 0, screenshotSize.imageWidth, screenshotSize.imageHeight);
+      context.drawImage(screenshotHtmlCanvas, 0, 0, screenshotSize.imageWidth, screenshotSize.imageHeight);
+      imageStr = screenshotCombinedCanvas.toDataURL(mimeType);
+
+      screenshotCombinedCanvas.remove();
+    } else {
+      imageStr = imageStr3d;
+    }
 
     screenshotCam.dispose();
 
-    return imageStr;
+    if (fileName) {
+      // rebuild Babylon.js default behaviour: if a file name is given, download the screenshot instead of returning the
+      // data string
+      const link = document.createElement('a');
+      link.href = imageStr;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      return '';
+    } else {
+      return imageStr;
+    }
   }
 
   protected static _addCameraAnimationToGroup(
@@ -375,4 +458,33 @@ export class CameraManager {
 
     return distance;
   }
+
+  protected _getScreenshotSize(width?: number, height?: number): ScreenshotSize {
+    const canvas = this.viewer.canvas!;
+    const aspectRatio = canvas.width / canvas.height;
+
+    let imageWidth = 0;
+    let imageHeight = 0;
+    if (width && height) {
+      imageWidth = width;
+      imageHeight = height;
+    } else if (width && !height) {
+      imageWidth = width;
+      imageHeight = width / aspectRatio;
+    } else if (!width && height) {
+      imageWidth = height * aspectRatio;
+      imageHeight = height;
+    } else {
+      imageWidth = canvas.width;
+      imageHeight = canvas.height;
+    }
+
+    // canvas size only differs from image size if both width and height are set
+    // in this case the aspect ratio differs from the canvas aspect ratio and some parts of the canvas have to be
+    // cropped for the screenshot
+    const canvasWidth = width && height ? height * aspectRatio : imageWidth;
+    const canvasHeight = imageHeight;
+
+    return { imageWidth, imageHeight, canvasWidth, canvasHeight };
+  }
 }

package/src/manager/debug-manager.ts

@@ -20,7 +20,7 @@ import {
  * Manager for debugging functionalities
  */
 export class DebugManager {
-  protected static _BOUNDING_SPHERE_KEY = '__bounding_sphere__';
+  protected static _BOUNDING_SPHERE_KEY = '$boundingSphere';
 
   protected _axesViewer: AxesViewer | null = null;
   protected _showBoundingSphereForAutofocus: boolean = false;
@@ -145,7 +145,7 @@ The inspector can only be used in development builds.`);
 
   /**
    * Draws a wireframe bounding sphere on the next call of {@link CameraManager.autofocusActiveCamera}.\
-   * This is usefull for checking which parts of the scene get centered.
+   * This is useful for checking which parts of the scene get centered.
    */
   public showBoundingSphereForAutofocus(): void {
     this._showBoundingSphereForAutofocus = true;

package/src/manager/dimension-line-manager.ts

@@ -0,0 +1,210 @@
+import { Color3, LinesMesh, MeshBuilder, Tags, TransformNode, Vector3, Viewer } from '../index';
+import { merge } from 'lodash-es';
+
+/**
+ * Options for dimension line creation
+ */
+export type DimensionLineOptions = {
+  /**
+   * Default: `Color3.Black()`
+   */
+  lineColor: Color3;
+  /**
+   * Default: 0.05m
+   */
+  closingLineHeight: number;
+  /**
+   * Optional direction of the closing lines on start and end.\
+   * Use built-in vector functions like `Vector3.Left()` or `Vector3.Forward()` for simple directions of use a custom
+   * normal vector like `Vector3(1, 0.5 ,0)`.
+   *
+   * Default: x or y direction is taken, depending on the normal vector between start and end point
+   */
+  closingLineDirection?: Vector3;
+  /**
+   * Optional parent node of dimension line, can be used for easier calculation of start and end point
+   *
+   * Default: no parent node set
+   */
+  parentNode?: TransformNode;
+  /**
+   * `true`: html elements can be occluded by other meshes
+   * `false`: html elements will always be shown in front of the scene
+   *
+   * Default: `false`
+   */
+  hideIfOccluded: boolean;
+  /**
+   * `true`: html element size is relative to camera distance, just like a "normal" 3d object
+   * `false`: html element size remains constant
+   *
+   * Default: `false`
+   */
+  scaleWithCameraDistance: boolean;
+  /**
+   * Optional callback for label text creation.\
+   * Provides calculated length from `startPoint` and `endPoint` as parameter in meters.
+   *
+   * Default: rounded (2 digits) "mm" value (e.g. "1234.56 mm")
+   */
+  labelTextCb: (lengthM: number) => string;
+  /**
+   * Custom CSS class for dimension line label.\
+   * Can be used to overwrite the styling of the label.
+   */
+  labelCssClass: string;
+};
+
+/**
+ * Manager for dimension lines, which can be used to display certain dimensions like object sizes in the scene
+ */
+export class DimensionLineManager {
+  public static readonly DIMENSION_LINE_KEY = '$dimLine';
+
+  protected _defaultLineOptions: DimensionLineOptions = {
+    lineColor: Color3.Black(),
+    closingLineHeight: 0.05,
+    hideIfOccluded: false,
+    scaleWithCameraDistance: false,
+    labelTextCb: (lengthM): string => {
+      const lengthRounded = Math.round(lengthM * 1000 * 100) / 100;
+      return `${lengthRounded} mm`;
+    },
+    labelCssClass: '',
+  };
+
+  // map with all dimension lines that are currently visible in the scene
+  // holds data of all disposable objects for a clean up
+  protected _dimensionLineObjs: {
+    [name: string]: {
+      linesMesh: LinesMesh;
+      htmlLabelName: string;
+    };
+  } = {};
+
+  /** @internal */
+  public constructor(protected viewer: Viewer) {}
+
+  /**
+   * Define dimension line options that are used for each line by default.\
+   * Options can be overwritten by each line individually.
+   */
+  public setDefaultDimensionLineOptions(defaultLineOptions: Partial<DimensionLineOptions>): void {
+    merge(this._defaultLineOptions, defaultLineOptions);
+  }
+
+  /**
+   * Create dimension line between two points
+   */
+  public addDimensionLine(
+    name: string,
+    startPoint: Vector3,
+    endPoint: Vector3,
+    options?: Partial<DimensionLineOptions>
+  ): void {
+    if (this._dimensionLineObjs[name]) {
+      console.warn(`Dimension line "${name}" already exists`);
+      return;
+    }
+
+    const resDefaultOptions = { ...this._defaultLineOptions };
+    merge(resDefaultOptions, options);
+    const {
+      lineColor,
+      closingLineHeight,
+      closingLineDirection: closingLineDirectionIn,
+      parentNode,
+      hideIfOccluded,
+      scaleWithCameraDistance,
+      labelTextCb,
+      labelCssClass,
+    } = resDefaultOptions;
+
+    let closingLineDirection = closingLineDirectionIn;
+    if (!closingLineDirection) {
+      // evaluate closing line direction if not given
+      const normal = endPoint.subtract(startPoint);
+      const yIsMainDirection = Math.abs(normal.y) > Math.abs(normal.x) && Math.abs(normal.y) > Math.abs(normal.z);
+      closingLineDirection = yIsMainDirection ? Vector3.Right() : Vector3.Up();
+    }
+
+    // calculate and create main and closing lines
+    const lineCenter = Vector3.Center(startPoint, endPoint);
+    const relStartPt = startPoint.subtract(lineCenter);
+    const relEndPt = endPoint.subtract(lineCenter);
+    const closingLineOffsetVector = closingLineDirection.normalizeToNew().scale(closingLineHeight / 2);
+    const closingLineStartPts = [relStartPt.add(closingLineOffsetVector), relStartPt.subtract(closingLineOffsetVector)];
+    const closingLineEndPts = [relEndPt.add(closingLineOffsetVector), relEndPt.subtract(closingLineOffsetVector)];
+
+    const linesMesh = MeshBuilder.CreateLineSystem(`${DimensionLineManager.DIMENSION_LINE_KEY}_${name}`, {
+      lines: [[relStartPt, relEndPt], closingLineStartPts, closingLineEndPts],
+    });
+    linesMesh.position = lineCenter;
+    linesMesh.color = lineColor;
+    // rendering group id 1 reserved for html anchor meshes, which are required for occlusion checking
+    linesMesh.renderingGroupId = hideIfOccluded ? 0 : 2;
+    // tag can be used to exclude dimension lines from autofocus or gltf export
+    Tags.AddTagsTo(linesMesh, DimensionLineManager.DIMENSION_LINE_KEY);
+    if (parentNode) {
+      linesMesh.parent = parentNode;
+    }
+
+    const lengthM = Vector3.Distance(startPoint, endPoint);
+    const labelText = labelTextCb(lengthM);
+
+    // create default html element
+    const span = document.createElement('span');
+    span.textContent = labelText;
+
+    if (labelCssClass) {
+      span.classList.add(labelCssClass);
+    } else {
+      const labelHeight = 24;
+      span.style.display = 'block';
+      span.style.height = `${labelHeight}px`;
+      span.style.lineHeight = `${labelHeight}px`;
+      span.style.fontSize = `${(labelHeight * 2) / 3}px`;
+      span.style.fontFamily = 'Arial';
+      span.style.border = `1px solid black`;
+      span.style.paddingLeft = `${labelHeight / 2}px`;
+      span.style.paddingRight = `${labelHeight / 2}px`;
+      span.style.borderRadius = `${labelHeight / 2}px`;
+      span.style.background = 'white';
+    }
+
+    const htmlLabelName = `${DimensionLineManager.DIMENSION_LINE_KEY}_${name}`;
+    this.viewer.htmlAnchorManager.addHtmlAnchor(name, span, Vector3.Zero(), {
+      parentNode: linesMesh,
+      group: DimensionLineManager.DIMENSION_LINE_KEY,
+      hideIfOccluded,
+      scaleWithCameraDistance,
+    });
+
+    this._dimensionLineObjs[name] = { linesMesh, htmlLabelName };
+  }
+
+  /**
+   * Remove dimension line and disposes all associated ressources
+   */
+  public removeDimensionLine(name: string): void {
+    const dimensionLine = this._dimensionLineObjs[name];
+    if (!dimensionLine) {
+      console.warn(`Dimension line "${name}" does not exist`);
+      return;
+    }
+
+    this.viewer.htmlAnchorManager.removeHtmlAnchor(name);
+    dimensionLine.linesMesh.dispose(false, true);
+
+    delete this._dimensionLineObjs[name];
+  }
+
+  /**
+   * Remove all dimension lines that have been created with the `DimensionLineManager`
+   */
+  public removeAllDimensionLines(): void {
+    Object.keys(this._dimensionLineObjs).forEach(dimLineName => {
+      this.removeDimensionLine(dimLineName);
+    });
+  }
+}