Base Model Viewer Example

Table of Contents

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

The Base Model Viewer is the smallest complete React example. It loads MTKWEB model archives or folders, decides whether the loaded file contains model or drawing geometry, builds the matching scene structure, and displays it in a Three.js viewport.

Preview

What It Demonstrates

Use this example when you need to learn the default load-and-display flow:

• accept either a model archive or a directory selected in the browser;
• read model files through the shared file-source and ModelLoader layer;
• choose model or drawing visualization from the loaded data;
• build a ModelStructure or DrawingStructure;
• add the structure's scene root to Viewport.scene.roots.objects;
• switch the viewport between 3D model mode and 2D drawing-sheet mode.

The shared BaseModelViewer owns the loaded Model, the available visualization states, the active drawing sheet, the structure builders, and the viewport. The React page owns only page layout, upload controls, and the connection between a mounted canvas and the shared viewport instance.

User Flow

1. Open the Base Model Viewer card.
2. Load an MTKWEB archive or a model folder.
3. If model geometry is available, the viewer shows the 3D model.
4. If drawing geometry is available, the viewer can show drawing sheets in a 2D viewport.
5. Loading another model clears the current scene and rebuilds the active visualization.

Key Files

User Interface Components

Source	Description
BaseModelViewer react/src/pages/base-model-viewer/BaseModelViewer.tsx	Main page component. It creates the shared BaseModelViewer instance with useDisposableInstance and renders upload controls, visualization switching, drawing-sheet selection, and the canvas.
ModelFilePickerGroup react/src/features/model-file-picker-group/ModelFilePickerGroup.tsx	Provides file and directory upload actions for MTKWEB archives and model folders, prevents concurrent model loads, and reports load results. It is shared by most local-file viewer examples.
VisualizationStatusSwitcher react/src/features/visualization-status-switcher/VisualizationStatusSwitcher.tsx	Shows the available visualization modes reported by the viewer and calls back when the user switches between model and drawing display.
LabeledSelect react/src/common/ui/labeled-select/LabeledSelect.tsx	Displays the drawing-sheet selector when the current model contains more than one sheet.
Canvas react/src/features/canvas/Canvas.tsx	Mounts the Three.js canvas and attaches it to the shared Viewport.
useBaseVisualizationContext react/src/features/visualization-context/useBaseVisualizationContext.ts	Bridges viewer events into React state for status, available visualizations, current sheet, and sheet switching.

Core Logic Classes

Source	Description
BaseModelViewer shared/src/viewers/base-model-viewer/BaseModelViewer.ts	Owns the Viewport, ModelLoader, active Model, visualization state, drawing sheets, model and drawing structure builders, and scene rebuild lifecycle. Its isModelEmpty() method checks both model roots and drawing presence for example UI feedback.
VisualizationStatus shared/src/viewers/base-model-viewer/BaseModelViewer.ts	Defines the viewer states: empty, model visualization, and drawing visualization.
ModelLoader shared/src/features/model/import/ModelLoader.ts	Reads model files from local or remote FileSource inputs or browser File inputs and returns an MTK Web Model.
ModelStructureBuilder and ModelStructure shared/src/features/model/structure/	Convert model data into tree nodes connected to Three.js objects.
DrawingStructureBuilder and DrawingStructure shared/src/features/drawing/structure/	Convert drawing sheets and views into a drawing tree and scene objects.
Viewport shared/src/features/viewport/Viewport.ts	Owns Three.js scene integration, camera mode, controls, renderer updates, raycasting, material management, and resource cleanup.
ModelVisualizationChecker and DrawingVisualizationChecker shared/src/viewers/base-model-viewer/checkers/	Detect whether the loaded model or drawing contains visualizable data before enabling each mode.