reperio.Viewer

Standalone 3D STEP-Viewer für den Browser. Entwickelt als Ergänzung zu reperio.Parts, aber unabhängig nutzbar.

Features

• STEP-Dateien laden (Drag & Drop, URL-Parameter, JS-API)
• 3D-Rendering mit three.js (Phong-Shading, Kanten)
• OrbitControls (Drehen, Zoomen, Verschieben)
• Standard-Ansichten: ISO, Front, Back, Top, Bottom, Left, Right (ViewCube)
• Darstellung: Solid / Wireframe / Solid+Edges, Transparenz, Hintergrundfarbe
• Messwerkzeuge: Punkt-zu-Punkt Distanz mit Vertex-Snap
• Modell-Baum: Baugruppen-Hierarchie mit Sichtbarkeits-Toggle
• Offline-fähig: Alle Assets lokal, kein CDN

Quickstart

npm install
npm run dev

Öffnet http://localhost:3000 — STEP-Datei per Drag & Drop laden.

Build

npm run build

Erzeugt dist/ mit statischen Dateien. Kann von jedem Webserver geliefert werden.

Integration

URL-Parameter

viewer.html?file=https://example.com/model.step

iframe

<iframe src="viewer.html?file=path/to/model.step" width="800" height="600"></iframe>

JS-API

const viewer = window.reperioViewer;
viewer.loadUrl('path/to/model.step');
viewer.setView('iso');
viewer.enableMeasure(true);
viewer.setDisplayMode('solid+edges');
viewer.setBackground('gray');
viewer.setTransparency(0.3);

Technologie-Stack

Komponente	Technologie
Sprache	TypeScript 5
3D-Rendering	three.js
STEP-Parser	occt-import-js (WASM)
Build	Vite 6

Projektstruktur

src/
├── viewer/          Scene, Camera, STEP-Loader, Controls, ViewCube
├── measure/         Messwerkzeuge, Snap-Helper, Overlay
├── ui/              Toolbar, FileDropZone, ModelTree, StatusBar
├── main.ts          App-Einstiegspunkt + JS-API
└── style.css        Styling
test-models/         STEP-Testdateien
docs/adr/            Architecture Decision Records

Test-Modelle

Im Ordner test-models/ liegen STEP-Dateien zum Testen. Das Skript generate_models.py kann mit pythonocc-core weitere werkstücktypische Modelle erzeugen.

Lizenz

Proprietär — thyssenkrupp rothe erde