Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
thatopen-impl-measurements
description
Use when adding measurement tools to a ThatOpen BIM viewer, including distance, area, volume, and angle measurements. Prevents measurement lifecycle errors and missing snapping configuration. Covers LengthMeasurement, AreaMeasurement, VolumeMeasurement, AngleMeasurement, Measurement base class, snapping, units, modes, valueFormatter, measurement lifecycle (create/end/cancel/delete). Keywords: measurement, length, area, volume, angle, distance, snap, dimension, measure, units, picker, measure distance, how far apart, calculate area in viewer.
license
MIT
compatibility
Designed for Claude Code. Requires @thatopen/components-front 3.3.x.
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
ThatOpen Measurements
Overview
This skill covers the measurement system in @thatopen/components-front:
LengthMeasurement, AreaMeasurement, VolumeMeasurement, and AngleMeasurement.
All four extend the abstract Measurement<T, U> base class, which provides
shared visual elements, snapping, units, disposal, and event handling.
abstractclassMeasurement<
T extendsRecord<string, any>,
U extends keyof MeasureToUnitMap
> extendsOBC.ComponentimplementsOBC.Createable, OBC.Hideable, OBC.Disposable
Shared Data Collections
Collection
Type
Purpose
list
DataSet<T>
All measurement elements of that type
lines
DataSet<DimensionLine>
Visual dimension lines
fills
DataSet<MeasureFill>
Visual area fill meshes
labels
DataSet<Mark>
HTML label overlays
volumes
DataSet<MeasureVolume>
Visual volume meshes
Shared Configuration Properties
Property
Type
Default
Description
enabled
boolean
false
Activates measurement interaction
visible
boolean
true
Shows/hides all visual elements
units
MeasureToUnitMap[U]
per type
Unit for display
rounding
number
2
Decimal precision
color
THREE.Color
blue
Color of all visual elements
delay
number
300
Pointer stop detection delay (ms)
world
OBC.World
—
World reference (REQUIRED)
Material Properties
Property
Type
Default
linesMaterial
THREE.LineBasicMaterial
Blue, depthTest false
fillsMaterial
THREE.MeshLambertMaterial
Green, double-sided, 30% opacity
volumesMaterial
THREE.MeshLambertMaterial
Green, double-sided, 30% opacity
linesEndpointElement
HTMLElement
Blue rounded div (dimension mark)
Static Members
// Custom value formatter — applies to ALL measurement instancesMeasurement.valueFormatter = (value: number) =>`${value.toFixed(1)} m`;
ALWAYS set Measurement.valueFormatter before enabling measurements if you
need custom label formatting. It is a static property shared across all
measurement types.
Events
Event
Payload
Trigger
onPointerStop
—
Pointer stopped moving for delay ms
onPointerMove
—
Pointer moved
onStateChanged
MeasurementStateChange[]
Mode, color, units, rounding, visibility, or enabled changed
Snapping is provided by the GraphicVertexPicker inside the base class.
Configure snapping via these properties on any measurement instance:
Property
Type
Description
snappings
Snapping class array
Which snap types to use: LINE, POINT, FACE
snapDistance
number
Maximum distance for snapping (world units)
pickerSize
number
Visual size of the snap marker (pixels, default 6)
pickerMode
GraphicVertexPickerMode
DEFAULT (with snapping) or SYNCHRONOUS
Snapping Classes
Class
Visual Indicator
Snap Behavior
LINE
Gray border, square
Snaps to nearest edge
POINT
Red border, square
Snaps to nearest vertex
FACE
Purple border, circle
Snaps to face surface
ALWAYS configure snappings before enabling measurements. The default
snapping array includes LINE, POINT, and FACE.
Measurement Lifecycle
All measurement types follow the same creation lifecycle via the
Createable interface:
1. Set enabled = true → activates vertex picker and pointer events
2. User clicks → create() → places first point / adds point
3. User clicks → create() → places additional points (area/volume/angle)
4. endCreation() → finalizes measurement, adds to list
5. cancelCreation() → discards in-progress measurement
6. delete() → removes measurement under cursor via raycasting
7. Set enabled = false → deactivates interaction
create() is called on each click. For LengthMeasurement it takes two
clicks (start + end). For AreaMeasurement it takes 3+ clicks. For
AngleMeasurement it takes exactly 3 clicks. For VolumeMeasurement,
points define the volume boundary.
endCreation() finalizes the current measurement. For AreaMeasurement,
a minimum of 3 points is required.
cancelCreation() discards any in-progress measurement without saving.
delete() uses raycasting against measurement bounding boxes to find
and remove the measurement under the cursor.
LengthMeasurement
Measures distance between two points. Supports free placement and edge
snapping.
Click three points to measure the angle at the middle point
Constants
Constant
Value
Purpose
ARC_SEGMENTS
32
Number of segments in the arc visualization
ARC_RADIUS_FACTOR
0.3
Arc radius relative to shortest arm
LABEL_OFFSET_FACTOR
1.4
Label distance from arc center
Workflow
Set enabled = true
User clicks first point → create() (click 1)
User clicks second point (vertex) → create() (click 2)
User clicks third point → create() (click 3) → endCreation()
Arc visualization with angle label appears
Setup Pattern (All Types)
ALWAYS follow this pattern when setting up any measurement type:
import * asOBCfrom"@thatopen/components";
import * asOBCFfrom"@thatopen/components-front";
// 1. Get the measurement componentconst lengths = components.get(OBCF.LengthMeasurement);
// 2. Assign world (REQUIRED before enabling)
lengths.world = world;
// 3. Configure snapping (optional — defaults include LINE, POINT, FACE)
lengths.snapDistance = 0.5;
lengths.pickerSize = 8;
// 4. Configure units and rounding (optional)
lengths.units = "m";
lengths.rounding = 2;
// 5. Configure color (optional)
lengths.color = newTHREE.Color(0xff0000);
// 6. Set mode
lengths.mode = "free";
// 7. Enable (ALWAYS last — this activates pointer events)
lengths.enabled = true;
NEVER enable a measurement before assigning world. The vertex picker
requires a valid world reference to perform raycasting.
Toggling Between Measurement Types
ALWAYS disable the current measurement before enabling another:
// Switch from length to area
lengths.enabled = false;
areas.enabled = true;
NEVER have multiple measurement types enabled simultaneously. They share
pointer events and will conflict.
Deleting Measurements
// Delete measurement under cursor (interactive)
lengths.delete();
// Delete all measurements of a type
lengths.list.clear(); // Clears all length measurements
Disposal
ALWAYS dispose measurement components when no longer needed:
// Dispose a specific measurement type
lengths.dispose();
// Or let components.dispose() handle all cleanup
components.dispose();
dispose() clears the vertex picker, all DataSets (list, lines, fills,
labels, volumes), and disposes all materials. NEVER use a measurement
instance after calling dispose().
Clipping Plane Integration
Measurements support clipping plane visibility:
lengths.applyPlanesVisibility(planes);
This updates all visual elements (lines, fills, volumes) to respect the
provided clipping planes.
Critical Rules
ALWAYS assign world before setting enabled = true.
ALWAYS disable one measurement type before enabling another.
ALWAYS call dispose() or components.dispose() on cleanup.
ALWAYS call endCreation() to finalize a measurement. Without it,
the measurement stays in preview state.
ALWAYS call cancelCreation() to discard an in-progress measurement
cleanly. Do not just disable — this leaks preview elements.
NEVER enable multiple measurement types simultaneously.
NEVER use measurement instances after dispose().
NEVER forget to set mode before enabling — the default mode may
not match the desired interaction.
NEVER set Measurement.valueFormatter after measurements are
already created — existing labels will not update retroactively.
NEVER skip snapping configuration when precision matters — default
snap distance may be too large or too small for your model scale.
Reference Files
references/methods.md — Measurement base class
API, LengthMeasurement, AreaMeasurement, VolumeMeasurement,
AngleMeasurement full method reference
