APS ポータル（https://aps.autodesk.com/）に記載されている APS Viewer の Developer’s Guide に、CodePen を使った Interactive Examples セクションが追加されています。
CodePen は、フロントエンドを担当する Web デザイナーや Web 開発者が、HTML、CSS、JavaScript コードを対話的に編集しながら、リアルタイムに結果を確認出来る開発環境と考えることが出来ます。今回の Interactive Examples セクションの記載で、APS Viewer の基本的な動作を HTML、CSS、JavaScript タブを切り替え、実際のコードを見ながら確認することが可能になりました。
Interactive Examples セクションでは、次の機能を評価するコードをテストすることが出来ます。
[Toggle Explode] ボタンのクリック イベントを利用して viewer.explode() を呼び出し、モデルの状態を 50% の割合で分解表示に切り替えます。
Viewer の SELECTION_CHANGED_EVENT イベントを利用して、オブジェクト選択が発生するたびに、指定されたインライン関数を呼び出し、ObjectId（dbId）を取得、アラートダイアログに表示します。
テキストボックスに door や frame などのプロパティ名を入力、[Search] ボタンをクリックしてモデルをクエリし、プロパティ名でヒットしたオブジェクトにズーム、選択表示します。
Viewer カンバス内のツールバーの右端にカスタムボタンを追加して、onClick イベントハンドラで環境を Photo Booth（スピード写真）に変更します。
[Add Sphere] ボタンのクリックで custom-scene シーンの登録の有無をチェックし、存在しない場合はシーンを作成してをランダムに球を配置します。
異なる URN を持つモデル 2 つ（Inventor モデルと Revit モデル）を 1 つの Viewer カンバスに集約表示します。
Viewer 右上の「EDIT ON CODEPEN」をクリックすると、別ウィンドウが開き、直接コードを変更しながら結果を評価することが出来ます。
例えば、Controlling Viewer State の内容の場合、既定のまま [Toggle Explode] ボタンをクリックすると、次の下部のようにモデルが分解表示されます。
「JS」タブの黄色く囲った [Toggle Explode] ボタンのクリック イベントハンドラを次のように変更すると、ボタンをクリックするたびにツールバーのテーマ色を変えたり、モデル分解時の割合を変更したりすることが出来ます。
document.getElementById(“explode”).addEventListener(“click”, function () {
if (viewer.getExplodeScale() > 0.0) {
viewer.explode(0.0);
viewer.setTheme(“dark-theme”);
} else {
viewer.explode(1.5);
viewer.setTheme(“light-theme”);
}
});もちろん、コードの変更はリアルタイムに Viewer カンバスに反映されるので、すぐに結果を確認することが出来ます。
Interactive Examples セクションは、今後も評価出来る APS Viewer の機能（コード）を追加・拡張していく予定です。
By Toshiaki Isezaki
Leave a Reply