Blacksmith in FORGE: ビューアで表示する（２）～表示ビューの変更

3Dビューが表示されたのは偶然だった？

前回無事ビューアで表示できたので、今回はチュートリアルのStep3を解明してみます。考えてみれば、Revitのデータをアップロードして、2dと3dのビューを表示用に変換するように、命令をしたわけですから、前回のビューアで表示するように指定したビューには複数のビューがあったはずです。にもかかわらず、3Dビューが表示されたのは「単なる偶然」だったのですね。

運よく？表示された3Dビュー

Step3では画面上部に「Nextボタン」を表示して、クリックするごとに表示可能ビューを入れ変えるようにしてみます。

Step3 をフォローする

ボタンをつくる

まずビューアの上にボタンを作成します。これはHTMLファイルの<div>で区切られたビューアの

<div id="MyViewerDiv"></div>

の行の直後に

<button id="MyNextButton" onClick="loadNextModel()">Next!</button>

とボタンタグを加えます。
ボタンのIDはMyNextButtonで、onClickイベントにloadNextModel()関数を指定しています。
次にボタンのスタイルを指定するために、<head>～</head>内の<style>～</style>タグのなかに

#MyNextButton {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        font-size: 40px;
        cursor: pointer;
    }

と付け加えます。従いまして、Visual Studioとしては下の図のようになります。

ボタンのスタイルとタグを追加

onClickイベント関数の追加

ボタンをクリックしたときに処理される関数を記述します。とりあえず

function loadNextModel() {
    console.log('TODO: Load Next Model');
}

を追加するのですが、問題はどこに追加するのか？ということです。HTMLファイルにJavaScriptを記述する場合、<script>～</script>タグの間に記述するので、とりあえず、下のほうの</script>の直上に入れておきます。

</script>の直上にいれる

グローバル変数の追加

すでに<script>タグの直後に　var viewer;　というグローバル変数が宣言されていますが、これにあと三つのグローバル変数を追加します。

var lmvDoc;
var viewables;
var indexViewable;

したがって、以下の図の位置に入ります。

グローバル変数を追加

ロード成功時の関数(onDocumentLoadSuccess)の変更

既存のonDocumentLoadSuccess()を以下の内容で書き換えます。

function onDocumentLoadSuccess(doc) {

    // docにある2Dおよび3Dの表示可能なビューの配列をグローバル変数viewablesに格納
    viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
　　// 表示可能なビューがなければ終了
    if (viewables.length === 0) {
        console.error('Document contains no viewables.');
        return;
    }

    // ビューアを<div id=MyViewerDiv>に作成しグローバル変数viewerに格納
    var viewerDiv = document.getElementById('MyViewerDiv');
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
    var errorCode = viewer.start();

    // ビューアの初期化時のエラーを確認する
    if (errorCode) {
        console.error('viewer.start() error - errorCode:' + errorCode);
        return;
    }

    // グローバル変数indexViewableを0に初期化し、グローバル偏すlmvDocにdocを格納.
    indexViewable = 0;
    lmvDoc = doc;

    // loadModel関数を呼び出して、ビューアにモデルをロードする
    loadModel();
}

働きはコメントをつけておきましたが、そもそもなぜonDocumentLoadSuccessに引数(doc)があるのかがわかりませんね。この関数自体は、Document.Load関数の第二引数の「onSuccessCallback」なのですが、これが引数をとるなどという記述は、ＨＥＬＰにはどこにもないですから。

これらの謎は後日調べて報告します。

さて、この関数の最後にあるloadModel()を、onDocumentLoadSuccess関数の後に記入します。

function loadModel() {
    var initialViewable = viewables[indexViewable];
    var svfUrl = lmvDoc.getViewablePath(initialViewable);
    var modelOptions = {
        sharedPropertyDbPath: lmvDoc.getPropertyDbPath()
    };
    viewer.loadModel(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
}

そして最後に、onClickイベント関数 loadModel を次の関数で置き換えます。

function loadNextModel() {

    viewer.tearDown();
    viewer.setUp(viewer.config);

    // インデックスを+1して次のビューをロード。最後まで行ったら0に戻る
    indexViewable = (indexViewable + 1) % viewables.length;
    loadModel();
}

これで実行してみると、まず下の図のように3Dビューが表示されます。

左上のNEXTボタンを押す

が、左上に表示された[Next!]ボタンをクリックすると

2D図面が表示される

２Ｄ図面が表示されます。押し続けると次々と図面が表示されて、また最初の3Dビューに戻ります。

さて、関数とAPI Referenceと見比べてみますと、onDocumentLoadSuccess関数のviewerのインスタンスを作成する「Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);」は、リファレンスには見当たりません。代わりに

というnew関数がありますので、この部分を

viewer = new Autodesk.Viewing.Viewer3D(viewerDiv);

と書き換えて実行してみます。実行後は[F5]などで、キャッシュを除去してください。これでも問題なく動くはずです。

What's next?

おお！無事に表示されたぞ。と喜んでいると一番下のWhat's next?の段落に

「ここに紹介されているコードの多くは、物事を稼働させるために必要な定型文です。 ViewingApplicationオブジェクトを使用すると、その一部を簡略化できます。」

とあります。ここにあるのはbioplate(定型文・決まり文句)なので、次のチュートリアルをやってみましょう、と言っております。

さてさて、「ViewingApplication」とはどのようなものなのでしょうか?

でも、ここらでチュートリアルで習ったことを使って、自分でWebアプリケーションを作ってみようではないですか！

Blacksmith in FORGE

2017年1月6日金曜日

ビューアで表示する（２）～表示ビューの変更