Forge Viewer：State API でビューを更新

Forge Viewer の State API とビュー でもご紹介した State API を利用すると、カメラ位置やターゲット位置、オブジェクトの選択状態やオブジェクトの表示/非表示の状態、分解の状態や環境など、ビューの状態をまるごと記録して再生（呼び出し）することが出来ます。

var _view;

function registerView (){
    _view = viewer.getState();
}

function restoreView (){  
    viewer.restoreState(_view);
}

このとき、getState(filter) はビューの各種情報を含んだ次のような JSON を返します。（デバッグコンソールから NOP_VIEWER.getState() と入力して JSON を取得出来ます。）

{
    "seedURN": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZGFzLWphcGFuLXJjcGJmZ2dkZzNoemk0ODB5d3FudTN3ZWJ3bWdzeHZlL2NocmlzdG1hc3NfdHJlZS5mM2Q",
    "objectSet": [
        {
            "id": [],
            "idType": "lmv",
            "isolated": [],
            "hidden": [],
            "explodeScale": 0
        }
    ],
    "viewport": {
        "name": "",
        "eye": [
            -0.1516912418200763,
            -15.431550465791892,
            -0.1549962937528079
        ],
        "target": [
            -0.1516912418200763,
            2.6183109451435183,
            -0.1549962937528079
        ],
        "up": [
            0,
            0,
            1
        ],
        "worldUpVector": [
            0,
            0,
            1
        ],
        "pivotPoint": [
            5.960464477539063e-8,
            1.1920928955078125e-7,
            0
        ],
        "distanceToOrbit": 15.431550585001181,
        "aspectRatio": 2.038216461462691,
        "projection": "perspective",
        "isOrthographic": false,
        "fieldOfView": 22.61986532341139
    },
    "renderOptions": {
        "environment": "Plaza",
        "ambientOcclusion": {
            "enabled": true,
            "radius": 12,
            "intensity": 1
        },
        "toneMap": {
            "method": 1,
            "exposure": -14,
            "lightMultiplier": -1e-20
        },
        "appearance": {
            "ghostHidden": true,
            "ambientShadow": true,
            "antiAliasing": true,
            "progressiveDisplay": true,
            "swapBlackAndWhite": false,
            "displayLines": true,
            "displayPoints": true
        }
    },
    "cutplanes": []
}

この JSON を、そのまま restoreState(viewerState, filter, immediate) に渡すことで、ビューの状態を再現することが出来るわけです。

ビューの変更を考えた場合、setViewFromArray(params) や setView(position, target) などのメソッドでも更新が可能ですが、環境やオブジェクトの選択状態、分解などを無視して、State API の JSON からビューのみを変更出来たら便利です。

そんな場面では、getState(filter) が返す JSON から "viewport" セクションを抜き出して restoreState(viewerState, filter, immediate) に渡すことで、ビューだけを更新することが出来ます。

var view = {
    "view": {
        "viewport": {
            "name": "",
            "eye": [
                -0.1516912418200763,
                -15.431550465791892,
                -0.1549962937528079
            ],
            "target": [
                -0.1516912418200763,
                2.6183109451435183,
                -0.1549962937528079
            ],
            "up": [
                0,
                0,
                1
            ],
            "worldUpVector": [
                0,
                0,
                1
            ],
            "pivotPoint": [
                5.960464477539063e-8,
                1.1920928955078125e-7,
                0
            ],
            "distanceToOrbit": 15.431550585001181,
            "aspectRatio": 2.061889217422729,
            "projection": "perspective",
            "isOrthographic": false,
            "fieldOfView": 22.61986532341139
        } 
    }
}
_viewer.restoreState(view["view"]);

この方法で JSON からビューのみを変更することが出来るようになります。次の例では、この方法でビューを更新するものです。設定で環境を変更しても、[View1] ～ [View3] ボタンは環境を変更せず、ビューだけを更新することがわかります。