Model Structure Viewer Example

Table of Contents

• Preview
• What It Demonstrates
• User Flow
• Key Files
  • User Interface Components
  • Core Logic Classes

The Model Structure Viewer adds a synchronized tree panel to the base viewer. Users can inspect the loaded hierarchy, toggle node visibility, and keep tree state connected to objects in the Three.js scene.

Preview

What It Demonstrates

Use this example when you need a tree-driven model browser:

• build model or drawing tree nodes from the loaded data;
• expand useful levels automatically after a build;
• display node check state in a React tree;
• map checked, unchecked, and indeterminate nodes to scene visibility;
• keep drawing-sheet selection synchronized with the tree.

The shared ModelStructureViewer extends the selection-capable viewer and listens to tree nodeCheckStateChanged events. The React page owns the side panel and tree presentation.

User Flow

1. Load a model or drawing.
2. Browse the structure in the side panel.
3. Check or uncheck nodes to show and hide matching scene objects.
4. Select tree nodes or scene objects to keep structural and visual context aligned.

Key Files

User Interface Components

Source	Description
ModelStructureViewer react/src/pages/model-structure-viewer/ModelStructureViewer.tsx	Main page component. It creates the shared viewer, uploads models, renders a splitter layout, switches visualization status, and chooses the model or drawing tree container.
ModelStructureContainer react/src/features/model-structure-container/ModelStructureContainer.tsx	Displays a model structure tree with icons, selection, expansion, and checkboxes.
DrawingStructureContainer react/src/features/drawing-structure-container/DrawingStructureContainer.tsx	Displays drawing structure and sheet selection for drawing visualization mode.
Tree react/src/common/ui/tree/Tree.tsx	Wraps Ant Design tree UI and delegates conversion, selection, expansion, and check state to useTreeAdapter.
useTreeAdapter react/src/common/hooks/useTreeAdapter.ts	Converts shared TreeNode instances to UI nodes and mirrors checked, expanded, and selected keys into React state.
Canvas react/src/features/canvas/Canvas.tsx	Displays the viewport controlled by the shared viewer.
react/src/features/model-structure-container/	Displays the reusable model tree UI and connects it to the shared model structure.

Core Logic Classes

Source	Description
ModelStructureViewer shared/src/viewers/model-structure-viewer/ModelStructureViewer.ts	Extends SelectionHandlingViewer, expands newly built structures, and maps tree check-state changes to object3d.visible.
SelectionHandlingViewer shared/src/viewers/selection-handling-viewer/SelectionHandlingViewer.ts	Adds highlight managers to each visualization state so tree and scene selection can share the same state.
Tree and TreeNode shared/src/common/tree/	Store hierarchy, selection, expansion, check state, traversal helpers, and batched tree events.
ModelStructure and model nodes shared/src/features/model/structure/	Represent model hierarchy and keep each node connected to the Three.js object built for it.
DrawingStructure and drawing nodes shared/src/features/drawing/structure/	Represent drawing sheets, views, and converted drawing elements.