@thatopen/components-front

Enumerations

Enumeration	Description
EdgeDetectionPassMode	The mode of the edge detection pass.
GraphicVertexPickerMode	-
HovererMode	How the Hoverer reacts to cursor input.

• HovererMode.MOUSE_STOP: hover detection runs once the cursor has settled briefly. Matches the classic "wait for the user to stop moving" feel: less jittery, useful when hover is paired with a heavy reaction.
• HovererMode.MOUSE_MOVE: hover detection runs continuously as the cursor moves, throttled to one pick per animation frame. Snappier, ideal now that GPU-readback picking is sub-millisecond. | | MeasurementLineType | How measurement lines are rendered.
• Basic: THREE.Line with a LineBasicMaterial. This is the default and matches the historical behavior; note WebGL ignores line width here, so lines always render 1px regardless of lineWidth.
• Fat: Line2 / LineSegments2 with a LineMaterial, which honors lineWidth (in screen pixels).

Modeled as an enum so more line styles can be added later without a breaking change. | | MeasurementPickMode | When the measurement tool runs the snap pick that drives the preview marker / dimension line.

• MeasurementPickMode.MOUSE_MOVE: pick once per animation frame while the cursor is moving. Snappy feedback; defaults here. Heavy on big models because every move triggers a pick (~15 ms GPU readback) plus a snap fetch on first sight of each new item.
• MeasurementPickMode.MOUSE_STOP: pick only after the cursor settles for Measurement.delay ms. One pick per stop, regardless of how the user got there. Recommended for large scenes — the marker only appears where the user actually pauses, which is also where they're about to click. |

Classes

Class	Description
Angle	Represents an angle defined by three points in 3D space: a start point, a vertex (center), and an end point.
AngleMeasurement	A measurement tool to measure angles between 3 points in 3D and display a visual arc with the numeric angle value.
AreaMeasurement	AreaMeasurement allows users to measure and interact with areas in a 3D environment. This class provides functionality for creating, updating, and deleting area measurements, as well as managing their visual representation. 📕 Tutorial. 📘 API.
CivilCrossSectionNavigator	This component is used to navigate and visualize cross sections of a 3D model. 📕 Tutorial. 📘 API.
CivilNavigators	This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
CivilRaycaster	This component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
ClipEdges	The ClipEdges class is responsible for managing and rendering clipped edges and fills in a ThreeJS scene based on specified styles and models. 📕 Tutorial. 📘 API.
ClipStyler	A component that can style Clipping Planes by adding edges and fills. 📕 Tutorial. 📘 API.
DimensionLine	A class representing a simple dimension line in a 3D space.
DrawingEditor	Front component that centralises all interaction for OBC.TechnicalDrawing.
DrawingTool	Base class for all drawing tools.
FontManager	Manages font loading and creates Three.js text meshes for annotation labels.
GlossPass	A postprocessing pass that applies a gloss effect to the rendered scene. The gloss effect makes surfaces appear more reflective based on their angle relative to the camera view.
GraphicVertexPicker	A class to provide a graphical marker for picking vertices in a 3D scene.
Highlighter	This component allows highlighting and selecting fragments in a 3D scene. 📕 Tutorial. 📘 API.
Hoverer	The Hoverer component applies a material overlay to whichever
fragment item is under the cursor. It identifies the hovered item
via the GPU-readback picker (no worker raycast) and visualizes it by
attaching small proxy meshes that share the source tiles' geometry
attributes — no Mesher.get, no fresh BufferGeometry per hover, no
GPU memory allocation per item.

Per-hover cost when the chunks cache is warm: one picker render + 4-byte readback + a couple of proxy attach/detach calls. First hover on a new item adds one worker round-trip for the chunks query; the result is cached forever (until the model unloads). 📕 Tutorial. 📘 API. | | LengthMeasurement | A basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. 📕 Tutorial. 📘 API. | | Mark | Represents a marker in the 3D world. | | Marker | Component for Managing Markers along with creating different types of markers. Every marker is a Simple2DMarker. For every marker that needs to be added, you can use the Manager to add the marker and change its look and feel. 📕 Tutorial. 📘 API. | | Measurement | Abstract class that gives the core elements to create any measurement component. 📘 API. | | Mesher | Mesher is a class that manages the creation and removal of THREE.Mesh objects from fragment data. It allows to efficiently retrieve and remove meshes for specific model items. 📘 API. | | Outliner | This component allows adding colored outlines with thickness to fragments in a 3D scene. Supports multiple named outline groups so different selections can be outlined with different colors / thicknesses at the same time. 📕 Tutorial. 📘 API. | | PostproductionRenderer | A class that extends RendererWith2D and adds post-processing capabilities. 📕 Tutorial. 📘 API. | | RendererWith2D | A basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively). | | VolumeMeasurement | A basic dimension tool to measure volumes and display a 3D symbol with the numeric value. 📕 Tutorial. 📘 API. |

Interfaces

Interface	Description
ClipEdgesCreationConfig	Configuration for creating ClipEdges.
ClipEdgesItemStyle	Represents the style configuration for clip edges items.
ClipStyle	Represents the style configuration for clipping edges, including materials for lines and fills.
DimensionData	Interface representing the data required to create a dimension line.
DrawingPointerEvent	A processed pointer event in drawing local space.
HighlightEvents	Interface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.
HighlighterConfig	Interface defining the configuration options for the Highlighter class.
IGroupedMarkers	Interface representing a group of markers.
IMarker	Interface representing a marker object.
LinearPlacementContext	Context passed to every PlacementMode registered on LinearAnnotationsTool.
OutlineGroupConfig	Per-group visual configuration for the outliner.
PlacementMode	A single placement strategy for a DrawingTool.

Type Aliases

Type alias	Description
DrawingCursor	Alias exposed on DrawingEditor.cursor — same shape as DrawingPointerEvent.
HighlightStyle	A highlight style: the material definition used to color the items that
claim it, plus an optional draw priority. null means the style selects
items without coloring them.

Variables

Variable	Description
IndividualMode	One click → one dimension. Auto-confirms once both endpoints are set.
LineMode	Clicking a projection line locks onto both its endpoints at once, then a second click sets the offset distance.
SequentialMode	Keeps the session open after each confirmation so points can be chained.

Functions

Function	Description
dist2D	2-D distance between two Vector3s on the XZ plane (ignores Y).
formatUnits	Converts an internal unit key into its user-facing display form.
Area and volume unit keys use a trailing digit ("m2", "cm3"), which is
rendered with the proper superscript ("m²", "cm³"). All other unit keys
are returned untouched. The internal keys themselves never change, so
this only affects labels, not the API.