skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

thatopen-impl-highlighting

Coordinate Highlighter, Hoverer, Outliner, and Mesher in a ThatOpen BIM viewer.

17|1|Updated Mar 20, 2026
Search Tags:#outline#three.js#selection#hover#postprocessing#bim#mesher
One-click install
npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-impl-highlighting-impertio-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: thatopen-impl-highlighting
Source: https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package/tree/main/skills/source/thatopen-impl/thatopen-impl-highlighting
Command: npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-impl-highlighting-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents broken or inconsistent element selection and highlighting in a ThatOpen BIM viewer by providing a correct, production-grade setup path for Highlighter, Hoverer, Outliner, and Mesher coordination.

Core Features & Use Cases

  • Click selection with styles: Implement Highlighter-based element selection with named visual styles, multi-select modes, exclusion filters, and zoom-to-selection.
  • Hover feedback without corrupting selection state: Use Hoverer for cursor/visual feedback while keeping selection state exclusively managed by Highlighter.
  • Post-processing outlines: Configure Outliner so outlined rendering matches Highlighter style names and works only with the correct renderer configuration.
  • Fragment-to-mesh conversion: Convert highlighted fragments into standard THREE.Mesh instances via Mesher for custom rendering, exports, or manipulation, with explicit lifecycle handling.
  • Performance-aware picking guidance: Provide decision points for when GPU picking (FastModelPicker) is justified for very large models.

Quick Start

Use thatopen-impl-viewer first, then create a Highlighter, call setup({ world }), create matching style(s), enable Outliner only with PostproductionRenderer and postproduction enabled, and finally use highlightByID or highlight for selection while disposing any Mesher meshes manually.

Frequently Asked Questions about thatopen-impl-highlighting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement click selection and hover highlighting in a ThatOpen BIM viewer?▼

Implement click selection and hover highlighting by configuring the Highlighter for element selection and the Hoverer for cursor feedback. You must call Highlighter setup with the world object before creating named visual styles for your BIM viewer.

Why are my postprocessing outlines not rendering in Three.js?▼

Postprocessing outlines require a PostproductionRenderer with postproduction explicitly enabled. Additionally, the Outliner style names must exactly match the named styles configured in the Highlighter to render correctly.

How do I convert selected BIM fragments into reusable Three.js Mesh objects?▼

Convert selected BIM fragments into reusable THREE.Mesh instances using the Mesher component. This enables custom rendering and exports, but requires explicit manual disposal of the generated mesh outputs to manage memory.

Do I need a specific renderer to use Outliner with the Highlighter?▼

Yes, the Outliner requires a PostproductionRenderer with postproduction enabled to function. Standard Three.js renderers lack the necessary postprocessing pipeline to display the outline effects wired through the Highlighter.

What is the best way to select BIM elements by ID without breaking existing selection state?▼

Use the Highlighter's highlightByID or highlight methods for ID-based selection. The Hoverer component manages visual cursor feedback independently, ensuring your existing element selection state remains uncorrupted during user interactions.

When should I use GPU picking for element selection in large BIM models?▼

Use GPU picking via FastModelPicker for very large BIM models where standard element selection causes performance bottlenecks. This performance-aware approach justifies the complexity only when interacting with massive model geometries.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
17

thatopen-impl-highlighting

Enable element highlighting, selection, and outline rendering in a ThatOpen BIM viewer.

Official
Advanced
Impertio-StudioImpertio-Studio
11

threejs-syntax-geometries

Create and manipulate 3D geometry with Three.js BufferGeometry and InstancedMesh.

Official
Intermediate
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-impl-ifc-viewer

Load and visualize IFC/BIM models in Three.js scenes.

Community
Advanced
NITRR-OfficialNITRR-Official
4

threejs-interaction

Implement raycasting, camera controls, and object selection in Three.js applications.

Official
Advanced