View and Data API チュートリアル ～ その4 ～ オブジェクト選択

ご注意：View and Data API は2016年6月に Viewer と  Model Derivative API に分離、及び、名称変更されました。

前回、基本的な Extension を実装したチュートリアルに、オブジェクト選択の処理を追加します。ここで紹介する内容は、Autodesk View & Data API – Getting Started Tutorial リポジトリ の Chapter 3 の Step 5 に該当するものです。

Extension 内に実装することで、Extension をロードするまで、オブジェクト選択が出来ないことに注意してください。

オブジェクトの選択には、イベント処理を利用します。View and Data API には、オブジェクト選択を検出する SELECTION_CHANGED_EVENT イベントが用意されているので、このイベント ハンドラを宣言して実装するだけで、オブジェクトを選択した後の各種処理を実装していくことが可能です。

1. 前回追加した Extension ファイル、Viewing.Extension.Workshop.js を Adobe Brackets などのテキスト エディタで開いて、次の太字部分を追記してください。ジオメトリをロードされた際に表示していた alert() は、コメントにし表示しないように変更してください。

_self.load = function () {
    _viewer.addEventListener(
        Autodesk.Viewing.SELECTION_CHANGED_EVENT,
        _self.onSelectionChanged);

    //alert('Viewing.Extension.Workshop loaded');    console.log('Viewing.Extension.Workshop loaded');
    return true;
};
/////////////////////////////////////////////////////////////////
// selection changed callback
//
/////////////////////////////////////////////////////////////////
_self.onSelectionChanged = function (event) {
    // event is triggered also when component is unselected
    // in that case event.dbIdArray is an empty array
    if (event.dbIdArray.length) {
        var dbId = event.dbIdArray[0];
        // do stuff with selected component
    }
    else {
        // all components unselected
    }
}

2. Viewing.Extension.Workshop.js を上書き保存して、Node.js で Web サーバーを再起動してから、Web ブラウザで localhost:3000 を表示してください。モデル表示後にオブジェクト選択が可能になりますが、現在のコードではオブジェクトを選択しても何も起こりません。イベント ハンドラが正しく動作しているかは、Web ブラウザのデバッグ環境で確かめることができます。例えば、Google Chrome をお使いの場合には、3D モデルの表示後に F12 キーを押すことで、デバッグ画面を表示させることが可能です。あとは、Viewing.Extension.Workshop.js の適切な位置にブレーク ポイントを置いて、オブジェクトを選択するだけです。このコードでは、選択したオブジェクトの ID が変数 dbId に代入される過程を把握することが出来るはずです。

次回 は、選択したオブジェクトの各種プロパティを、ビューア上のパネルに表示する実装をしていきます。

By Toshiaki Isezaki