色のコンフィギュレーションの作成

前のセクションでは、model アプリケーションパラメータを使用して、エクスペリエンス内のモデルのコンフィギュレーションを変更する方法について学習しました。ここでは、同様に機能する color という名前のアプリケーションパラメータを作成します。ただし、これを有効にするには、いくつかのスクリプトを作成する必要があります。

このセクションでは、Vuforia Studio にアクセスする RGBA 色を含むオブジェクトが作成されます。オブジェクトから色がフェッチされると、その色が setColor 関数に渡されます。setColor 関数は、モデルの外観を、color アプリケーションパラメータに指定されている任意の色に変更します。

//
// 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);'
}

colorPalette オブジェクトは、モデルに設定可能なすべての色を保持するために使用されます。このエクスペリエンスには基本色のリストが追加されていますが、Studio は RGBA 色コードを認識するため、必要なエクスペリエンスにその他の色を追加できます。

2. 次に、クワッドコプターの目的の色を設定するために使用する setColor 関数を作成します。color アプリケーションパラメータで色が定義されている場合、if 文内のコードがアクティブになります。

b. 入力した色が colorPalette で有効な値である場合、PTC Metadata API の Promise がトリガーされます。Promise が実行されているかどうかを判断するために、toPaint という名前の変数が作成され、true の値の painted 属性を持つ部品のリストになります。その基準を満たす部品がある場合、TML 3D レンダラーは、paintColor の値を反映するように、これらの特定の部品の色を変更します。

//
// 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. これで、モデルの色を変更する関数が作成されましたが、まだ呼び出されていません。Studio をロードした直後にこの関数を実行するには、modelLoaded イベントリスナー関数を作成する必要があります。モデルが Studio によって読み込まれると、その名前が示すように、この関数のボディが実行されます。この場合、モデルがロードされると、そのモデルに対して setColor 関数がトリガーされ、コンフィギュレーションに基づいて色が設定されます。

//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. これで、このセクションに必要なすべてのスクリプトが完了しました。コードをテストするには、colorPalette オブジェクト内で作成した色のいずれかを、color アプリケーションパラメータの値として入力します。「プレビュー」をクリックして、モデルの色がどのように変化したかを確認します。この例では、黄色を使用しました。モデルの色が変更された場合、このセクションが正常に完了しています。

この方法は小さなスケールで動作しますが、複数のコンフィギュレーションを持つモデルが多数ある場合は、Vuforia Studio に追加可能なモデルの制限により機能しません。このデジタルツインのユースケースを続行し、Identity Resolution Service と ThingWorx を使用して、拡張性の高いエクスペリエンスを作成する方法を確認します。