Forge Viewer：イベント処理と 2D / 3D 連携

Forge Viewer：2D シート/レイアウト のブログ記事でご案内したとおり、2D シートと 3D モデルが 1 つのシードファイルに存在する場合、同ファイルを Model Derivative API で変換して 2D 情報を Forge Viewer 上で表示することが出来ます。この際、変換された viewables には 3D 情報も同時ぬ含まれているので、表示するカンバス領域（<div>～</div>）を個別に定義することで、同時に 2D と 3D を表示させることが可能です。

Forge Viewer 上に表示されるジオメトリは、カンバス上で選択出来る点は周知のとおりです。また、ジオメトリは、dbId と呼ばれる識別子で一意に識別されていて、3D カンバス上の 3D viewables のジオメトリは、投影された2D カンバス上の 2D viewables ジオメトリとで同じ dbId を持っています。CAD ソフトウェアでは、ごく一般的な構造ですが、このジオメトリ識別をイベント処理と併用することで、容易に 2D と 3D カンバス間の連携を実現することが出来るようになります。

例えば、HTML ページに 2D と 3D を表示する 2 つの <div> セクションが Forge Viewer カンバスとして用意されていて、Revit プロジェクト ファイルから変換された情報を表示すると仮定してください。この時、前者カンバスのタグ id が viewer2d、後者カンバスのタグ id が viewer3d になっていて、それぞれの Viewer3D インスタンスを格納する JavaScript 変数が、_viewer2d と _viewer3d とします。

この状態で、_viewer2d カンバスのドキュメント ロード成功時に、次のように、ジオメトリ選択 イベント SELECTION_CHANGED_EVENT  をフックします。

_viewer2d.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelected2D);

同じく、_viewer3d カンバスのドキュメント ロード成功時に、次のように、ジオメトリ選択 イベント SELECTION_CHANGED_EVENT  をフックします。

_viewer3d.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelected3D);

そして、それぞれのカンバスでジオメトリが選択された際に呼ぼ出されるイベントハンドラ関数 onSelected2D() と onSelected3D() を次のように定義します。

function onSelected2D(event) {
    var dbIdArray = event.dbIdArray;
    if (dbIdArray.length > 0) {
        _viewer3d.clearSelection();
        _viewer3d.isolate(dbIdArray);
        _viewer3d.fitToView(dbIdArray);
    }
}

function onSelected3D(event) {
    var dbIdArray = event.dbIdArray;
    if (dbIdArray.length > 0) {
        _viewer2d.clearSelection();
        _viewer2d.isolate(dbIdArray);
        _viewer2d.fitToView(dbIdArray);
    }
}

SELECTION_CHANGED_EVENT イベントハンドラ関数のパラメータには、選択したジオメトリの dbId が格納されているので、もう一方のカンバスの同じ dbId ジオメトリを isolate() － 単独表示して、fitToView() － 拡大 する記述をすることで、次のような連携処理を実現することが出来るようになります。

By Toshiaki Isezaki