Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
W
web3dscans1
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 17
    • Issues 17
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Web3DScans
  • web3dscans1
  • Wiki
  • 3D Viewer

Last edited by Benno Schmidt Jul 15, 2022
Page history
This is an old version of this page. You can view the most recent version or browse the history.

3D Viewer

4.2 3D-Viewer

Autor: Isaak Lenth

Das 3D-Ansichtsfenster ist einer der Hauptbestandteile der Web-Anwendung. Innerhalb dieses Fensters soll der Nutzer die Handstücke und Bohrkerne untersuchen und anschauen können. Auch Anmerkungen/Hinweise mit verknüpften Kameraeinstellungen sind denkbar, welche der/die Nutzer:in wählen und sich anschauen kann. Für die praktische Web-basierte Umsetzung bietet sich die Verwendung einer geeigneten JavaScript-Bibliothek an.

Grundsätzlich sind verschiedene derartige Bibliotheken verfügbar, die sich hinsichtlich ihrer Funktionsumfänge, der konkret unterstützten Dateiformate und der funktionalen Komplexität unterscheiden. Im Rahmen des Projekt wurden insbesondere zwei Bibliotheken näher betrachtet und auf ihre Eignung hin geprüft, und zwar die Bibliotheken Three.js (https://threejs.org/) und der Modelviewer (https://modelviewer.dev/). Außerdem wurde ein Test-Prototyp erstellt, dessen Quellcode im Dateibereich des GitLab-Repositorys zu finden ist.

Three.js

Bei Three.js handelt es sich um eine umfangreiche Bibliothek in JavaScript zur Darstellung und Animierung von 3D Objekten. Dabei ist die Bibliothek so groß, dass die Möglichkeiten fast unbegrenzt sind. Die Bibliothek selbst ist in einzelne Module unterteilt, welche je nach Nutzung hinzugeladen werden können. Dabei handelt es sich um diverse Dateiformate welche zusätzlich unterstützt werden können, also auch die Möglichkeiten die Physik von Objekten zu simulieren und die Objekte möglichst detailgetreu darzustellen. Auch Shader oder Lichtumgebungen können eingefügt und genutzt werden, um den Nutzer ein deutlich besseres Nutzererlebnis zu bieten. Three.js gibt dem Darsteller die volle Kontrolle um eine 3D Scene darzustellen. Dabei ist allerdings auch zu erwähnen das Three.js out of the Box nicht so schnell funktioniert. Um die Scene wie gewünscht darzustellen, ist deutlich mehr Vorarbeit von Nöten. Da die Bibliothek in viele Module unterteilt ist, ist sehr viel Variabilität vorhanden, allerdings erhöht dies auch die Komplexität und die Programmierung der Szenen. Mit etwas Einarbeitung und Hingabe lassen sich aber mit dieser Bibliothek die Szenen mit hoher Präzision und vielen Möglichkeiten darstellen. Auch das nahezu alle gängigen Dateiformate von der Bibliothek unterstützt werden, ist ein großer Pluspunkt welcher nicht zu vernachlässigen ist.

Der Modelviewer

Der Modelviewer ist eine vergleichsweise kleine Bibliothek. Allerdings bietet auch sie viele Möglichkeiten zur Darstellung der Szenen. Die gängigen Möglichkeiten wie Anmerkungen, Kamerafahrten, POV Positionen usw. können auch mithilfe dieser Bibliothek dargestellt werden. Hinzu kommt das die Entwicklung mit der Bibliothek deutlich einsteigerfreundlicher ist. Die Bibliothek kommt out of the Box mit einer vernünftigen Kameraführung und es sind nur wenige Handgriffe notwendig bis zur Darstellung einer ersten 3D Szene. Sie ist in vielerlei Hinsicht intuitiver und erleichtert vieles beim erstellen der Szenen. Allerdings sind dadurch die Möglichkeiten auch nicht so vielfältig wie bei Three.js. Einen deutlichen Nachteil hat die Bibliothek außerdem, da diese nur das Dateiformat GLTF unterstützt. Somit müssen die Modelle immer entweder in GLTF exportiert werden, oder falls dies nicht möglich ist, in GLTF umgewandelt werden. Dies ist natürlich mit zusätzlichem Aufwand verbunden und sollte berücksichtigt werden.

Insgesamt sind beide vorgestellten 3D Viewer sehr gute Bibliotheken. Während die eine recht Komplex, die Möglichkeiten dafür aber so gut wie Unbegrenzt sind, ist die andere vielleicht etwas leichter, hat allerdings dafür Limitierungen. Dies sollte bei er Wahl des 3D Viewers berücksichtigt werden. Allerdings können beide Viewer uneingeschränkt zur Darstellung der Bohrkerne und Handstücke empfohlen werden.

(Zurück zum Inhalt des Endberichts)

Clone repository
  • 3.3 3D Viewer
  • 3D Darstellungsparameter
  • 3D Formate
  • 3D Viewer Komponente
  • 3D Viewer
  • Anzeigefenster
  • Arbeitsumgebung
  • Aufgabenbeschreibung
  • BOM
  • Bohrprofil Anzeige
  • CrossReferencer
  • Desktop und mobile Version
  • Endbericht
  • Generierung der 3D Modelle
  • Geodatengrundlage beim HLNUG
View All Pages