Autodesk Forge で3Dモデルをブラウザ上に表示する Step5 〜Node.jsでViewerの実装〜

今回はNode.jsで、ここまで用意してきた3Dモデルファイルを表示させるためのサーバーを実装していく。

こちらの記事で用意したプロジェクトディレクトリの「viewer.js」を開いてくれ。

すでに簡易的なサーバー環境を立ち上げるためのコードが書いてあるので、今回は各自で取得したキーなどを入力していく。

編集する箇所はファイル内5〜7行目の変数だ。

var CLIENT_ID = '',
	CLIENT_SECRET = '',
	OBJECT_URN = '';

ForgeアカウントのID、シークレットキー、URNはBase64変換前のobjectIdを入力する。

これで準備は完了だ。

ファイルを保存し、ターミナルを起動しよう。

ターミナルでプロジェクトディレクトリに移動し、下記のコマンドを実行してくれ。

npm install

プロジェクト内のpackage.jsonを元に必要なモジュールがインストールされる。

プロジェクト内にnode_modulesディレクトリが作成されたら下記コマンドを実行。

node viewer.js

「Server is listening」と表示されたら、ブラウザでhttp://localhost:3000/へアクセスしてみてくれ。

ブラウザ上にモデルが描画されれば成功だ。

コードを大まかに解説しよう。

Node.jsでWebサーバーを起動。

Postmanで行っていたURNのBase64変換処理は関数で実行している。

サーバーへアクセスすると、サーバー側で認証を行いアクセストークンを取得。
アクセスのたびにトークンは更新されるので、有効期限は気にならない。

あとはサーバー側でHTMLを生成すれば描画処理完了だ。

いかがだっただろうか。

3Dの描画はThree.jsなどのライブラリを使用しても骨の折れる作業だが、ForgeのAPIを使い、簡単なNode.jsコードを書くだけで多機能なビューを実装することができる。

今回はローカル環境でのサーバー構築に留めるが、次回はこの環境をHerokuにデプロイし、デモ環境を公開する手順を紹介しよう。