Forge Viewer での Fusion 360 アニメーション再生

8月2日東京、8月24日大阪で開催した Fusion 360 ハンズオン＆ Forge meetup では、Fusion 360 のハンズインの他に、Fusion 360 で作成した 3D モデルにアニメーションを定義すれば、Forge Viewer で表示/再生出来ることをデモとともにご紹介しました。今回は、その方法について言及しておきたいと思います。

Forge では、 Fusion 360 などで作成したデザインファイルを変換することで Web ブラウザでストリーミング表示することが出来ます。示以前には、いくつかの RESTful API で準備をしなければなりません。具体的には、Authentication API（OAuth API）で Acccess Token を取得し、Data Management API でデザインファイルをアップロード、その後Model Derivative API でストリーミング用の SVF ファイルに変換します。SVF ファイルの変換完了後、クライアントとなる Web ブラウザ内で動作する Forge Viewer JavaScript API を利用して 3D モデルや 2D 図面を表示、操作することになります。

アニメーションを定義した Fusion 360 のアーカイブファイル（.f3d ファイル）も、この手順に沿うだけです。唯一、アニメーションを再生させる Autodesk.Fusion360.Animation Extension をロードする必要がある点が従来の 3D モデル表示と異なります。オートデスクが提供する Forge Viewer 用の Extension については、過去のブログ記事 Forge Viewer で利用可能な Extension を確認してみてください。

今回の meetup でご案内したデモでは、次のコードで 3D モデルを Viewer 領域（'viewer3d 名を付加した <div></div> 領域）に表示しています。アニメーションは role を 'animation' に設定することで viewable を取得することが出来ます（3D モデルだけの表示では '3D'、2D 図面の場合には ’2D’）。

    // Intialize Viewer
    var options = {};
    options.env = "AutodeskProduction";
    options.accessToken = getToken();
    options.document = "urn:" + urn;
    options.language = "ja";
                
    var viewerElement = document.getElementById('viewer3d');
    _viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, {}); // With default UI

    Autodesk.Viewing.Initializer(options, function () {
        _viewer.initialize();
        _viewer.setTheme("light-theme");
        loadDocument(_viewer, options.document);
        _viewer.addEventListener(
            Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
                function (event) {
                    loadExtensions(_viewer);
                });
        });

    }

    // Load Extension
    function loadExtensions(viewer) {
        viewer.loadExtension('Autodesk.Fusion360.Animation');
    }

    // Load viewable
    function loadDocument(viewer, documentId) {
        // Find the first 3d geometry and load that.
        Autodesk.Viewing.Document.load(documentId, function (doc) {// onLoadCallback
            var animationItems = [];
            if (animationItems.length == 0) {
                animationItems = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
                    'type': 'folder',
                    'role': 'animation'
                }, true);
            }
            if (animationItems.length > 0) {
                viewer.load(doc.getViewablePath(animationItems[0].children[0]));
            }
    }, function (errorMsg) {// onErrorCallback
        console.log("Load Error: " + errorMsg);
    });

}

Autodesk.Fusion360.Animation Extension をロードしたタイミングで Viewwe 内の標準ツールバーに「再生」ボタンが表示されます。アニメーション再生とは関係なく、通常の 3D モデル表示時と同じく、オブジェクトを選択してプロパティ（属性、メタデータ）を表示させたり、計測や断面生成、分解などの機能を利用することが出来ます。もちろん、これらは Forge Viewer JavaScript API 側でも制御出来るので、別の JavaScript ライブラリなどと連携させることが可能です。ま

次の動画で操作をチェックしてみてください。

Autodesk Fusion 360 ハンズオン & Forge Meetup マテリアル公開 でも触れていますが、今回の meetup では、東京会場と大阪会場で少し異なるモデルを作成しています。それぞれ簡単なアニメーションを定義していますので、アーカイブファイルもダウンロードしてみてください。

東京モデル： 0802 Case Practice Final - Tokyo model.f3d をダウンロード

大阪モデル： 0824 Case Practice Final - Osaka model.f3d をダウンロード

By Toshiaki Isezaki