Skip to main content

@thatopen/components-front

Enumerations

EnumerationDescription
EdgeDetectionPassModeThe mode of the edge detection pass.

Classes

ClassDescription
AngleRepresents an angle defined by three points in 3D space: a start point, a vertex (center), and an end point.
AngleMeasurementA measurement tool to measure angles between 3 points in 3D and display a visual arc with the numeric angle value.
AreaMeasurementAreaMeasurement 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.
CivilCrossSectionNavigatorThis component is used to navigate and visualize cross sections of a 3D model. 📕 Tutorial. 📘 API.
CivilNavigatorsThis component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
CivilRaycasterThis component provides functionality for navigating and interacting with civil engineering data in a 3D environment. 📕 Tutorial. 📘 API.
ClipEdgesThe ClipEdges class is responsible for managing and rendering clipped edges and fills in a ThreeJS scene based on specified styles and models. 📕 Tutorial. 📘 API.
ClipStylerA component that can style Clipping Planes by adding edges and fills. 📕 Tutorial. 📘 API.
DimensionLineA class representing a simple dimension line in a 3D space.
DrawingEditorFront component that centralises all interaction for OBC.TechnicalDrawing.
DrawingToolBase class for all drawing tools.
FontManagerManages font loading and creates Three.js text meshes for annotation labels.
GlossPassA 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.
GraphicVertexPickerA class to provide a graphical marker for picking vertices in a 3D scene.
HighlighterThis component allows highlighting and selecting fragments in a 3D scene. 📕 Tutorial. 📘 API.
HovererThe Hoverer class is responsible for managing hover effects on 3D objects within a scene. It supports animations for fading in and out hover effects and manages the lifecycle of associated 3D meshes. 📕 Tutorial. 📘 API.
LengthMeasurementA basic dimension tool to measure distances between 2 points in 3D and display a 3D symbol displaying the numeric value. 📕 Tutorial. 📘 API.
MarkRepresents a marker in the 3D world.
MarkerComponent 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.
MeasurementAbstract class that gives the core elements to create any measurement component. 📘 API.
MesherMesher 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.
OutlinerThis component allows adding a colored outline with thickness to fragments in a 3D scene. 📕 Tutorial. 📘 API.
PostproductionRendererA class that extends RendererWith2D and adds post-processing capabilities. 📕 Tutorial. 📘 API.
RendererWith2DA basic renderer capable of rendering 3D and 2D objects (Objec3Ds and CSS2DObjects respectively).
VolumeMeasurementA basic dimension tool to measure volumes and display a 3D symbol with the numeric value. 📕 Tutorial. 📘 API.

Interfaces

InterfaceDescription
ClipEdgesCreationConfigConfiguration for creating ClipEdges.
ClipEdgesItemStyleRepresents the style configuration for clip edges items.
ClipStyleRepresents the style configuration for clipping edges, including materials for lines and fills.
DimensionDataInterface representing the data required to create a dimension line.
DrawingPointerEventA processed pointer event in drawing local space.
HighlightEventsInterface defining the events that the Highlighter class can trigger. Each highlighter has its own set of events, identified by the highlighter name.
HighlighterConfigInterface defining the configuration options for the Highlighter class.
IGroupedMarkersInterface representing a group of markers.
IMarkerInterface representing a marker object.
LinearPlacementContextContext passed to every PlacementMode registered on LinearAnnotationsTool.
PlacementModeA single placement strategy for a DrawingTool.

Type Aliases

Type aliasDescription
DrawingCursorAlias exposed on DrawingEditor.cursor — same shape as DrawingPointerEvent.

Variables

VariableDescription
IndividualModeOne click → one dimension. Auto-confirms once both endpoints are set.
LineModeClicking a projection line locks onto both its endpoints at once, then a second click sets the offset distance.
SequentialModeKeeps the session open after each confirmation so points can be chained.

Functions

FunctionDescription
dist2D2-D distance between two Vector3s on the XZ plane (ignores Y).