reperio.View

3D BREP-Viewer für CAD-Werkstücke (STEP-Dateien).

Überblick

• Web-basierter 3D-Viewer für STEP-Dateien
• Vollständige BREP-Topologie via opencascade.js v2 (Full OCCT, ~222 MB WASM)
• 9 Messtypen direkt auf BREP-Geometrie
• Baugruppen-Support mit Modell-Baum und Sichtbarkeits-Toggles
• Eingebettet in reperio.Parts als iframe (/3d/{Bmn})
• Pixel-genaues Corporate Design (thyssenkrupp)

Tech Stack

Technologie	Version	Zweck
TypeScript	5.x	Sprache
Vite	6.x	Build-Tool
three.js	0.170+	3D-Rendering
opencascade.js	2.x	OCCT BREP-Engine (~222 MB WASM)

Schnellstart

git clone https://github.com/swissYoshi/reperio-viewer-brep.git
cd reperio-viewer-brep

npm install
npm run dev          # -> http://localhost:3001

STEP-Datei laden: URL-Parameter ?url=http://localhost:5001/api/step/BEISPIEL-BMN

Build & Integration

npm run build        # -> dist/

• base: '/viewer/' in vite.config.ts
• Deployment: dist/ nach reperio-parts/src/web/Reperio.Parts.Api/wwwroot/viewer/ kopieren
• Einbettung: iframe in Blazor-Seite /3d/{Bmn}
• COOP/COEP Headers erforderlich für SharedArrayBuffer (konfiguriert in reperio-parts Program.cs)

Projektstruktur

src/
  main.ts              -- Einstiegspunkt, URL-Parameter, App-Init
  index.html           -- HTML-Grundgerüst
  style.css            -- Corporate Design CSS
  occt/
    OcctManager.ts     -- opencascade.js Lifecycle, GC-Helper
    StepLoaderBrep.ts  -- STEP-Import mit STEPControl_Reader
    Tessellator.ts     -- BREP -> three.js Mesh (+ FaceMap)
    types.ts           -- TypeScript-Typen, MeasureResult, Enums
  viewer/
    SceneManager.ts    -- three.js Scene, Lighting, Raycasting
    Controls.ts        -- Kamera-Steuerung, Standard-Ansichten (ISO, Front, etc.)
  measure/
    BrepPicker.ts      -- Face/Edge-Selektion via Raycast + FaceMap
    MeasureEngine.ts   -- 9 OCCT-Messmodi
    MeasureOverlay.ts  -- HTML-Labels für Messergebnisse
    MeasureTool.ts     -- Mess-Workflow-Steuerung
  ui/
    Toolbar.ts         -- Header (blau) + Controlbar (grau)
    Sidebar.ts         -- Mess-Sidebar mit Warnung
    SettingsPanel.ts   -- Darstellungs-Einstellungen
    ModelTree.ts       -- Baugruppen-Baum mit Sichtbarkeits-Toggles
docs/
  adr/
    001-opencascade-js-full-brep.md
    002-assembly-decomposition.md

Features

Ansichten

ISO, Vorne, Hinten, Oben, Unten, Links, Rechts -- steuerbar über Toolbar-Buttons.

Messungen (9 Modi, experimentell)

1. Punkt-zu-Punkt Distanz
2. Kantenlänge
3. Radius/Durchmesser (Zylinder/Kegel/Kugel) -- Fläche
4. Radius/Durchmesser -- Kante
5. Winkel zwischen Flächen
6. Winkel zwischen Kanten
7. Winkel Fläche-Kante
8. Abstand paralleler Flächen
9. Allgemeiner Abstand (Punkt-zu-Punkt Fallback)

Der Messmodus ist standardmässig deaktiviert. Aktivierung über den URL-Parameter ?measure=1, gesteuert durch das Admin-Setting viewer.measureEnabled in reperio-parts.

Baugruppen

Automatische Erkennung von Baugruppen. Modell-Baum mit Sichtbarkeits-Toggles pro Komponente (siehe ADR-002).

Vite-Konfiguration

opencascade.js v2 nutzt Emscripten Dynamic Linking. Das Standard-Plugin vite-plugin-wasm funktioniert damit nicht.

Stattdessen wird in vite.config.ts folgende Konfiguration benötigt:

export default defineConfig({
  root: 'src',
  base: '/viewer/',
  build: {
    target: 'es2020',
  },
  assetsInclude: ['**/*.wasm'],
  optimizeDeps: {
    exclude: ['opencascade.js'],
  },
})

Bekannte Eigenheiten (Gotchas)

• vite-plugin-wasm funktioniert nicht mit opencascade.js v2. Stattdessen assetsInclude: ['**/*.wasm'] und optimizeDeps: { exclude: ['opencascade.js'] } verwenden.
• OCCT-Typen sind über mehrere WASM-Module verteilt. TypeScript sieht die Vererbung nicht, daher sind any Casts nötig.
• STEPControl_Reader_1 erbt von XSControl_Reader (anderes Modul). Zugriff auf geerbte Methoden erfordert as any.
• GCPnts_AbscissaPoint.Length_3(adaptor, tol) braucht 2 Argumente.
• gp_Pln.Distance_1(point) -- nicht Distance().
• .delete() ist Pflicht für alle OCCT-Objekte (Emscripten Heap-Management).
• Statische Methoden ohne Überladung haben kein _1 Suffix: BRep_Tool.Pnt(vertex), nicht Pnt_1.
• SharedArrayBuffer erfordert COOP/COEP Headers (konfiguriert in reperio-parts Program.cs).
• FaceMap: triangleIndex -> faceIndex Mapping ist essentiell für korrektes Raycast auf BREP-Topologie.

ADRs

#	Titel	Status
001	opencascade.js v2 Full BREP Build	Akzeptiert
002	Assembly-Dekomposition via TopoDS_Iterator	Akzeptiert

Siehe docs/adr/ für Details.

Verwandte Repositories

Repository	Beziehung
reperio-parts	Host-Anwendung, lädt Viewer als iframe
reperio-embedding-service	ML-Service für Ähnlichkeitssuche
reperio-viewer	Vorgänger (occt-import-js, abgelöst)