Skip to main content

@thatopen/components

Enumerations

EnumerationDescription
RendererModeThe mode of the renderer. If MANUAL, the renderer will be updated on command. If AUTO, the renderer will render on every update tick.

Classes

ClassDescription
AngleAnnotationsGlobal drawing system that manages angle dimension annotations across all TechnicalDrawing instances.
AnnotationSystemAbstract base for all annotation sub-systems operating on a TechnicalDrawing.
AsyncEventSimple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.
BCFTopicsBCFTopics manages Building Collaboration Format (BCF) data the engine. It provides functionality for importing, exporting, and manipulating BCF data. 📕 Tutorial. 📘 API.
BaseBase class of the library. Useful for finding out the interfaces something implements.
BaseCameraAbstract class representing a camera in a 3D world. All cameras should use this class as a base.
BaseRendererAbstract class representing a renderer for a 3D world. All renderers should use this class as a base.
BaseSceneAbstract class representing a base scene in the application. All scenes should use this class as a base.
BaseWorldItemOne of the elements that make a world. It can be either a scene, a camera or a renderer.
BlockAnnotationsGlobal drawing system that manages block insertions across all TechnicalDrawing instances.
BoundingBoxerAn implementation of bounding box utilities that works for fragments. 📕 Tutorial. 📘 API.
CalloutAnnotationsGlobal drawing system that manages callout annotations across all TechnicalDrawing instances.
ClassifierThe Classifier component is responsible for grouping items from different models based on criteria. 📕 Tutorial. 📘 API.
ClipperA lightweight component to easily create, delete and handle clipping planes. 📕 Tutorial. 📘 API.
CommentRepresents a comment in a BCF Topic.
ComponentComponents are the building blocks of this library. Components are singleton elements that contain specific functionality. For instance, the Clipper Component can create, delete and handle 3D clipping planes. Components must be unique (they can't be instanced more than once per Components instance), and have a static UUID that identifies them uniquely. The can be accessed globally using the Components instance.
ComponentsThe entry point of the Components library. It can create, delete and access all the components of the library globally, update all the updatable components automatically and dispose all the components, preventing memory leaks.
ConfigManagerA tool to manage all the configuration from the app centrally. 📘 API.
DataMapA class that extends the built-in Map class and provides additional events for item set, update, delete, and clear operations.
DataSetA class that extends the built-in Set class and provides additional functionality. It triggers events when items are added, deleted, or the set is cleared.
DisposerA tool to safely remove meshes, geometries, materials and other items from memory to prevent memory leaks. 📘 API.
DrawingAnnotationsFlat annotation store for a TechnicalDrawing, keyed by UUID.
DrawingLayersManages the named layers of a TechnicalDrawing.
DrawingViewportRepresents a framed orthographic window into a TechnicalDrawing.
DrawingViewportHelperVisualises the bounds of a DrawingViewport as a rectangle in the 3D scene.
DrawingViewportsManages the viewports of a TechnicalDrawing.
DxfExporterSerializes TechnicalDrawing content to DXF format (AC1015 / AutoCAD R2000).
DxfManagerManages DXF import and export for technical drawings.
EdgeProjectorComponent that generates 2D edge projections from fragment model items.
EventSimple event handler by Jason Kleban. Keep in mind that if you want to remove it later, you might want to declare the callback as an object. If you want to maintain the reference to this, you will need to declare the callback as an arrow function.
EventManagerSimple class to easily toggle and reset event lists.
FastModelPickerA fast model picker that uses color coding to identify fragment models under the mouse cursor. This is much faster than raycasting for simple model identification.
FastModelPickersA component that manages a FastModelPicker for each world and automatically disposes it when its corresponding world is disposed.
FinderQueryRepresents a finder query for retrieving items based on specified parameters. This class encapsulates the query logic, caching mechanism, and result management.
FirstPersonModeA NavigationMode that allows first person navigation, simulating FPS video games.
FragmentsManagerComponent to load, delete and manage fragments efficiently. 📕 Tutorial. 📘 API. Before calling FragmentsManager.init, you need a URL for the fragments worker. The recommended way to get it is FragmentsManager.getWorker, which fetches the version-matched worker from unpkg.
GridsA component that manages grid instances. Each grid is associated with a unique world. 📕 Tutorial. 📘 API.
HiderA component that manages visibility of fragments within a 3D scene. It extends the base Component class and provides methods to control fragment visibility and isolation. 📕 Tutorial. 📘 API.
IDSSpecificationRepresents a single specification from the Information Delivery Specification (IDS) standard.
IDSSpecificationsComponent that manages Information Delivery Specification (IDS) data. It provides functionality for importing, exporting, and manipulating IDS data. 📕 Tutorial. 📘 API.
IfcFragmentSettingsConfiguration of the IFC-fragment conversion.
IfcLoaderThe IfcLoader component is responsible of converting IFC files into Fragments. 📕 Tutorial. 📘 API.
ItemsFinderManages and executes queries to find items within models based on specified criteria. This class provides functionalities to create, store, and execute FinderQuery instances, allowing for efficient retrieval of items that match given query parameters. 📕 Tutorial. 📘 API.
LeaderAnnotationsGlobal drawing system that manages leader (arrow + text) annotations across all TechnicalDrawing instances.
LinearAnnotationsGlobal drawing system that manages linear dimension annotations across all TechnicalDrawing instances.
MeasurementUtilsUtility component for performing measurements on 3D meshes by providing methods for measuring distances between edges and faces. 📘 API.
ModelIdMapUtilsUtility class for manipulating and managing ModelIdMap objects. A ModelIdMap is a mapping of model identifiers (strings) to sets of local IDs (numbers). This class provides methods for joining, intersecting, cloning, adding, removing, and comparing ModelIdMap objects, as well as converting between ModelIdMap and plain JavaScript objects.
MouseA helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the raycaster, even if it has been transformed through CSS or doesn't occupy the whole screen.
OrbitModeA NavigationMode that allows 3D navigation and panning like in many 3D and CAD softwares.
OrthoPerspectiveCameraA flexible camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. It supports multiple navigation modes, such as 2D floor plan navigation, first person and 3D orbit. This class extends the SimpleCamera class and adds additional functionality for managing different camera projections and navigation modes. 📕 Tutorial. 📘 API.
PlanModeA NavigationMode that allows to navigate floorplans in 2D, like many BIM tools.
ProjectionManagerObject to control the CameraProjection of the OrthoPerspectiveCamera.
RaycastersA component that manages a raycaster for each world and automatically disposes it when its corresponding world is disposed. 📕 Tutorial. 📘 API.
ShadowedSceneA scene that supports efficient cast shadows. 📕 Tutorial. 📘 API.
SimpleCameraA basic camera that uses yomotsu's cameracontrols to control the camera in 2D and 3D. Check out it's API to find out what features it offers.
SimpleGridAn infinite grid. Created by fyrestar and translated to typescript by dkaraush.
SimplePlaneEach of the clipping planes created by the clipper.
SimpleRaycasterA simple raycaster that allows to easily get items from the scene using the mouse and touch events.
SimpleRendererA basic renderer capable of rendering Objec3Ds.
SimpleSceneA basic 3D scene to add objects hierarchically, and easily dispose them when you are finished with it.
SimpleWorldA class representing a simple world in a 3D environment. It extends the Base class and implements the World interface.
SlopeAnnotationsGlobal drawing system that manages slope annotations across all TechnicalDrawing instances.
TechnicalDrawingA single technical drawing — the core spatial aggregate.
TechnicalDrawingHelperVisualises a TechnicalDrawing's projection volume in the 3D scene and exposes three gizmo anchors for interactive control.
TechnicalDrawingsOBC Component that creates and manages TechnicalDrawing instances.
VertexPickerA class that provides functionality for picking vertices in a 3D scene.
ViewpointRepresents a BCF compliant viewpoint from BuildingSMART. The Viewpoint class provides methods for managing and interacting with viewpoints. It includes functionality for setting viewpoint properties, updating the camera, applying color to components, and serializing the viewpoint for export.
ViewsThe Views class is responsible for managing and interacting with a collection of 2D sections. It provides methods for creating, opening, closing, and managing views, as well as generating views from specific configurations such as IFC storeys or bounding boxes. 📕 Tutorial. 📘 API.
WorldsA class representing a collection of worlds within a game engine. It manages the creation, deletion, and update of worlds. 📕 Tutorial. 📘 API.

Interfaces

InterfaceDescription
AddClassificationConfigConfiguration options for adding a classification.
AnnotationEntryA single annotation entry stored in DrawingAnnotations, bundling the owning system, the annotation data, and its Three.js group.
AxisGizmoLikeMinimal interface for a translate-only gizmo that can be configured and attached to one of the helper's control handles.
BCFTopicsConfigConfiguration settings for managing BCF topics. This interface defines the properties and their meanings used to control the behavior of exporting and importing BCF topics.
BCFViewpointRepresents a Building Collaboration Format (BCF) viewpoint. This interface is compliant with the BCF API specifications.
BaseAnnotationStyleMinimum style contract shared by every annotation system.
BlockDefinitionThe geometry content of a named block. At least one of lines or mesh must be provided.
BlockInsertionA single placed instance of a named block definition.
BlockStyleStyle for a BlockAnnotations system.
CalloutAnnotationThe committed data for a single callout annotation.
CalloutAnnotationStyleVisual appearance of a callout annotation.
CameraControllableWhether a camera uses the Camera Controls library.
ClassificationGroupDataRepresents the data structure for a classification group.
ClassificationGroupQueryRepresents a query for a classification group.
ClassifyItemRelationsConfigConfiguration interface for classifying item by relation values.
ConfigurableWhether this component supports to be configured.
CreateElevationViewsConfigConfiguration options for creating views from bounding boxes.
CreateViewConfigConfiguration options for creating views from a plane.
CreateViewFromIfcStoreysConfigConfiguration options for creating a view from IFC storeys.
CreateableWhether this component supports create and destroy operations. This generally applies for components that work with instances, such as clipping planes or dimensions.
DimensionUnitDefines how a measured value (in drawing-space metres) is converted to a display string.
DisposableWhether this component has to be manually destroyed once you are done with it to prevent memory leaks. This also ensures that the DOM events created by that component will be cleaned up.
DrawingIntersectionResult of a successful raycast against a TechnicalDrawing.
DrawingLayerA named organizational layer on a TechnicalDrawing.
DrawingSystemDescriptor"Type bag" descriptor that fully parameterises an annotation system.
DrawingViewportConfigConfiguration to create a DrawingViewport.
DxfDrawingEntryOne drawing with one or more viewport placements to export.
DxfPaperOptionsPaper sheet dimensions for paper-space export.
DxfTextOptionsOptional text formatting overrides for DxfWriteContext.writeText.
DxfViewportEntryOne viewport placement within a drawing entry.
DxfWriteContextWrite-context passed to custom system exporters registered via
DxfExporter.registerSystemExporter.
EdgeProjectionResultResult of an edge projection, containing visible/hidden geometries and a mapping from group indices to model item identifiers.
EventableWhether it has events or not.
HideableWhether the geometric representation of this component can be hidden or shown in the Three.js scene.
LeaderAnnotationThe committed data for a single leader annotation.
LeaderAnnotationStyleVisual appearance of a leader annotation.
LinearAnnotationThe committed data for a single linear annotation.
LinearAnnotationStyleVisual appearance of a linear annotation. Registered by name on the component.
MeasureEdgeRepresents an edge measurement result.
NavigationModeAn object that determines the behavior of the camera controls and the user input (e.g. 2D floor plan mode, first person mode, etc).
ProgressBasic type to describe the progress of any kind of process.
QueryTestConfigConfiguration for testing queries.
RemoveClassifierItemsConfigConfiguration options for removing items from a classifier.
ResizeableWhether this component can be resized. The meaning of this can vary depending on the component: resizing a Renderer component could mean changing its resolution, whereas resizing a Mesh would change its scale.
SerializedFinderQueryRepresents a serialized query for an item finder.
SerializedQueryParametersRepresents the serialized query parameters used for item finding.
ShadowedSceneConfigConfiguration interface for the ShadowedScene. Defines properties for directional and ambient lights, as well as shadows.
SimpleGridConfigConfiguration interface for the SimpleGrid.
SimpleSceneConfigConfiguration interface for the SimpleScene.
SlopeAnnotationA single committed slope annotation.
SlopeAnnotationStyleVisual appearance of a slope annotation.
TransitionableWhether this component manages its interaction through an explicit state machine.
UpdateableWhether this component should be updated each frame.
VertexPickerConfigConfiguration interface for the VertexPicker component.
ViewpointBitmapRepresents a bitmap image associated with a viewpoint. This interface is compliant with the BCF API specifications.
ViewpointCameraRepresents the properties of a camera viewpoint in a 3D space. This interface is compliant with the BCF API specifications.
ViewpointClippingPlaneRepresents a clipping plane in a viewpoint, defined by its location and direction. This interface is compliant with the BCF API specifications.
ViewpointColoringRepresents the coloring information for a viewpoint, including the color and associated components. This interface is compliant with the BCF API specifications.
ViewpointComponentRepresents a component within a viewpoint, typically used in Building Information Modeling (BIM) workflows. This interface is compliant with the BCF API specifications.
ViewpointComponentsRepresents the components of a viewpoint in the BCF API. This interface is compliant with the BCF API specifications.
ViewpointLineRepresents a line defined by a start and end point in a viewpoint. This interface is compliant with the BCF API specifications.
ViewpointSnapshotRepresents a snapshot of a viewpoint, including its type and data. This interface is compliant with the BCF API specifications.
ViewpointVectorRepresents a 3D vector with x, y, and z coordinates.
ViewpointVisibilityRepresents the visibility settings for a viewpoint. This interface is compliant with the BCF API specifications.
WithUiWhether it has a UI or not.
WorldRepresents a 3D world with meshes, scene, camera, renderer, and other properties.

Type Aliases

Type aliasDescription
AngleAnnotationDataEditable fields of AngleAnnotation — everything except the uuid.
BlockInsertionDataEditable fields of BlockInsertion — everything except the uuid.
CalloutAnnotationDataEditable fields of CalloutAnnotation — everything except uuid.
CameraProjectionThe projection system of the camera.
ClassifierIntersectionInputRepresents the input structure for a classifier intersection operation. Defines a record where the keys are classification names and the values are arrays of group names within those classifications.
EnclosureBuilderDefines a closed shape (cloud, rectangle, circle, etc.) that forms the body of a callout annotation.
IDSCheckResultThe result of a check performed by an IDSFacet test.
LeaderAnnotationDataEditable fields of LeaderAnnotation — everything except uuid.
LineTickBuilderA function that produces tick mark geometry at one endpoint of a dimension or leader line.
LinearAnnotationDataEditable fields of LinearAnnotation — everything except the uuid.
MeshTickBuilderA function that produces filled tick mark geometry (triangles) at one endpoint.
ModelIdMapMapping of model identifiers to a collection of numbers representing localIds.
NavModeIDThe extensible list of supported navigation modes.
QueryResultAggregationRepresents the type of aggregation used in a query result. inclusive: Equivalent to OR. exclusive: Equivalent to AND.
SlopeAnnotationDataEditable fields of SlopeAnnotation — everything except the uuid.
SlopeFormatHow the slope value is displayed in the text label.
ViewpointOrthogonalCameraRepresents an orthogonal camera viewpoint, extending the base ViewpointCamera type. This interface is compliant with the BCF API specifications.
ViewpointPerspectiveCameraRepresents a perspective camera viewpoint compliant with the BCF API specifications. Extends the ViewpointCamera type and includes additional properties specific to perspective cameras.

Variables

VariableDescription
CircleEnclosureElliptical enclosure — an ellipse approximated with line segments centred on center.
CloudEnclosureRevision-cloud enclosure — a bumpy rectangle centred on center.
RectEnclosureRectangular enclosure — a plain axis-aligned rectangle centred on center.
UnitsBuilt-in DimensionUnit presets.

Functions

FunctionDescription
ArrowTickClosed arrowhead tick — two wing lines plus a base line connecting them.
DiagonalTickDiagonal slash tick (architectural style).
DotTickDot tick — a small circle drawn with line segments at the endpoint.
FilledArrowTickFilled arrowhead tick (solid triangle, requires a THREE.Mesh).
FilledCircleTickFilled circle tick (solid disc, requires a THREE.Mesh).
FilledSquareTickFilled square tick (solid square, requires a THREE.Mesh).
NoTickNo tick — dimension line ends cleanly at the extension lines.
OpenArrowTickOpen-V arrowhead tick — two lines from the tip to the wing points, no base.
angleDimensionMachinePure state transition function for the angle dimension tool.
buildAnglePositionsBuilds the flat vertex positions for a single committed angle dimension.
buildAnglePreviewPositionsBuilds vertex positions for the live preview during positioningArc.
buildCalloutPositionsBuilds the flat vertex positions for a committed callout annotation.
buildCalloutPreviewPositionsBuilds vertex positions for the live preview during interactive placement.
buildDimensionPositionsBuilds the flat vertex positions (x,y,z triplets) for a single committed linear dimension.
buildDimensionsBuilds an array of LinearAnnotations from consecutive point pairs, all sharing the same perpendicular offset.
buildLeaderPositionsBuilds the flat vertex positions for a committed leader annotation.
buildLeaderPreviewPositionsBuilds vertex positions for the live preview.
buildPreviewPositionsBuilds the flat vertex positions for a live dimension preview.
buildSlopePositionsBuilds the LineSegments position array for a committed slope annotation.
calloutAnnotationMachinePure state transition function for the callout annotation tool.
computeAlignmentMatrixComputes a local-to-world transformation matrix that maps a technical drawing's local coordinate system onto a target plane in 3D world space.
computeAngleReturns the angle in radians between the two rays defined by the dimension.
computeBisectorAngleReturns the angle (in radians, in the XZ plane) of the bisector ray between the two measured rays.
computeOffsetComputes the signed offset from a cursor position to the measurement axis defined by the first and last points.
formatSlopeConverts a slope ratio to a human-readable string.
getAngleTickEndpointsReturns the tip position and inward tangent direction for each tick endpoint of an angle dimension arc.
getDimensionTickEndpointsReturns the tip position and inward direction for each tick endpoint of a linear dimension.
getSlopeTipReturns the tip position of a slope annotation in drawing local space.
leaderAnnotationMachinePure state transition function for the leader annotation tool.
linearDimensionMachinePure state transition function for the linear dimension tool.