Arbeiten mit Widgets > 3D > 3D-Druckschaltfläche
  
3D-Druckschaltfläche
* 
Nur in 3D-Brillen-Projekten verfügbar.
Was macht dieses Widget?
Mit dem Widget 3D-Druckschaltfläche können Sie voll artikulierte Handverfolgung auf einer HoloLens 2 verwenden. Außerdem können Sie die 3D-Schaltfläche anvisieren und durch in die Luft tippen auswählen, wenn Sie eine HoloLens verwenden.
Wann sollte ich dieses Widget verwenden?
Eine 3D-Druckschaltfläche ist insbesondere dann nützlich, wenn Sie ein Ereignis auslösen möchten. Beispielsweise kann eine 3D-Druckschaltfläche verwendet werden, um die Wiedergabe für eine Sequenz zu starten.
Die 3D-Druckschaltfläche ist insbesondere dann nützlich, wenn das Erlebnis auf einer HoloLens 2 angezeigt werden soll und Sie artikulierte Handverfolgung verwenden möchten. Die 3D-Druckschaltfläche kann für alle Benutzeraktionen verwendet werden, die den Widgets "3D-Beschriftung" und "3D-Bild" ähneln.
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
Text
text
string
Text, der auf der Schaltfläche angezeigt wird
Bild
src
resource url
Sie können einen der folgenden Schritte ausführen, um ein Bild einzuschließen:
• Klicken Sie neben das Feld, 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.
Zu den unterstützten Dateiformaten gehören:
• .png
• .jpg
Höhe
height
number
Höhe der Schaltfläche in Metern. Der Mindestwert ist 4 cm.
Breite
width
number
Breite der Schaltfläche in Metern. Der Mindestwert ist 4 cm.
Schriftartfarbe
fontColor
color
Farbe der Schriftart. Wählen Sie eine Farbe aus der Farbauswahl aus.
X-Koordinate
x
number
Position der Schaltfläche auf der X-Achse.
Y-Koordinate
y
number
Position der Schaltfläche auf der Y-Achse.
Z-Koordinate
z
number
Position der Schaltfläche auf der Z-Achse.
X-Drehung
rx
number
Drehung der Schaltfläche um die X-Achse.
Y-Drehung
ry
number
Drehung der Schaltfläche um die Y-Achse.
Z-Drehung
rz
number
Drehung der Schaltfläche um die Z-Achse.
Schaltflächenfarbe
color
color
Farbe der Schaltfläche. Wählen Sie eine Farbe aus der Farbauswahl aus.
Sichtbar
visible
boolean
Ist dieses Kontrollkästchen aktiviert, so wird das Widget zur Laufzeit angezeigt.
Deaktiviert
disabled
boolean
Bei Auswahl dieses Kontrollkästchens wird das Klicken auf das Widget deaktiviert.
Ereignis
JavaScript
Beschreibung
Gedrückt
pressed
Wird beim Drücken der Schaltfläche ausgelöst. Ist die Schaltfläche deaktiviert, so wird das Ereignis nicht ausgelöst.
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
* 
Dieses Widget wird am Besten in einem 3D-Bereich verwendet.
1. Ziehen Sie ein 3D-Bereich-Widget in die Canvas, und legen Sie es ab.
2. Ziehen Sie ein 3D-Druckschaltfläche-Widget in die Canvas, und legen Sie es ab. Verschieben Sie das Widget an die gewünschte Position.
* 
Nachdem Sie die Widgets in die Canvas gezogen und dort abgelegt haben, müssen Sie sie unterhalb des Bereichs-Widgets im Baum ANSICHTEN verschachteln, indem Sie sie unter das Bereichs-Widget ziehen und dort ablegen.
3. Geben Sie den Text, der im Feld Text angezeigt werden soll, ein oder binden Sie eine Dateneigenschaft an das Feld Text des Widgets. Für dieses Beispiel haben wir Submit verwendet.
4. Fügen Sie den folgenden Code zu Home.js hinzu:
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;

}
* 
Sie müssen für jedes Widget, das unter dem 3D-Bereich unter $scope.hidePanel = function(){ verschachtelt ist, eine Zeile einschließen Für unser Beispiel haben wir ein 3D-Bild, ein 3D-Kontrollkästchen und eine 3D-Beschriftung zum Bereich hinzugefügt, d.h. Folgendes wurde zu Home.js hinzugefügt:
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;
$scope.view.wdg['3DImage-1']['visible'] = false;
$scope.view.wdg['3DCheckbox-1']['visible'] = false;
$scope.view.wdg['3DLabel-1']['visible'] = false;

}
Dadurch wird sichergestellt, dass alle Widgets, die unter dem Bereich verschachtelt sind, auch ausgeblendet werden, wenn Sie auf die 3D-Druckschaltfläche Submit klicken.
5. Navigieren Sie zurück zum Fensterbereich DETAILS für die 3D-Druckschaltfläche, und führen Sie einen Bildlauf nach unten zu EREIGNISSE durch.
6. Klicken Sie auf JS neben dem Ereignis Gedrückt, und geben Sie hidePanel() ein.