View and Data API チュートリアル ～ その6 ～ カメラ移動

ご注意：View and Data API は2016年6月に Viewer と  Model Derivative API に分離、及び、名称変更されました。

この記事では、前回まで作成してきた Extension を改良して、選択したオブジェクトの周囲を旋回するカメラ（視点）を設定します。カメラの移動は、View and Data API のベースになっている three.js の要素を利用して、タイマーを用いた一定間隔のマトリックス変換で実装しています。

なお、Autodesk View & Data API – Getting Started Tutorial リポジトリ では、この内容はボーナス ステップとなっています。アニメーションを実装する必要ない場合には、スキップしていただいても問題はありません。

1. まず、Extension のロード時に呼び出される load() 関数内に、カメラ移動の間隔を保持する変数を用意します。
   

    _self.load = function () {
   
       _viewer.addEventListener(
         Autodesk.Viewing.SELECTION_CHANGED_EVENT,
         _self.onSelectionChanged);
   
       _self.panel = new Viewing.Extension.Workshop.WorkshopPanel (
         _viewer.container,
         'WorkshopPanelId',
         'Workshop Panel');
   
       _self.interval = 0;
   
       console.log('Viewing.Extension.Workshop loaded');
   
       return true;
     };

2. オブジェクト選択で使用した onSelectionChanged() のスコープの後に、アニメーションを処理する実装を追記します。
   

       /////////////////////////////////////////////////////////////////
       // rotate camera around axis with center origin
       //
       /////////////////////////////////////////////////////////////////
       _self.rotateCamera = function(angle, axis) {
         var pos = _viewer.navigation.getPosition();
   
         var position = new THREE.Vector3( // Point?
           pos.x, pos.y, pos.z);
   
         var rAxis = new THREE.Vector3(
           axis.x, axis.y, axis.z);
   
         var matrix = new THREE.Matrix4().makeRotationAxis(
           rAxis,
           angle);
   
         position.applyMatrix4(matrix);
   
         _viewer.navigation.setPosition(position);
       };
   
       /////////////////////////////////////////////////////////////////
       // start rotation effect
       //
       /////////////////////////////////////////////////////////////////
   
       _self.startRotation = function() {
         clearInterval(_self.interval);
   
         // sets small delay before starting rotation
   
         setTimeout(function() {
           _self.interval = setInterval(function () {
           _self.rotateCamera(0.05, {x:0, y:1, z:0});
           }, 100)}, 500);
       };

3. 最後に、オブジェクトを選択した際にアニメーションが起動するよう、onSelectionChanged() 関数の内容を書き換えます。
   

     /////////////////////////////////////////////////////////////////
     // selection changed callback
     //
     /////////////////////////////////////////////////////////////////
     _self.onSelectionChanged = function (event) {
   
       function propertiesHandler(result) {
   
         if (result.properties) {
   
           _self.panel.setProperties(
           result.properties);
   
           _self.panel.setVisible(true);
         }
       }
   
       if(event.dbIdArray.length) {
   
         var dbId = event.dbIdArray[0];
   
         _viewer.getProperties(
           dbId,
           propertiesHandler);
   
         _viewer.fitToView(dbId);
         _viewer.isolateById(dbId);
   
         _self.startRotation();
       }
       else {
         clearInterval(_self.interval); // where is this function defined?
   
         _viewer.isolateById([]);
         _viewer.fitToView();
         _self.panel.setVisible(false);
       }
     }

4. 実装が完了したら、localhost:3000 でローカルに設定下Web サーバー ページを表示してから、オブジェクトを選択してみてください。パネルが表示されると同時に、選択したオブジェクトの周囲にカメラが旋回して、オブジェクトが回転して見えるはずです。
   
    
   

ここまでの実装で、Autodesk View & Data API – Getting Started Tutorial リポジトリ  にあるチュートリアルは終了です。おつかれさまでした。

次のステップ

Node.js で作成した Web サーバーは、あくまでローカルな環境に用意した開発環境です。この環境を AWS や Microsoft Arure、Heroku などにホストして運用することも出来ますし、プライベート クラウド(オンプレミス サーバー）にホストしてイントラネットで利用することも出来ます。もちろん、Node.js 以外にも、ASP.NET で Web サーバーを構成することも出来ます。

また、View and Data API  自体も他の Web サービス API と一緒に組み合わせて利用することで、単なるビューアとしてだけではなく、さまざまな情報を Web ブラウザだけで配信するダッシュボードとして運用することも出来るはずです。ハードウェアや IoT のインタフェースとしても利用可能です。

オートデスクが GitHub 上に用意した Forge Platform サンプル ページ には、沢山のサンプルが多くのバリエーションで用意されていています。ぜひ、https://github.com/Developer-Autodesk を覗いてみてください。また、フォーラム に投稿してサポートを受けたり、他の開発者の質問と解決策を参照することも有用です。Autodesk Forge サンプルの ブログ からも、テクニックや実装手法を得ることが出来るようになっています。

View and Data API を含む Forge プラットフォーム API を利用して、ぜひ、The Future Of Making Things  を実現してみてください。

By Toshiaki Isezaki