Farbkonfigurationen erstellen
Im vorherigen Abschnitt haben Sie gelernt, wie der Anwendungsparameter model verwendet werden kann, um die Konfiguration des Modells in Ihrem Erlebnis zu ändern. Jetzt erstellen Sie einen Anwendungsparameter mit dem Namen color, der ähnlich funktioniert. Zuerst müssen wir jedoch einige Skripts erstellen, um den Anwendungsparameter zu aktivieren.
In diesem Abschnitt wird ein Objekt mit RGBA-Farben erstellt, auf das Vuforia Studio zugreift. Sobald eine Farbe aus dem Objekt abgerufen wurde, wird die Farbe an die Funktion setColor übergeben. Die Funktion setColor ändert daraufhin den Farbeffekt für das Modells in die vom Anwendungsparameter color festgelegte Farbe.
1. Klicken Sie auf Home.js, und geben Sie Folgendes ein:
//
// object to hold color possibilities
var colorPalette = {
'red' : 'rgba(255,0,0,1);',
'green' : 'rgba(0,255,0,1);',
'blue' : 'rgba(0,0,255,1);',
'yellow' : 'rgba(255,255,0,1);',
'purple' : 'rgba(255,0,255,1);',
'cyan' : 'rgba(0,255,255,1);',
'white' : 'rgba(245,245,245,1);',
'black' : 'rgba(10,10,10,1);'
}
Das Objekt colorPalette wird verwendet, um alle Farben, die für Ihr Modell konfiguriert werden können, zu speichern. Diesem Erlebnis wurde eine Liste von Grundfarben hinzugefügt, aber da Studio RGBA-Farbcodes interpretieren kann, können Sie dem Erlebnis weitere gewünschte Farben hinzufügen.
2. Als nächstes erstellen wir die Funktion setColor, die verwendet wird, um die gewünschte Farbe für den Quadcopter festzulegen. Wenn eine Farbe im Anwendungsparameter color definiert ist, wird der Code in der if-Anweisung aktiviert.
a. Basierend auf dem Wert, den Sie in den Anwendungsparameter color eingeben, wird ein RGBA-Wert aus dem Objekt colorPalette ausgewählt und als Variable mit dem Namen paintColor festgelegt.
b. Wenn es sich bei der eingegebenen Farbe um einen gültigen Wert in colorPalette handelt, wird das PTC Metadaten-API-Versprechen ausgelöst. Um festzustellen, ob das Versprechen erfüllt wurde, wird eine Variable namens toPaint erstellt. Diese Variable stellt eine Liste von Teilen bereit, die das Attribut painted mit dem Wert true aufweisen. Sind Teile vorhanden, die dieses Kriterium erfüllen, so ändert der TML-3D-Renderer die Farbe für diese spezifischen Teile, sodass sie den Wert in paintColor reflektieren.
c. Wird das Versprechen abgelehnt, so wird ein Fehler in der Konsole protokolliert.
d. Geben Sie den folgenden Code in Home.js ein:
//
// function for setting the color based on the color app parameter
$scope.setColor = function (model) {
//
// if color is defined, set color
// check if there is a part that can have its color changed
if ($scope.app.params.color != undefined) {
var paintColor = colorPalette[$scope.app.params.color];
if (paintColor != undefined)
PTC.Metadata.fromId('quadcopter')
.then((metadata) => {
//
// create variable named toPaint to become an array of ID paths that fit the input text
// "like" will look for a partial text match to what is typed in. use 'same' to get an exact match
var toPaint = metadata.find('painted').like('true').getSelected();
//
// if statement for determining parts that have the painted attribute and setting their color using the tml 3d renderer
if (toPaint != undefined && toPaint.length > 0 ) {
toPaint.forEach(function(p) {
tml3dRenderer.setColor(model+ '-' +p,paintColor);
}) // for each end
} // if statement end
}) //.then end
//
// catch statement for if this operation fails
.catch((err) => { console.log("metadata extraction failed with reason : " + err) })
} // end of if statement for paintColor
} // end of setColor function
3. Sie haben jetzt die Funktionen, welche die Farbe des Modells ändern, erstellt. Diese Funktionen wurden jedoch noch nicht aufgerufen. Es muss eine modelLoaded-Ereignis-Listener-Funktion erstellt werden, um diese Funktion aufzurufen, sobald Studio geladen wird. Wie der Name besagt, wird der Funktionsrumpf ausgeführt, wenn das Modell von Studio geladen wird. In diesem Fall wird beim Laden des Modells die Funktion "setColor" für die jeweiligen Modelle ausgelöst, und die Farbe der Modelle wird basierend auf der Konfiguration festgelegt.
//modelLoaded event listener triggers when the model has completed loading
$scope.$on('modelLoaded', function (event,model) {
//
// call setColor function to change the color of the model
$scope.setColor(model)
}) // modelloaded end
4. Hiermit wurden alle für diesen Abschnitt erforderlichen Skripts erstellt. Geben Sie eine der Farben, die Sie im Objekt colorPalette als Wert für den Anwendungsparameter color erstellt haben, ein, um den Code zu testen. Klicken Sie auf Vorschau, und beobachten Sie, wie sich die Farbe des Modells ändert. Für unser Beispiel haben wir gelb verwendet. Wenn Sie beobachten, wie sich die Farbe Ihres Modells ändert, so haben Sie diesen Abschnitt erfolgreich abgeschlossen.
| Diese Methode funktioniert gut für wenige Modelle. Sollten Sie viele Modelle mit mehreren Konfigurationen haben, funktioniert diese Methode nicht, da die Anzahl der Modelle, die zu Vuforia Studio hinzugefügt werden können, begrenzt ist. Fahren Sie mit dem Anwendungsfall für den digitalen Zwilling fort, um herauszufinden, wie Sie den Identity Resolution Service und ThingWorx für das Erstellen skalierbarer Erlebnisse nutzen können. |
Als Nächstes arbeiten wir mit dem
Identity Resolution Service (IRS).
