Autodesk Developer Blog : Forge Viewer Extension の作成

Forge Viewer で利用可能な Extension でご案内のとおり、オートデスクが Forge Viewer 用に用意、サポートしている Extensions（JavaScript ロードモジュール）が複数存在します。同時に、独自に Extension を作成して必要に応じて、Forge Viewer を拡張していくことも可能です。

Extension の作成方法は、公式ドキュメント Extensions にも記載されていますが、ここではオブジェクトを選択して、オブジェクトが持つプロパティをパレットに表示する Extension の作成手順を記載しておきたいと思います。

Extension はロードモジュールとして動作するため、単独では機能しません。Forge Viewer を使用するメインルーチン（HTML と関連する JavaScript コード）がすでに完成していることが前提となります。例えば、Forge Viewer でのモデル表示コードの進化 でもご紹介した Basic Viewer や Basic Application がこれに相当します。ここでは、新しい Forge Viewer チュートリアル改定版～その1 で作成した Viewer に Extension をロードするものと仮定して、HTML を www フォルダ直下の index.html、index.html が参照する JavaScript を js フォルダ下の index.js として話を進めることにします。

まず、Adobe Brackets などのテキストエディタを使って Extension 本体を作成していきます。 JavaScript ファイルを新しく作成して、次のコードを貼り付けて www フォルダに “Viewing.Extension.Workshop.js” の名前で保存します。このコードは、Extension のスケルトンとなるものです。

///////////////////////////////////////////////////////////////////////////////
// Demo Workshop Viewer Extension
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace("Viewing.Extension");
Viewing.Extension.Workshop = function (viewer, options) {
    /////////////////////////////////////////////////////////////////
    //  base class constructor
    //
    /////////////////////////////////////////////////////////////////
    Autodesk.Viewing.Extension.call(this, viewer, options);
    var _self = this;
    var _viewer = viewer;
    /////////////////////////////////////////////////////////////////
    // load callback: invoked when viewer.loadExtension is called
    //
    /////////////////////////////////////////////////////////////////
    _self.load = function () {
        console.log('Viewing.Extension.Workshop loaded');
        return true;
    };
    /////////////////////////////////////////////////////////////////
    // unload callback: invoked when viewer.unloadExtension is called
    //
    /////////////////////////////////////////////////////////////////
    _self.unload = function () {
        console.log('Viewing.Extension.Workshop unloaded');
        return true;
    };
};
/////////////////////////////////////////////////////////////////
// sets up inheritance for extension and register
//
/////////////////////////////////////////////////////////////////
Viewing.Extension.Workshop.prototype =
    Object.create(Autodesk.Viewing.Extension.prototype);
Viewing.Extension.Workshop.prototype.constructor =
    Viewing.Extension.Workshop;
Autodesk.Viewing.theExtensionManager.registerExtension(
    'Viewing.Extension.Workshop',
    Viewing.Extension.Workshop);

2. www フォルダ内の index.html ファイルを開いて、</head> タグの一行前に 1. で作成した Extension ファイルを参照するコードを追記します。

<script src="/Viewing.Extension.Workshop.js"></script>

3. www フォルダの index.js を開いて、Extension ファイルをロードするコードを追記します。ビューアがジオメトリをロードした際に生成される GEOMETRY_LOADED_EVENT イベントを待って、Extension をロードさせるため、index.js ファイルの onLoadModelSuccess() 内にコードを追記します。このコードで、イベント発生時に loadExtension() が呼び出されます。

function onLoadModelSuccess(model) {
    console.log('onLoadModelSuccess()!');
    console.log('Validate model loaded: ' + (viewer.model === model));
    console.log(model); viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (event) {
        loadExtensions(viewer);
    });
}

4. loadExtension() を実装します。index.js ファイルの onLoadModelError() の後に、次のコードを追記します。

function onLoadModelError(viewerErrorCode) {
    console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
}

function loadExtensions(viewer) {
    viewer.loadExtension('Viewing.Extension.Workshop');
}

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

6. Viewing.Extension.Workshop.js の _self.load() 内を次のようにしてください。

_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;
};

7. 選択したオブジェクトのプロパティを表示するパネルを実装していきます。 Viewing.Extension.Workshop.js を Adobe Brackets などで開いて、次のようにします。

/////////////////////////////////////////////////////////////////
//  base class constructor
//
/////////////////////////////////////////////////////////////////
Autodesk.Viewing.Extension.call(this, viewer, options);
var _self = this;
var _viewer = viewer;
/////////////////////////////////////////////////////////////////
// create panel and set up inheritance
//
/////////////////////////////////////////////////////////////////
Viewing.Extension.Workshop.WorkshopPanel = function (
    parentContainer,
    id,
    title,
    options) {
    Autodesk.Viewing.UI.PropertyPanel.call(
        this,
        parentContainer,
        id, title);
};
Viewing.Extension.Workshop.WorkshopPanel.prototype = Object.create(
    Autodesk.Viewing.UI.PropertyPanel.prototype);
Viewing.Extension.Workshop.WorkshopPanel.prototype.constructor =
    Viewing.Extension.Workshop.WorkshopPanel;

/////////////////////////////////////////////////////////////////
// load callback: invoked when viewer.loadExtension is called
//
/////////////////////////////////////////////////////////////////
_self.load = function () {

8. Extension のロードとロード解除を処理する load() と unload() 内で、定義したパネルのインスタンス化と後処理を追記します。load() と unload() 関数内を追記してください。

/////////////////////////////////////////////////////////////////
// load callback: invoked when viewer.loadExtension is called
//
/////////////////////////////////////////////////////////////////
_self.load = function () {
    _viewer.addEventListener(
        Autodesk.Viewing.SELECTION_CHANGED_EVENT,
        _self.onSelectionChanged);
    _self.panel = new Viewing.Extension.Workshop.WorkshopPanel(
        _viewer.container,
        'WorkshopPanelId',
        'Workshop Panel');
    console.log('Viewing.Extension.Workshop loaded');
    return true;
};
/////////////////////////////////////////////////////////////////
// unload callback: invoked when viewer.unloadExtension is called
//
/////////////////////////////////////////////////////////////////
_self.unload = function () {
    _self.panel.setVisible(false);
    _self.panel.uninitialize();
    console.log('Viewing.Extension.Workshop unloaded');
    return true;
};

9. オブジェクト選択の検出で利用した SELECTION_CHANGED イベントのイベントハンドラ関数である onSelectionChanged() を _self.load() と _self.unload() の間に定義します。このコードは、選択したオブジェクトをビュー内に拡大表示して、そのプロパティをインスタンス化したパネルに表示します。

/////////////////////////////////////////////////////////////////
// selection changed callback
//
/////////////////////////////////////////////////////////////////
_self.onSelectionChanged = function (event) {
    function propertiesHandler(result) {
        if (result.properties) {
            _self.panel.setProperties(
                result.properties);
            _self.panel.setVisible(true);
        }
    }
    if (event.dbIdArray.length) {
        var dbId = event.dbIdArray[0];
        _viewer.getProperties(
            dbId,
            propertiesHandler);
        _viewer.fitToView(dbId);
        _viewer.isolateById(dbId);
    }
    else {
        _viewer.isolateById([]);
        _viewer.fitToView();
        _self.panel.setVisible(false);
    }
}

10 Viewing.Extension.Workshop.js を上書き保存してから、Node.js で構築してある Web サーバーを localhost:3000 のURLで表示してみてください。オブジェクトを選択するたびに選択状態が変わり、オブジェクトのフォーカスが遷移すると同時に、Workshop Panel のタイトルを持つパネルがプロパティを表示されるはずです。

このように、Extension 単位でさまざまな機能を盛り込んでいくことができます。なお、Extension のロード方法は、使用する Viewer 実装によって変化します。詳細は、Forge Viewer でのモデル表示コードの進化 の後半で触れていますので、一度ご確認ください。

By Toshiaki Isezaki

Forge Viewer Extension の作成

Share this:

Like this:

Discover more from Autodesk Developer Blog