Entities und Components

Als nächtes sehen wir uns die Eigenschaften der Entities an.

Wir haben bereits erfahren, dass Elemente in A-Frame wie <a-box> als Entites bezeichnet werden.

Auch haben wir festgestellt, dass Entities Eigenschaften besitzen wie Größe, Position oder Farbe. Diese werden als Components bezeichnet.

Es gibt eine sehr große Zahl an Components, über die man sich auf der A-Frame-Seite informieren kann.

Wir werden uns hier aber nur einige Beispiele anschauen.

https://aframe.io/docs/1.1.0/introduction/entity-component-system.html

Position (Position)

Eine der wichtigsten Components ist Position.

Wie der Name schon sagt, wird damit die Position im Raum des Objektes festgelegt.

Dabei werden die drei Koordinatenpunkte x, y, z definiert.

z.B.
<a-box position="0 1 -1"></a-box>

Die erste Zahl steht für die X-Achse, hier eine 0.
Die zweite Zahl steht für die Y-Achse, hier eine 1.
Die dritte Zahl für die Z-Achse, hier eine -1.

Ausganspunkt ist immer der Nullpunkt im Raum. Das Objekt wird dann im Verhältnis zu diesem Nullpunkt im Raum verschoben.

Gibt man keine Zahlen an, ist der Default-Wert für alle 0.

Weitere Informationen finden sich auf der A-Frame Seite:
https://aframe.io/docs/1.1.0/components/position.html

Größe (Scale)

Ebenfalls eine oft verwendete Component ist die Größe eines Entites, die Scale.

Diese funktioniert ähnlich, wie die Position, nur das hier auf den drei Achsen x, y, und z die Breite, Länge und Höhe eines Entity bestimmt werden.

z.B.
<a-box scale="1 1 2"></a-box>

Die Box in diesem Beispiel wäre also nun um das Doppelte in der z-Achse gestreckt. Wenn man komplexte 3D-Objekte verwendet, werden diese meistens nicht gestreckt.

Man belässt die Werte bei Scale für 3d Objekte also für alle drei Achsen meist einheitlich. Soll ein Objekt nur halb so groß dargestellt werden, würde man dies wie folgt darstellen:
<a-box scale="0.5 0.5 0.5"></a-box>

Weitere Informationen finden sich auf der A-Frame Seite:
https://aframe.io/docs/1.1.0/components/scale.html

Rotation (Rotation)

Häufig möchte man ein Entitity im Raum rotieren.

Dies funktioniert ähnlich wie bei Position mit Rotation über die drei Achsen x, y und z.

z.B.
<a-box rotation="45 90 180"></a-box>
Die erste Zahl 45 steht für die X-Achse.
Die zweite Zahl 90 für die Y-Achse.
Die dritte Zahl 180 für die Z-Achse.

Die Werte geben die Gradzahl an, mit der das Objekt über die jeweilige Achse rotiert wird, also von 0 bis 360°.

Weitere Informationen finden sich auf der A-Frame Seite:
https://aframe.io/docs/1.1.0/components/rotation.html

Farbe (Color)

Die Farbe eines Objektes lässt sich über die Component Color verändern.

Dabei wird das Objekt mit einer Farbe eingefärbt. Wenn das Objekt bereits eine eigene Farbe mitbringt, z.B. weil Sie es heruntergeladen oder in Blender erstellt und eingefärbt haben, ist diese Component meist nicht erforderlich.

Die Default-Farbe ist weiß, so das Entities ggf. vor dem weißen Hintergrund nicht sichtbar werden. Ändern Sie also bei einem weißen Hintergrund die Farbe Ihres Objektes.

Sie haben die Möglichkeit Farben in zwei Formen anzugeben.

Entweder durch spezifische englische Namen für Farben, z.B. Red für Rot.
<a-box>color="red"</a-box>

Alternativ kann man auch den HTML Farbcode verwenden, z.B. #EF2D5E für Rot:
<a-box>color="#EF2D5E"</a-box>
Dieser bringt eine bedeutend größere Auswahl an Farben mit sich.

Die spezifischen HTML-Farbcodes kann man auf verschiedenen Seiten finden, z.B.:

https://www.w3schools.com/colors/colors_picker.asp

Es lassen sich für Entities nicht nur Farben wählen, sondern auch richtige Texturen.
Weitere Informationen zu dem umangreichen Thema Materials finden Sie auf der A-Frame-Seite:

https://aframe.io/docs/1.1.0/components/material.html