3Dビューが表示されたのは偶然だった?
前回無事ビューアで表示できたので、今回はチュートリアルのStep3を解明してみます。考えてみれば、Revitのデータをアップロードして、2dと3dのビューを表示用に変換するように、命令をしたわけですから、前回のビューアで表示するように指定したビューには複数のビューがあったはずです。にもかかわらず、3Dビューが表示されたのは「単なる偶然」だったのですね。運よく?表示された3Dビュー |
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()を以下の内容で書き換えます。これらの謎は後日調べて報告します。
さて、この関数の最後にある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ボタンを押す |
2D図面が表示される |
さて、関数と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アプリケーションを作ってみようではないですか!
でも、ここらでチュートリアルで習ったことを使って、自分でWebアプリケーションを作ってみようではないですか!
0 件のコメント:
コメントを投稿