| Info | ||
|---|---|---|
| ||
| Diese Komponente befindet sich noch im Alpha-Zustand. Gesichtspunkte können sich bis zur Release Version verändern. |
component-3d-viewer kann genutzt werden, um 3D-Modelle in Brandbox einzubinden. component-3d-viewer nutzt die JavaScript Bibliothek three.js (https://threejs.org/), um 3D-Modelle zu laden und zu manipulieren.
Kompatibilität
component-3d-viewer nutzt den GLTFLoader. Entsprechend sind 3D-Modelle in den Formaten .gltf und .glb kompatibel. Genauere Informationen zu kompatiblen Extensions sind unter https://threejs.org/docs/#examples/en/loaders/GLTFLoader einsehbar.
Konfiguration
Ein Modell Viewer wird über einen Viewer-Datensatz auskonfiguriert (ThreeDimensionalViewer). Ein Solcher Datensatz besitzt folgende Eigenschaften.
| Eigenschaft | Bezeichnung | Beschreibung |
|---|---|---|
| label | Bezeichnung des Datensatzes | Zeichenkette. Eine kurze Bezeichnung, um den Viewer-Datensatz einfacher identifizieren zu können. |
| modelFileId | Model | Ganzzahl. ID der Model-Datei. |
| modelDefinition | Modeldefinition | Zeichenkette. Die Definition der Elemente eines Models im JSON-Format. Derzeit ein flaches Array. |
| stateConfiguration | Zustandskonfiguration | Zeichenkette. Die Konfiguration der Zustände im JSON-Format. Diese Konfiguration muss ein "states"-Property beinhalten. Dieses Property ist ein Array aus Objekten, welche die Zustände repräsentieren. Näheres zur Zustandskonfiguration finden Sie in diesem Beitrag. |
Viewer
Der Viewer wird über ein zentrales JavaScript gesteuert (component-3d-viewer/src/ThreeDimensional/Viewer/js/viewer.js). Das JavaScript wird über ein script-Tag mit dem type "module" eingebunden und instanziiert. Der Konstruktor erwartet ein DOMElement, welches den Container für den 3D-Viewer bildet. Dieser Container sollte mit den entsprechenden data-attributes ausgestattet sein.
| Attribut | Beschreibung |
|---|---|
| data-viewer | Zeichenkette. Verschlüsselte ID des Viewer-Datensatzes. |
| data-viewer-identifier | Zeichenkette. Frei wählbarer Identifikator, um einen Kontext zu setzen. |
| data-model-path | Zeichnkette. Pfad zur öffentlich aufrufbaren Datei des 3D-Modells. |
| data-hdri-path | Zeichenkette. Pfad zur öffentlich aufrufbaren hdri-Datei. Dieses Attribute ist optional. Die Beleuchtung kann auch über Lichter aus der Szenenkonfiguraiton realisiert werden. |
| data-display-visibility-options | Boolescher Wert. Definiert, ob für die Zustände Checkboxen dargestellt werden sollen, mit denen man die Zustände an- bzw. abwählen kann. |
Diese Attribute werden automatisch gesetzt, wenn man den Container über die öffentliche Methode \Brandbox\ComponentThreeDimensionalViewer\ThreeDimensional\Viewer\Manager::getViewerContainer abruft. Wird ein Container selbstständig aufgebaut, sollten diese Attribute bedacht werden.
Nachdem die Attribute ausgelesen wurden, wir das 3D-Modell geladen. Wurde es erfolgreich geladen, wird ein Event ausgelöst (3dViewerOnLoaded). Dieses Event kann bspw. dazu genutzt werden, einen Zustand einzurichten, der nicht dem Standardzustand des Modells entspricht. Das kann natürlich nur gemacht werden, wenn das Modell erfolgreich geladen wurde. Es werden außerdem - abhängig der Konfiguration - weitere Dinge zur Szene initialisiert, wie bspw. Kameraeinstellungen, die Steuerung und die Beleuchtung (HDRI, Lichtquellen). Diese Dinge können über die Szenenkonfiguration definiert werden.
Eigenschaften wie bspw. die Zustandskonfiguration werden von dem JavaScript anhand der verschlüsselten Viewer ID von der Brandbox abgefragt. Das JavaScript bietet öffentliche Methoden an, um mit dem Modell bzw. der Szene zu interagieren.