新しい Forge Viewer チュートリアル改定版 ～ その1

以前ご案内した 新しい Forge Viewer チュートリアル ～ その1 の手順が改定されていますので、改めて、更新された内容を記しておきたいと思います。Forge Viewer の評価等でお使いいただければと思います。なお、この記事では Windows 上での利用を想定し、https://github.com/Autodesk-Forge/viewer-nodejs-tutorial リポジトリに記載された手順を踏襲していきます。

1.  git for Windows と Node.js、Postman をインストールされていない場合には、Forge の開発環境 の内容をご確認の上、アカウント取得とインストールを完了させてください。
2. Forge を利用するために必要な Client ID と Client Secret（別名 Consumer Key と Consumer Secret）を取得していない場合には、Forge API を利用するアプリの登録とキーの取得 の内容に沿って、キーを取得してください。
3. チュートリアルの環境をセットアップしてきます。 https://github.com/Autodesk-Forge/viewer-nodejs-tutorial リポジトリ ページを表示します。
4. コマンド プロンプから git コマンドを使って素材となるソースコード一式をクライアント コンピュータにコピーします。まずは、コピー対象の URL をページ上でクリップボードにコピーします。
5. コマンド プロンプト を起動後、cd documents と入力してカレント フォルダを Documents フォルダに変更します。
6. git clone コマンドで確認した URL をパラメータに指定して、リポジトリ の内容をクライアント コンピュータにコピーします。具体的には、git clone https://github.com/Autodesk-Forge/viewer-nodejs-tutorial.git と入力してください。リポジトリのコピーが始まります。
7. C:Users<Windows ログイン ユーザ名>Documents フォルダ（ドキュメント フォルダ）直下に viewer-nodejs-tutorial フォルダが作成されていることを確認の上、コマンド プロンプトで cd viewer-nodejs-tutorial と入力してカレント フォルダを変更してください。
8. 続いて、ノード パッケージ マネージャ（npm）を利用し、package.json 内に記載された依存関係に沿って 、Node.js 機能を拡張するパッケージ（ミドルウェア）をインストールしていきます。 npm install と入力してください。
9. Node パッケージは viewer-nodejs-tutorial フォルダ直下に新しく作られた node_modules フォルダにインストールされます。念のため、同フォルダが作成されていることを確認してください。
10. このサンプルでは、Web サーバーを構築する目的で Node.js を利用します。Web ブラウザを介して Forge サイトを閲覧する際には、Web サーバー側のコードは隠蔽されて閲覧できない点に注意してください。逆に、ユーザが Web ブラウザ側（クライアント）で閲覧、実行可能なのは、 Viewer 制御などで利用する JavaScitpt コードになります。本サンプル実装では、 viewer-nodejs-tutorial フォルダ直下の server フォルダ内のコードがサーバー側で実行されるコード、www フォルダ内のコードがクライアント側で実行されるコードになります。ここでは、server フォルダ内の config.js を Adobe Brackets で開いて、下記の太字部分を 2. で取得済の Client ID と Client Secret で置き換えます。リポジトリにある説明では、環境変数 FORGE_CLIENT_ID と FORGE_CLIENT_SECRET を設定するようになっていますが、今回は、直接 config.js に書き込みをします。

'use strict'; // http://www.w3schools.com/js/js_strict.asp
module.exports = {
    // Autodesk Forge configuration
    // this this callback URL when creating your client ID and secret
    callbackURL: process.env.FORGE_CALLBACK_URL || 'YOURCALLBACKURL',
    // set environment variables or hard-code here
    credentials: {
        client_id: process.env.FORGE_CLIENT_ID || 'YOUR CLIENT ID',
        client_secret: process.env.FORGE_CLIENT_SECRET || 'YOUR CLIENT SECRET'
    },
    // Required scopes for your application on server-side
    scopeInternal: ['data:read', 'data:write', 'data:create', 'data:search'],
    // Required scope of the token sent to the client
    scopePublic: ['viewables:read']
};

• server フォルダ内には、Client ID と Client Secret を設定した config.js 以外にも、Forge SDK を使ってクライアントに Access Token を返すルーティング（/user/token）を定義する oauth.js、Access Token をセッションに保存する server.js、Token プロトタイプを定義する token.js がインストールされています。
• www フォルダ内には、このチュートリアルが Web サーバーにホストしてクライアントに表示する HTML 定義である index.html と、同ファイルが参照する wwwjsindex.js や CSS 定義などのファイルがフォルダ毎にインストールされてます。

11. Postman による Viewer 利用手順の理解 – 2 legged 認証 などで、Viewer に表示させるドキュメント ID（URN）を取得してください。
12. www/js/index.js を Adobe Brackets で開いて、下記の太字部分を取得済のドキュメント ID（URN）で置き換えてください。

var viewer;
var options = {
    env: 'AutodeskProduction',
    getAccessToken: getForgeToken
}
var documentId = 'urn:YOUR-URN';
Autodesk.Viewing.Initializer(options, function onInitialized() {
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
/**
 * Autodesk.Viewing.Document.load() success callback.
 * Proceeds with model initialization.
 */
function onDocumentLoadSuccess(doc) {
    // A document contains references to 3D and 2D viewables.
    var viewable = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
        'type': 'geometry',
        'role': '3d'
    }, true);
    if (viewable.length === 0) {
        console.error('Document contains no viewables.');
        return;
    }
    // Choose any of the available viewable
    var initialViewable = viewable[0]; // You can check for other available views in your model,
    var svfUrl = doc.getViewablePath(initialViewable);
    var modelOptions = {
        sharedPropertyDbPath: doc.getPropertyDbPath()
    };
    var viewerDiv = document.getElementById('viewerDiv');
    ///////////////USE ONLY ONE OPTION AT A TIME/////////////////////////
    /////////////////////// Headless Viewer /////////////////////////////
    // viewer = new Autodesk.Viewing.Viewer3D(viewerDiv);
    //////////////////////////////////////////////////////////////////////
    //////////////////Viewer with Autodesk Toolbar///////////////////////
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
    //////////////////////////////////////////////////////////////////////
    viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
}
/**
 * Autodesk.Viewing.Document.load() failure callback.
 */
function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}
/**
 * viewer.loadModel() success callback.
 * Invoked after the model's SVF has been initially loaded.
 * It may trigger before any geometry has been downloaded and displayed on-screen.
 */
function onLoadModelSuccess(model) {
    console.log('onLoadModelSuccess()!');
    console.log('Validate model loaded: ' + (viewer.model === model));
    console.log(model);
}
/**
 * viewer.loadModel() failure callback.
 * Invoked when there's an error fetching the SVF file.
 */
function onLoadModelError(viewerErrorCode) {
    console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
}

13. ここまで用意してきた Web サーバー コードを開発環境上（お使いのコンピュータ）で実行して確認します。コマンド プロンプト上で npm run dev と入力してください。Node start.js と入力しても Web サーバーを起動することが出来ます。
14. エラーなく Node.js サーバー実装が稼働したら、クライアント側の動作を確認をします。Google Chrome などの WebGL 互換 Web ブラウザを起動して、URL 欄に http://localhost:3000 と入力、実行してみてください。
15. 正しくモデルが表示されたら成功です。Web ブラウザを表示した状態で F12 キーを押下するとデベロッパー ツール(開発者ツール) 画面が表示され、クライアント実装となる 12. で編集した index.js の内容が確認出来るはずです。サーバー実装した Client ID や Client Secret は表示されない点に注意してください。

次回 は、各種 Extension をロードさせたり、背景を変更するなどして、Viewer の状態を拡張します。 

By Toshiaki Isezaki