Autodesk Developer Blog : 新しい Forge Viewer チュートリアル改訂版～その2

前回、新しい Forge Viewer チュートリアル改訂版～その1 でご紹介したチュートリアルに Extension 等の拡張を付け加えていきます。Extension とは、Forge Viewer が持つ機能で、JavaScript で決められたルールに従って記述した機能拡張モジュールです。Extension を作成して、実行中の Forge Viewer にロードすることで Viewer 自身を拡張することが出来ます。ちょうど、AutoCAD などのデスクトップ製品用にアドインモジュールを作成、ロードさせて拡張するコンセプトに似ています。

また、Web 開発の経験が浅い方には、HTML でのボタン要素の追加や CSS でのスタイル参照の部分も参考になると思います。

www フォルダ下の js フォルダ内から index.js ファイルを開いて、青字部分の関数群が定義されていることを確認してください。ここで対象としているのは、HTML 上に定義されたボタンをクリックした際に呼び出される関数実装です。

                                       ：
///////////////////////////////////////////////////////////////////////////////////
// Load Viewer Background Color Extension
//
/////////////////////////////////////////////////////////////////////////////////
function changeBackground() {
    viewer.setBackgroundColor(0, 59, 111, 255, 255, 255);
}

/////////////////////////////////////////////////////////////////////////////////
//
// Unload Viewer Background Color Extension
//
/////////////////////////////////////////////////////////////////////////////////
function resetBackground() {
    viewer.setBackgroundColor(169, 169, 169, 255, 255, 255);
}
/////////////////////////////////////////////////////////////////////////////////
//
// Load Viewer Markup3D Extension
//
/////////////////////////////////////////////////////////////////////////////////
// 3D Markup extension to display values of the selected objects in the model. 
function loadMarkup3D() {
    viewer.loadExtension('Viewing.Extension.Markup3D');
}

/////////////////////////////////////////////////////////////////////////////////
//
// Load Viewer Transform Extension
//
/////////////////////////////////////////////////////////////////////////////////
// Transformation is allowed with this extension to move object selected in the XYZ
// position or rotation in XYZ as well.
function loadTransform() {
    viewer.loadExtension('Viewing.Extension.Transform');
}
/////////////////////////////////////////////////////////////////////////////////
//
// Load Viewer Control Selector Extension
//
/////////////////////////////////////////////////////////////////////////////////
// This extension allows you to remove certain extensions from the original toolbar 
// provided to you.
function loadControlSelector() {
    viewer.loadExtension('_Viewing.Extension.ControlSelector');
}

Viewer3D.setBackgroundColor() で背景色を変更する際には、呼び出し前にビューア設定の「環境イメージの表示」をオフにするか、Viewer3D.setEnvMapBackground() で false を指定してください。

続いて、同じ www フォルダ直下から index.html ファイルを開いて、<head> ～ </head> セクション内の The Viewer Extensionsコメント行下にある Extension 参照部の 3 行分を囲むコメント <!– 記号と — > 記号を削除します。

                             ：
<!-- The Viewer Extensions -->
<script src="/extensions/Viewing.Extension.Markup3D.min.js"></script>
<script src="/extensions/Viewing.Extension.Transform.min.js"></script>
<script src="/extensions/_Viewing.Extension.ControlSelector.min.js"></script>

<!-- The Viewer JS -->
<script src="/js/index.js"></script>
                             ：

同じ index.html ファイル内で <body> ～ </body> セクション内でボタン定義を記述している箇所 6 行を囲むコメント <!– 記号と — > 記号を削除します。

                             ：
<div class="container">
    <!-- This is where your viewer should attach -->
    <div class="center-block" id="viewerDiv"></div>
    <!-- Extension Buttons -->
    <div class="row">
        <div class="myButton" id="background" onclick="changeBackground()">Change Background</div>
        <div class="myButton" id="background" onclick="resetBackground()">Reset Background</div>
        <div class="myButton" id="background" onclick="loadMarkup3D()">Markup3D</div>
        <div class="myButton" id="background" onclick="loadTransform()">Transform</div>
        <div class="myButton" id="background" onclick="loadControlSelector()">Control Selector</div>
    </div>
</div><!-- /container -->
                              ：

最後に、www フォルダ下の css フォルダ内から main.css ファイルを開いて、3. で定義したボタン群のスタイルシート定義のコメント /* と */ を削除します。このスタイルが、ボタンの色やマウスホバーの際の振る舞いなど、ボタン共通のスタイルを定義しています。

                              ：
h4 {
    color: white;
}
.myButton {
    background - color: white;
    color: #4CAF50;
    border: 2px solid #4CAF50;
    border - radius: 8px;
    display: inline - block;
    cursor: pointer;
    font - family: Verdana;
    font - size: 17px;
    padding: 16px 31px;
    text - decoration: none;
    margin - top: 1em;
    -webkit - transition - duration: 0.4s;
    transition - duration: 0.4s;
}
.myButton:hover {
    background - color: #4CAF50;
    color: white;
}
.myButton:active {
    position: relative;
    top: 1px;
}

Node.js command prompt 上でカレントディレクトリが viewer-nodejs-tutorial フォルダであることを確認したら、コマンドプロンプト上で npm run dev または Node start.js と入力して Node サーバーを起動します。
Google Chrome か、他の WebGL がサポートされる Web ブラウザを起動して、URL に localhost:3000 と入力してください。指定したドキュメントが表示されるはずです。前回とは異なり、Viewer 領域の下に 3. でコメントを外したボタンが 5 つ表示されるはずです。ボタンをクリックすることで、Viewer 背景の色を変更したり、Extension をロードして Viewer 上にマークアップを記入したり、オブジェクトを選択して移動や回転を加えることが出来るはずです。
各ボタンの振る舞いを動画にしていますので実装内容をご確認ください。[Markup3D] ボタンでロードされるのは、wwwextensions フォルダ内の Viewing.Extension.Markup3D.min.js ファイルで定義された Extension です。同様に、[Transform] ボタンでロードされるのは、Viewing.Extension.Transform.min.js ファイルで定義された Extension です。

オートデスクが提供する Extension に加え、独自に Extension を作成することが出来ます。詳しくは、過去のブログ記事 Forge Viewer で利用可能な Extension をご参照ください。GitHub リポジトリ https://github.com/Autodesk-Forge/library-javascript-viewer-extensions 上でその他の有用な Extension サンプルも公開されています。

By Toshiaki Isezaki

新しい Forge Viewer チュートリアル改訂版 ～ その2

Share this:

Like this:

Discover more from Autodesk Developer Blog

新しい Forge Viewer チュートリアル改訂版～その2