Vuforia Studio 3D活用備忘録：3D内のプロパティ(メタデータ)値を利用 その１

#はじめに

Vuforia Studioでは、3DCADで作成した3DをARとして表示できるが、さらに、3Dデータ内のプロパティ値（メタデータ）を扱う事ができる。プロパティ値を利用する例を備忘録としておく。

#前提

Vuforia Studio バージョン 8.5.13 以降。
この備忘録は、Vuforia Studioで、3DデータをAR表示させ、同時に2D画面上に2Dウィジェットを表示させ、さらにホームJSにJavaScriptコードを追加するARの作成経験がある人が対象。

#3Dデータについて

本備忘録では、3DCADのSolidWorxsの3Dデータを使った。Vuforia Studioは様々な3DCADデータに対応しているので、他の3DCADデータでも本例と同様の事が出来る。

#3D内のプロパティ(メタデータ)値を表示する例

###プロジェクトで3D内のプロパティ(メタデータ)を利用するには

Vuforia Studio 8.5.13 以降では、3Dデータをアップロードするときに、プロパティデータを抜き出すかどうかの指定ができるようになった。
まずは、新規ARプロジェクトをモバイルで作成する。そして、3Dキャンパスに、モデルウィジェットを配置し、リソースのアップロードにて、3Dデータファイルを選択指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/465f500a-8329-0d0c-4dd8-155690bc2d40.png)
「エクスペリエンスのCADメタデータへのアクセスを許可」をチェックしてアップロードすると、アップロードした3Dのファイル名と同じ名前で、拡張子が .jsonのファイルが自動生成される。このテキストファイルに、プロパティデータが抜き出されている。

###パーツとアセンブリのデータを取り出す

まずは、簡単な例として、3Dデータに含まれるパーツとアセンブリの一覧を表示してみる。慣れるまでは、パーツ数がそれほど多くない3Dデータで試すのがよい。
以下の JavaScriptコードを、プロジェクトの「ホームJS」に追加する。

```javascript:パーツとアセンブリデータを取得するJavaScript例
var modelName = 'model-1'; // ウィジェット名が異なる場合は変更
var selectName = 'select-1'; // ウィジェット名が異なる場合は変更

//--------------------------------------------------

//取り出したアセンブリやパーツデータを格納する変数（JSON形式）
var parts = [];
parts.push({'IndentName':' ','PartIDPath':' '});

// モデルウィジェット名を指定して、3Dデータのプロパティ（メタデータ）を扱う
PTC.Metadata.fromId(modelName).then( (metadata) => {
  // 「Part Name」に値があるデータを取り出す
  var whereFunc = function(idpath) {
    const name  = metadata.get(idpath, 'Part Name')
    return name && name.length>0;
  }
  var list1 = metadata.findCustom(whereFunc);
  // 「_selectedPaths」として保存されている IDパスリストを取り出す
  var list2 = list1['_selectedPaths'];
  for(var i in list2){
    var idpath = list2[i];
    // IDパスごとのアセンブリやパーツデータを取り出す
    var partdata = metadata.get(idpath);
    // その中の基本データである「システムプロパティ」カテゴリのデータを取り出す
    var partsysprop = partdata.getCategory('__PV_SystemProperties');
    // 名前から「.ASM」「.PRT」を除去して、アセンブリ階層の数値と合わせて表示用名を作成する
    var partname =  metadata.get(idpath, 'Part Name');
    //partname = partname.replaceAll('.prt','').replaceAll('.PRT','');
    //partname = partname.replaceAll('.asm','').replaceAll('.ASM','');
    partname = partname.split('.prt').join('').split('.PRT').join('');
    partname = partname.split('.asm').join('').split('.ASM').join('');
    var partdepth =  parseInt(metadata.get(idpath, 'Part Depth'));
    var indent = '';
    for(var j=0; j<partdepth; j++){
      indent = indent + '..'
    }
    // 作成した表示名を、「IndentName」の値として追加する
    partsysprop['IndentName'] = partdepth + indent + partname;
    parts.push(partsysprop);
  }
  // 2D選択ウィジェットに、取り出したアセンブリやパーツデータを設定する
  $scope.setWidgetProp(selectName, 'list', parts);
  $scope.setWidgetProp(selectName, 'value', ' ');
});

```
このコードは、上記の3Dのプロパティデータを取得したモデルウィジェットのIDが「model-1」であり、そのプロパティデータを取得して、IDが「select-1」の選択ウィジェット(2D)にパーツデータを渡す処理になっている。モデルウィジェットのIDが「model-1」でない場合には、IDを変更するか、上記の処理の先頭のウィジェット名指定の箇所を変更する。

```javaScript:
    // 作成した表示名を、「IndentName」の値として追加する
    partsysprop['IndentName'] = partdepth + indent + partname;
```
尚、上記の処理では、単に3Dデータからのプロパティだけでなく、パーツやアセンブリの階層の深さと、深さに応じた長さの点文字とを名前の前に連結したデータをキーを「IndentName」として追加している。これをリスト表示に使う。

###パーツとアセンブリのデータをリストに表示

ARプロジェクトの2Dキャンパスに、選択ウィジェットを追加する。IDが「select-1」でない場合には、IDを変更するか、上記のJavaScriptコードの先頭のウィジェット名の指定を変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/a68dcb24-433c-3214-71d7-e56ef8eb8b23.png)
選択ウィジェットの表示フィールドに「IndentName」を入力する。ラベルは任意だが、仮に「PARTS」としておく。
上図は、選択ウィジェットを、上部パネルのグリッドレイアウトに配置した例で、グリッドレイアウトの列サイズに、「240px」を指定してある。
プレビューを実行して、PARTSの右の「▼」を選択すると、パーツとアセンブリの一覧が表示された。出来た！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/c827b84a-bad9-e99f-c534-b4cf8c090e4f.png)

#おわりに

3DCADデータには、製造に必要なデータ、保守に必要なデータなどを、プロパティ値（メタデータ）として含める事も多い。そのデータをARでも利用すれば、製造、保守に簡単に活用できる。積極利用すべきだと思う。
本備忘録では、**その１**として、パーツとアセンブリのデータを取り出して、一覧表示する例を試した。

#注意

3DCADデータのアセンブリやパーツ名（構造名）に日本語を使っている場合、jsonファイルでは日本語部分が文字化けするようなので注意。

#参考

・[Vuforia Studio 3D活用備忘録：3D内のプロパティ(メタデータ)値を利用 その２　一覧表示をフィルタする](https://qiita.com/tm181001/items/2124c99da40e6bbae6f6)

・[Vuforia Studio 3D活用備忘録：3D内のプロパティ(メタデータ)値を利用 その３　色などを変更する](https://qiita.com/tm181001/items/18cdeecba87088646d5d)

・[Vuforia Studio 3D活用備忘録：3D内のプロパティ(メタデータ)値を利用 その４　カスタムプロパティ一覧を表示する](https://qiita.com/tm181001/items/8a4d760148e26e1a3b84)

・[Vuforia Studio 3D活用備忘録：3D内のプロパティ(メタデータ)値を利用 その５　3D ARをタップしてパーツを選択する](https://qiita.com/tm181001/items/28143dd1a53b668cfb93)

・[エクスペリエンスへの CAD メタデータの組み込み @ Vuforia Studioヘルプ](
http://support.ptc.com/help/vuforia/studio/ja/#page/Studio_Help_Center%2Fcad_metadata_api.html)

・[Incorporate CAD Metadata Into an Experience ( version 8.5.13 and later) @ ptc community](https://community.ptc.com/t5/Vuforia-Studio-and-Chalk-Tech/Incorporate-CAD-Metadata-Into-an-Experience-version-8-5-13-and/ta-p/693341)

・[Vuforia Studio - introduction to MetaData Video @ ptc community](https://community.ptc.com/t5/Vuforia-Studio/Vuforia-Studio-introduction-to-MetaData-Video/td-p/695630?posno=6&q=Metadata%20Vuforia&source=search)

・[Vuforia Studio で作成できるAR例～タブレットAR例、3D形状の特徴で実物にARを重畳（モデルターゲット）、2D画面上の表示や操作を組合せ]
(https://players.brightcove.net/1532789042001/HknUe20R_default/index.html?directedMigration=true&videoId=6120145841001)