Autodesk Developer Blog : 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 リポジトリ では、この内容はボーナスステップとなっています。アニメーションを実装する必要ない場合には、スキップしていただいても問題はありません。

まず、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;
};

		

オブジェクト選択で使用した 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);
};

		

最後に、オブジェクトを選択した際にアニメーションが起動するよう、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);
    }
}

		

実装が完了したら、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

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

Share this:

Like this:

Discover more from Autodesk Developer Blog

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