Création de configurations de couleur
Dans la section précédente, vous avez appris comment utiliser le paramètre d'application model pour modifier la configuration du modèle dans votre expérience. Maintenant, vous allez créer un paramètre d'application nommé color qui fonctionne de manière similaire. Cependant, certains scripts doivent être créés pour l'activer.
Dans cette section, un objet contenant des couleurs RVBA qui sera accessible par Vuforia Studio. Une fois qu'une couleur a été récupérée de l'objet, elle est transmise à la fonction setColor. La fonction setColor modifie alors l'apparence du modèle en fonction de la couleur spécifiée pour le paramètre d'application color.
1. Cliquez sur Home.js et saisissez ce qui suit :
//
// 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);'
}
L'objet colorPalette sera utilisé pour conserver toutes les couleurs utilisables pour configurer votre modèle. Une liste de couleurs de base a été ajoutée à cette expérience, mais comme Studio reconnaît les codes couleur RVBA, vous pouvez ajouter autant de couleurs que vous le souhaitez à l'expérience.
2. Ensuite, vous allez créer la fonction setColor utilisée pour définir la couleur désirée pour le quadrirotor. Si une couleur est définie dans le paramètre d'application color, le code à l'intérieur de l'instruction if sera activé.
a. En fonction de la valeur que vous entrez dans le paramètre d'application color, une valeur RVBA est sélectionnée à partir de l'objet colorPalette et définie sous la forme d'une variable nommée paintColor.
b. Si la couleur que vous avez entrée est une valeur valide dans colorPalette, la promesse de l'API de métadonnées de PTC sera déclenchée. Pour déterminer si la promesse est satisfaite, une variable nommée toPaint est créée, et fournit la liste des pièces ayant un attribut painted de valeur true. Ensuite, si des pièces répondent à ces critères, le rendu 3D TML remplace la couleur de ces pièces spécifiques par la valeur de paintColor.
c. Si la promesse est rejetée, une instruction d'erreur est consignée dans la console.
d. Entrez le code suivant dans Home.js :
//
// 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. Vous avez maintenant créé les fonctions qui permettent de changer la couleur du modèle, mais celles-ci n'ont pas encore été appelées. Pour que cette fonction se déclenche dès que vous effectuez le chargement dans Studio, vous devez créer une fonction d'écouteur d'événement modelLoaded. Comme son nom le suggère, lorsque le modèle est chargé par Studio, le corps de cette fonction est exécuté. Dans le cas présent, lorsque le modèle est chargé, la fonction setColor est déclenchée pour les modèles donnés afin de définir leur couleur en fonction de la configuration.
//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. Nous en avons maintenant terminé avec les scripts nécessaires à cette section. Pour tester votre code, entrez l'une des couleurs que vous avez créées à l'intérieur de l'objet colorPalette comme valeur du paramètre d'application color. Cliquez sur Aperçu et observez le changement de couleur de votre modèle. Dans notre exemple, nous avons utilisé le jaune. Si vous constatez que la couleur de votre modèle change, vous avez terminé cette section avec succès.
| Cette méthode fonctionne à petite échelle mais si vous possédez de nombreux modèles avec diverses configurations, elle ne fonctionnera pas en raison de la limite sur l'ajout de modèles à Vuforia Studio. Poursuivez ce cas d'utilisation d'un jumeau numérique pour découvrir comment utiliser le service de résolution d'identité (IRS) et ThingWorx pour créer des expériences évolutives. |
Vous allez ensuite commencer à travailler avec le
service de résolution d'identité (IRS).
