Arbeiten mit Widgets > 3D > 3D-Bild
  
3D-Bild
Was macht dieses Widget?
Das Widget "3D-Bild" ermöglicht es Ihnen, ein 3D-Bild in der 3D-Canvas eines AR-Erlebnisses einzufügen. Zu den unterstützten Dateiformaten gehören:
• .png
• .jpg, .jpeg
• .svg
• .gif
• .bmp
Wann sollte ich dieses Widget verwenden?
Verwenden Sie ein Bild-Widget, wenn Sie einem Benutzer grafische Inhalte in 3D oder Bilder zeigen möchten. Wenn Sie beispielsweise versuchen, einem Servicetechniker zu beschreiben, wie ein verschmutzter Luftfilter aussieht, kann es einfacher sein, ein Bild eines verschmutzten Luftfilters einzufügen.
Gibt es besondere Eigenschaften, Dienste, Ereignisse oder Aktionen?
Eine Liste von allgemeinen Widget-Eigenschaften, -Diensten und -Ereignissen finden Sie unter Allgemeine Widget-Eigenschaften, -Dienste und -Ereignisse.
Die folgende Tabelle ist eine Liste von Eigenschaften, die für dieses Widget spezifisch sind.
Eigenschaft
JavaScript
Typ
Beschreibung
Ressource
src
string
Ressource, die für das 3D-Bild verwendet wird.
Sie können einen der folgenden Schritte ausführen, um ein Bild einzuschließen:
• Klicken Sie neben dem Feld auf , um eine neue Bilddatei hinzuzufügen.
• Geben oder fügen Sie eine Bild-URL direkt in das Feld ein.
• Wählen Sie im Dropdown-Menü ein Bild aus.
Höhe
height
number
Höhe des 3D-Bilds in Metern. Der Mindestwert ist 0.04 Meter.
Breite
width
number
Breite des 3D-Bilds in Metern. Der Mindestwert ist 0.04 Meter.
Klasse
class
string
Die dem Widget zugewiesene Klasse.
Die folgenden CSS-Eigenschaften werden derzeit unterstützt:
• background-color – legt die Füllfarbe des Bildes fest
• border-color – legt die Farbe des Rands um das Bild fest
• border-style – legt den Stil des Rands um das Bild fest
• border-radius – rundet die Ecken des Rands um das Bild ab
• border-width – legt die Strichstärke des Rands um das Bild fest
• border – kombiniert border-colorborder-style und border-width
• padding – wendet Auffüllen außerhalb des Bildes an
Klicken Sie beispielsweise im Fensterbereich PROJEKT, unter STILE, auf Anwendung, und geben Sie im Editor Folgendes ein:
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
Angegebene Farben müssen CSS-Farben sein. Wenn Sie sich bezüglich gültiger CSS-Farben nicht sicher sind, können Sie im Internet nach "CSS-Farben" suchen.
Geben Sie anschließend im Feld Klasse des 3D-Bildes Folgendes ein: my-image. Dies bezieht sich auf Inhalt, der unter Stile > Anwendung hinzugefügt wurde.
Skala
scale
string
Skala des 3D-Bildes.
X-Koordinate
x
number
Position des Bildes auf der X-Achse.
Y-Koordinate
y
number
Position des Bildes auf der Y-Achse.
Z-Koordinate
z
number
Position des Bildes auf der Z-Achse.
X-Drehung
rz
number
Rotation des Bildes um die X-Achse.
Y-Drehung
ry
number
Rotation des Bildes um die Y-Achse.
Z-Drehung
rz
number
Rotation des Bildes um die Z-Achse.
Billboard
billboard
boolean
Dreht ein Widget um seine Mitte, so das es immer dem Betrachter zugewandt ist. Es wird nach dem Bildschirm ausgerichtet.
Verdeckend
occlude
boolean
Wenn diese Option ausgewählt ist, ist die Geometrie eines Widgets unsichtbar, aber gleichzeitig werden alle weiteren Augmentationen ausgeblendet, die in der 3D-Szene dahinter liegen.
Deshalb wird dort, wo das verdeckte Widget sein sollte, der Hintergrund oder der Kamera-Feed angezeigt. Das kann verwendet werden, um einige Augmentationen durch Ausblenden der umliegenden 3D-Geometrie zu betonen.
Immer im Vordergrund
decal
boolean
Überlagert die Widget-Geometrie auf sämtliche anderen Augmentationen in der Szene, unabhängig von seiner Tiefe in der 3D-Szene. Wenn dies auf Ja festgelegt ist, wird das Widget nicht durch andere Augmentationen ausgeblendet.
Durchlässigkeit (1 Undurchsichtig - 0 Transparent)
opacity
number
Eine Zahl zwischen 0 und 1, die die Transparenzstufe des Objekts steuert. 0 = vollkommen durchsichtig und 1 = vollkommen undurchsichtig.
Pivot
pivot
boolean
Bestimmt den Neutralpunkt des Bildes:
• Oben links
• Oben zentriert
• Oben rechts
• Mitte links
• Mitte zentriert
• Mitte rechts
• Unten links
• Unten zentriert
• Unten rechts
Das Widget in Aktion
Hier ist ein Beispiel, wie Ihr Widget aussehen könnte.
Minimale Schritte, die für die Verwendung erforderlich sind
Wie das Ergebnis aussieht
1. Ziehen Sie ein 3D-Bild-Widget in die Canvas, und legen Sie es ab.
2. (Optional) Wählen Sie das Kontrollkästchen für Billboard im Fensterbereich DETAILS aus.
3. Wählen Sie im Feld Ressource ein vorhandenes Bild aus, fügen Sie ein neues Bild hinzu oder geben Sie die URL des Bilds ein, das Sie anzeigen möchten.
4. Positionieren Sie das Bild wie gewünscht in der Canvas.
Widget mit CSS stylen
Sie können CSS verwenden, um das Widget zu stylen! Nachfolgend sehen Sie ein Beispiel für eine CSS-Klasse, die Sie erstellen und anwenden können:
* 
Beachten Sie, dass Klassen eindeutige Namen haben sollten, sodass es nicht zu Konflikten mit anderen Klassen oder vorkonfigurierten Eigenschaften kommt.
CSS-Beispiel
Wie das Ergebnis aussieht
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
Weitere Informationen zum Implementieren von CSS-Klassen finden Sie unter Anwendungsstile.