1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-06

はじめに

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

前提

Vuforia Studio バージョン 8.5.13 以降。
この備忘録は、Vuforia Studioで、3DデータをAR表示させ、同時に2D画面上に2Dウィジェットを表示させ、さらにホームJSにJavaScriptコードを追加するARの作成経験がある人が対象。
また、以下の備忘録その1を試し済みの人が対象。
Vuforia Studio 3D活用備忘録:3D内のプロパティ(メタデータ)値を利用 その1

3Dデータについて

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

3D内のプロパティ(メタデータ)値を表示し、選択すると該当パーツの色を変更する例

その1では、下図のようにパーツとアセンブリのデータを取得して、一覧表示を試した。
image.png
今回は、その1に対して、一覧表示でパーツを選択したら、ARの3Dの該当箇所の色を変更してみる。

一覧表示で選択したパーツのIDパスを取り出す準備

Vuforia Studioで扱う3Dデータにおいて個々のパーツを識別するには、IDパスを使う。「Part ID Path」の値がIDパスなのだが、一覧表示させている選択ウィジェットの表示フィールドや値フィールドの指定に半角スペースがあると、うまく動いてくれない模様。そこで、プロパティに半角スペースの無い「PartIDPath」キーを追加して「Part ID Path」の値をコピーして使ってみる。

    // 作成した表示名を、「IndentName」の値として追加する
    partsysprop['IndentName'] = partdepth + indent + partname;
    // IDパスを、「PartIDPath」の値として追加する
    partsysprop['PartIDPath'] = idpath;
    parts.push(partsysprop);

コードに、partsysprop['PartIDPath'] = idpath; を追加して値をコピーする。

それから、3Dのパーツとアセンブリのデータを一覧表示している選択ウィジェットの値フィールドに、「PartIDPath」を入力する。これで、一覧からパーツを選択したら、そのIDパスをdataとして取り出せる。そのdataを使う処理として、イベントの値変更のJS欄に、selectPart(data); を入力する。
image.png

一覧表示で選択したパーツのIDパスを確認する

ARの3Dのパーツの色を変更させていく前に、選択したパーツのIDパスを取り出せているかを簡易確認してみる。選択ウィジェットの値変更のJS欄入力した selectPart(data); により実行されるファンクションを以下のようにホームJSに追加する。

$scope.selectPart = function(data){
  alert(data);
}

プロジェクトを保存して、プレビューしてみる。どうやらIDパスを取り出せているようだ。
image.png

選択したIDパスに対するARの3Dのパーツの色を変更する

モデルウィジェットのIDと、IDパスとをハイフン「-」で連結して3Dのパーツを特定して、setColor() でそのパーツの色を変更できる。上記の $scope.selectPart の箇所を、以下のコードに変更する。

var PICK_COLOR  = "rgba(255,255,0,1)"; // 黄色
var lastSelection = '';

$scope.selectPart = function(data){
  //alert(data);
  // 前の選択のパーツの設定を変更する
  try{
    // 色の変更を解除する
    tml3dRenderer.setColor(lastSelection, undefined);
  }
  catch (ex) {
    alert(ex);
  }
  // 今回の選択のパーツの設定を変更する
  lastSelection = modelName + "-" + data;
  try{
    // 色を変更する
    tml3dRenderer.setColor(lastSelection, PICK_COLOR);
  }
  catch (ex) {
    alert(ex);
  }
}

プロジェクトを保存し、プレビューにてパーツを選択してみる。おぉ、色が変わった。出来た!
image.png

選択したパーツが内部にあっても見えるようにする(常に手前に表示する)

以下のコードのように、setProperties(lastSelection, {decal: true}) を追加することで、選択したパーツが内部にあっても、常に手前に表示する設定となり、見えるようになる。選択解除時には、false にしてその設定を解除しておく。

  // 前の選択のパーツの設定を変更する
  try{
    // 色の変更を解除する
    tml3dRenderer.setColor(lastSelection, undefined);
    // 常に前に表示を解除する
    tml3dRenderer.setProperties(lastSelection, {decal: false});
  }
  catch (ex) {
    alert(ex);
  }
  // 今回の選択のパーツの設定を変更する
  lastSelection = modelName + "-" + data;
  try{
    // 色を変更する
    tml3dRenderer.setColor(lastSelection, PICK_COLOR);
    // 常に前に表示を設定する
    tml3dRenderer.setProperties(lastSelection, {decal: true});
  }
  catch (ex) {
    alert(ex);
  }
}

プレビューにて内部にあるパーツを選択してみたら、見えるようになった!
image.png

選択したパーツのみを表示する

ARの3Dを実物に重ね合せ表示する場合には、3Dアセンブリ全体は非表示にして、ハイライトしたいパーツのみを表示させたいことがある。それを試してみる。モデルウイジェットの表示プロパティのチェックを解除して、デフォルトで3Dを非表示にしておく。以下のコードのように、setProperties(lastSelection, {hidden: false}) を追加することで、選択したパーツを表示する。選択解除時には、true にして非表示にする。

  // 前の選択のパーツの設定を変更する
  try{
    // 色の変更を解除する
    tml3dRenderer.setColor(lastSelection, undefined);
    // 常に前に表示を解除する
    //tml3dRenderer.setProperties(lastSelection, {decal: false});
    // 非表示にする
    tml3dRenderer.setProperties(lastSelection, {hidden: true});
  }
  catch (ex) {
    alert(ex);
  }
  // 今回の選択のパーツの設定を変更する
  lastSelection = modelName + "-" + data;
  try{
    // 色を変更する
    tml3dRenderer.setColor(lastSelection, PICK_COLOR);
    // 常に前に表示を設定する
    //tml3dRenderer.setProperties(lastSelection, {decal: true});
    // 表示にする
    tml3dRenderer.setProperties(lastSelection, {hidden: false});
  }
  catch (ex) {
    alert(ex);
  }

すると、選択したパーツのみが表示されるようになる。出来た!
image.png

選択したパーツを点滅する(不透明度を変更する)

以下のコードのように、不透明度(opacity)の値を1.0 にして元に戻す処理 setProperties(lastSelection, {opacity: 1.0}); を追加する。

  // 前の選択のパーツの設定を変更する
  try{
    // 色の変更を解除する
    tml3dRenderer.setColor(lastSelection, undefined);
    // 常に前に表示を解除する
    //tml3dRenderer.setProperties(lastSelection, {decal: false});
    // 非表示にする
    tml3dRenderer.setProperties(lastSelection, {hidden: true});
    // 不透明にする
    tml3dRenderer.setProperties(lastSelection, {opacity: 1.0});
  }
  catch (ex) {
    alert(ex);
  }
  // 今回の選択のパーツの設定を変更する
  lastSelection = modelName + "-" + data;
  try{
    // 色を変更する
    tml3dRenderer.setColor(lastSelection, PICK_COLOR);
    // 常に前に表示を設定する
    //tml3dRenderer.setProperties(lastSelection, {decal: true});
    // 表示にする
    tml3dRenderer.setProperties(lastSelection, {hidden: false});
  }
  catch (ex) {
    alert(ex);
  }

そして、選択したパーツを、不透明度の変更で 1秒(1000ミリ秒)ごとに点滅する、以下のコードを追加する。

// 点滅
var blink = true;
var opacityV = 0.9;
var opacityL = 0.4;
var opacityH = 0.9;
$scope.startAnimation = function(){
  var timerId = setInterval(function() {
    $scope.$apply(function(){
      if(blink){
        if(opacityV>0.5){
          opacityV = opacityL;
        }
        else{
          opacityV = opacityH;
        }
        if(lastSelection && lastSelection.length>0){
          tml3dRenderer.setProperties(lastSelection, {opacity: opacityV});
        }
      }
    })
  }, 1000 );
}

プレビューで確認したら、点滅出来た!
image.png

おわりに

3DCADデータには、製造に必要なデータ、保守に必要なデータなどを、プロパティ値(メタデータ)として含める事も多い。そのデータをARでも利用すれば、製造、保守に簡単に活用できる。積極利用すべきだと思う。
本備忘録では、その3として、パーツとアセンブリのデータの一覧表示で選択したパーツの色変更などを試した。モデルアイテムウィジェットによるパーツ指定を逐一しなくても、多くのパーツを対象にして色変更、手前表示、表示/非表示、不透明度変更が可能なのは使い勝手が良い。

注意

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

参考

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

Vuforia Studio 3D活用備忘録:3D内のプロパティ(メタデータ)値を利用 その4 カスタムプロパティ一覧を表示する

エクスペリエンスへの CAD メタデータの組み込み @ Vuforia Studioヘルプ

Incorporate CAD Metadata Into an Experience ( version 8.5.13 and later) @ ptc community

Vuforia Studio - introduction to MetaData Video @ ptc community

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?