3D-Koordinaten-System

Released: March 27, 2021 - Last modified: November 1, 2023

3D-Koordinaten-System

Github-Repository: 3D Koordinatensystem in Nodejs

💡 Dieses Projekt ist im Zusammenhang mit der besonderen Lernleistung im Fach Informatik von Jannis Günsche entstanden.

Über das Projekt

Bei dieser Anwendung handelt es sich um ein webbasiertes 3D-Koordinatensystem, das eine Vielzahl von Aufgaben und Ergebnissen modellieren kann. Ursprünglich wurde es entwickelt, um während meiner Abiturzeit die Vorbereitung auf Mathematik-Klausuren zu unterstützen, und es entstand als Nebenprodukt meiner besonderen Lernleistung.

Die Anwendung bietet einige bemerkenswerte Merkmale, darunter die Möglichkeit, in Echtzeit kollaborativ über Websockets in einem gemeinsamen Koordinatensystem zu arbeiten und zu modellieren. Der Host kann die Steuerung übernehmen, was bedeutet, dass die Kameraposition und der Mauszeiger auf allen anderen Nutzern synchronisiert werden. Dies erleichtert das Hervorheben wichtiger Stellen in der Modellierung erheblich.

Der Nutzer kann auch Modellierungen exportieren und importieren, um die Arbeit lokal als Datei zu speichern. Dadurch können sie ihre Fortschritte problemlos sichern und später wieder laden.

Stack

Es handelt sich hier um eine MEN-Stack Applikation.

M: MariaDB (MySQL, etc) wurde aus Vereinfachung des Setups nicht benutzt
E: Express (NPM-Module)
N: Nodejs

Weitere Software, welche zum Einsatz kommt:

mysql (NPM-Module) wurde aus Vereinfachung des Setups nicht benutzt
nodemon (NPM-Module) aktuell unbenutzt, wurde nur bei der Entwicklung verwendet
socket.io (NPM-Module)
ThreeJS
ThreeJS: OrbitControls
ThreeJS: CSS3DRenderer & CSS3DObject
jQuery

Installation

npm install

Benutzung

Start server:

npm start

Kompatibilitätshinweis

Diese Webapplikation wurde unter folgenden Bedingungen entwickelt und ist somit automatisch dafür optimiert:

Opera Browser
Viewport von 2520x1309px

💡 Die Performance der 3D-Darstellung kann nach Hardware und Performance-Modus abweichen. Nicht ausreichende Rechenleistung kann dazu führen, dass der THREE WebGLRenderer und/oder der CSS3DRenderer während der Benutzung abstürzen kann.

Bekannte Probleme:

Firefox: CSS3D-Elemente werden nicht korrekt dargestellt
Chrome und Chromium: CSS3D-Elemente verursachen manchmal Grafik-Glitches, welche auch die Darstellung der Browser-Elemente und der Entwicklertools beeinflussen

Weitere Hinweise

Aktuell ist noch keine Logik implementiert, welche die geöffneten Räume schließt. D.h. auch nach dem vollständigen Verlassen eines Raumes kann dieser nicht mehr benutzt werden, da die Host-Rolle nicht neu vergeben wird.

Die Ordnerstruktur besitzt drei wichtige Ordner: Base, Index und API. Base beinhaltet den Kern des Frontends bzw. der Raum-Seite und Index die Index-Seite. Unter API findet man das stackspezifische Gegenstück für die Implementierung der Websockets, welches auf dem Frontend geladen werden kann. Diese Struktur entstand mit dem Hintergedanken diese Applikation auch in anderen Softwarestacks umzusetzen.