... | ... | @@ -16,15 +16,15 @@ Zu Beginn des Projekts wurden einige Konzeptzeichnungen erstellt und erstest Fee |
|
|
|
|
|
## UI Zeichnungen
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
Die Idee war, den Konfigurator bewusst simpel zu halten, damit die Nutzer sich nicht zu sehr mit dem UI beschäftigen müssen und nebenher noch Dinge über sich erzählen können. Die kognitive Last sollte also möglichst gering gehalten werden.
|
|
|
|
|
|

|
|
|

|
|
|
|
|
|
Der Avatar sollte mit verschiedenen, vordefinierten Kleidungsstücken ausgestattet werden können.
|
|
|
|
|
|

|
|
|

|
|
|
|
|
|
Die Farbe der Körperteile sollte sowohl schnell mit vorgegebenen Farben am Rand verändert werden können, als auch auf Wunsch mit einem Farbregler individuell angepasst werden können.
|
|
|
|
... | ... | @@ -32,11 +32,11 @@ Die Farbe der Körperteile sollte sowohl schnell mit vorgegebenen Farben am Rand |
|
|
|
|
|
Technisch sollte sich der Konfigurator an dem bereits existierenden 3D-Viewer orientieren. Dieser nutzt SocketIO um die Kameraposition des Moderators an alle Clients zu schicken. Auf Grund des Feedbacks aus der ersten Präsentation musste dieses Konzept allerdings deutlich erweitert werden.
|
|
|
|
|
|

|
|
|

|
|
|
|
|
|
Um eine Idee für die Umsetzung zu erhalten wurde zuerst der 3D-Viewer Analysiert. Auf Basis dessen wurde nun ein eigenes Konzept für den Konfigurator erstellt:
|
|
|
|
|
|

|
|
|

|
|
|
|
|
|
In diesem Konzept ist allerdings das Feedback aus der ersten Präsentation noch nicht eingearbeitet.
|
|
|
|
... | ... | @@ -58,7 +58,7 @@ Ursrünglich war geplant, den Server nicht zu verändern um Merge-Konflikten vor |
|
|
|
|
|
Um den Avatar Configurator anzuzeigen wird, wie beim 3D Viewer ein IFrame Objekt genutzt. Dieses lädt beim Aufruf des Konfigurators in Accelerator die entsprechende Hauptseite des Konfigurators: `public/AvatarConfigurator/index.html`
|
|
|
|
|
|

|
|
|

|
|
|
|
|
|
Um dem Konfigurator mitzuteilen, wer der eigene Nutzer ist, in welchem Raum er sich befindet und welcher SocketIO Socket zur Kommunikation verwendet werden soll, werden von `public/js/uiEvents.js` die Funktionen `injectUser`, `injectRoomImIn` und `injectSocket` aufgerufen. Diese werden wiederum durch `public/AvatarConfigurator/main.js` im IFrame `window` Objekt definiert.
|
|
|
|
... | ... | |