ModelViewer Details

Idee:

Zeige 3DModell mit Referenzelementen an, welche einen Rückschluss auf die reale Größe zulassen.

Umsetzung:

Grundlage ist die JavaScript-Bibliothek model-viewer (https://modelviewer.dev/). Die Verwendung wird durch das JavaScript-File rock3Dviewer.js und durch Elemente in der index.html, bzw. derzeit in indexBIG.html und indexSM.html, ermöglicht. Im Folgenden wird dafür indexXYZ.html verwendet - je nach Entwicklungsstand muss dies gedanklich durch die korrekte Datei ersetzt werden.

Wesentliche Elemente in der indexXYZ.html (für weitergehende Details siehe https://modelviewer.dev/):

1.) Die "hotspots" (in den Tags <button slot = "hotspot-...>) bilden Verwendbare 3D-Positionen ("dot") bzw. Ebenen ("dim") in dem 3D-Raum, in welchem auch das 3DModell angezeigt wird. Diese "hotspots" werden im Weiteren für die Anfangs- und Endpunkte der Bemaßungslinien sowie deren Beschriftung (Länge der Linie Bezogen auf die realen Ausdehnungen der dargestellten Probe) verwendet.

2.) Die Grundlage für die Bemaßungslinien bildet der Inhalt des Tags , also die fünf Tags , welche dynamisch durch Funktionen in der rock3DViewer.js verwendet/manipuliert werden - z.B. um sie auszublenden, wenn sie durch Drehung des 3DModells für die Betrachter "hinter" dem 3DModell der Probe sind.

3.) Weiterhin befinden sich hier auch die Elemente zur Beeinflussung gewisser Darstellungsparameter (siehe Ausarbeitung von Katharina Fritzler).

4.) WICHTIG: Die Bemaßungslinien können mit einer Checkbox ein- und ausgeblendet werden. Um zu verhindern, dass gewisse Kontrollelemente zur Beeinflussung gewisser Darstellungsparameter zusammen mit den Bemaßungslinien ausgeblendet werden, wurden Elementen (bzw. dem HTML-Tags) das Attribut "notHideWithDimensions" zugefügt werden (ohne Wert, d.h. kein Gleichheitszeichen hinter Attributnamen!). In der rock3DViewer.js wird das Vorhandensein/Nichtvorhandensein dieses Attributs dann als Filter für das an die Bemaßungslinien gebundene Ein-/Ausblendeverhalten verwendet.

Wesentliche Elemente in rock3DViewer.js (für weitergehende Details siehe https://modelviewer.dev/):

1.) Das oben angesprochene Attribut notHideWithDimension wird in

modelViewer.querySelectorAll('button:not([notHideWithDimensions])')

verwendet, um die angesprochene gemeinsame Ausblendung mit den Bemaßungslinien zu verhindern.

2.) Die Funktion

const renderSVG = () => { drawLine(dimLines[0], modelViewer.queryHotspot('hotspot-dot+X-Y+Z'), modelViewer.queryHotspot('hotspot-dot+X-Y-Z'), modelViewer.queryHotspot('hotspot-dim+X-Y')); drawLine(dimLines[1], modelViewer.queryHotspot('hotspot-dot+X-Y-Z'), modelViewer.queryHotspot('hotspot-dot+X+Y-Z'), modelViewer.queryHotspot('hotspot-dim+X-Z')); drawLine(dimLines[2], modelViewer.queryHotspot('hotspot-dot+X+Y-Z'), modelViewer.queryHotspot('hotspot-dot-X+Y-Z'), modelViewer.queryHotspot('hotspot-dim+Y-Z')); drawLine(dimLines[3], modelViewer.queryHotspot('hotspot-dot-X+Y-Z'), modelViewer.queryHotspot('hotspot-dot-X-Y-Z'), modelViewer.queryHotspot('hotspot-dim-X-Z')); drawLine(dimLines[4], modelViewer.queryHotspot('hotspot-dot-X-Y-Z'), modelViewer.queryHotspot('hotspot-dot-X-Y+Z'), modelViewer.queryHotspot('hotspot-dim-X-Y')); };

verwaltet die Anzeige der fünf Bemaßungslinien. Die inneren Aufrufe von

drawLine("Linie","StartPunkt","EndPunkt","Sichtbarkeitshorizont")

sind wie folgt zu verstehen: Das in der indexXYZ.html vordefinierte HTML-svg-Element "Linie" wird von "StartPunkt" bis "EndPunkt" gerendert. Dabei kann optional mit "Sichtbarkeitshorizont" eine in der indexXYZ.html vordefinierte Ebene ("hotspot-...-dim") verwendet werden, um festzulegen, dass diese Linie nur auf einer Seite der Ebene sichtbar ist.