3D Modelle

Alpha

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

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.

Zustandskonfiguration

Die Zustandskonfiguration ist eine Konfiguration im JSON-Format, welche die Zustände eines 3D-Models definiert. Ein Zustand bestimmt, welche Elemente ein- bzw. ausgeblendet werden sollen, sobald dieser Zustand eintritt. Die Konfiguration besteht aus einem states-Array, welches die verschiedenen state-Objekte enthält, welche wiederum die Zustände repräsentieren. Ein state besitzt eine ID, welche zur Identifizierung genutzt wird. Diese ID wird i.d.R. beim Klick auf eine toggle-Checkbox oder bei der Auswahl einer Variante kommuniziert. Darüberhinaus ist ein Label definierbar und Einstellungen zur Sichtbarkeit (visibility). Das visibility-Objekt kann die Eigenschaften show und hide enthalten, welche Arrays sind, in dem die Elemente des 3D-Modells definiert werden, welche ein- bzw. ausgeblendet werden sollen. Um die Elemente zu referenzieren werden deren interne Bezeichnungen genutzt (Definiert in der ModelDefinition des Viewer-Datensatzes, oder einsehbar, indem man das Model bspw. mit Blender öffnet).

Wird nun bspw. die Checkbox zur Sichtbarkeit des Ringlochs aktiviert (id 6_6), so werden die Elemente "fholeshow" und "fholeshow1" eingeblendet. Die Elemente "fholehide" und "fholehide1" werden ausgeblendet. Wählt man die Checkbox wieder ab, passiert das Inverse.

Zustandskonfiguration

{
  "states": {
    "0": {
      "id": "6_6",
      "label": "Ringloch",
      "visibility": {
        "show": {
          "0": "fholeshow",
          "1": "fholeshow1"
        },
        "hide": {
          "0": "fholehide",
          "1": "fholehide1"
        }
      }
    },
    "2": {
      "id": "7_6",
      "label": "Wheel",
      "visibility": {
        "show": {
          "0": "weshow",
          "1": "weshow1"
        },
        "hide": {
          "0": "wehide",
          "1": "wehide1"
        }
      }
    }
  }
}

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

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.

CSP

Wird die CSP nicht nur reported, sondern aktiv genutzt, müssen folgende Einträge ergänzt werden, sodass der 3D-Model Viewer seine Inhalte laden kann:

Direktive	Wert

Direktive	Wert
connect-src	"blob:"
worker-src	"blob:"