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 ファイルを開いて、ファイル後半でコメント化されてたままの次コード部分のコメント // 記号を削除していきます。ここで対象としているのは、単純な Extension 実装です。

                               ：
///////////////////////////////////////////////////////////////////////////////////
// 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');
}

続いて、同じ 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 start または node server.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 です。

なお、Viewing.Extension.Transform.min.js では、Forge Viewer の JavaScript ライブラリのベースにもなっている Three.js を利用して選択オブジェクトの移動や回転を実現しています。このサンプルは Viewer ソリューションでもあるので、移動や回転させてオブジェクトを Model Derivative API で表示変換する前のデザインファイルに反映させることは出来ない点にご注意ください。

By Toshiaki Isezaki

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

Share this:

Like this:

Discover more from Autodesk Developer Blog

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