node.js+three.js=node-three.jsを使ってみた

シェアする

  • このエントリーをはてなブックマークに追加
  • Node.jsはサーバーサイドのJavaScriptです。
  • three.jsはWebGLを扱いやすくするライブラリ群です。
  • node-three.jsはthree.jsをNode.jsで扱うためのライブラリ群です。

今回、Windows7のパソコンでnode-three.jsをEclipseでステップ実行できるようにしました。
以下の手順は、EclipseやNodeclipseプラグイン、Node.jsは事前にインストールされているという前提です。

スポンサードリンク

node-three.jsをGitHubから取得する

Eclipseの「File」→「Import」→「Git」→「Projects from Git」→「Clone URI」を選択します。
image
URIとしてhttps://github.com/nulltask/node-three.jsを入力します。

 
image
そのまま「Import as general project」としてGitHubからcloneして入手します。
C:\Users\(ユーザー名)\git\node-three.jsにnode-three.jsがcloneされて入手できました。
Windowsの「スタートメニュー」→「Node.js」→「Node.js command prompt」を実行して、Node.js(npm)のコマンドプロンプトを起動します。
このまま、https://github.com/nulltask/node-three.jsのインストレーション手順通りにNode.jsのコマンドプロンプトからnpm install three.jsを実行するとエラーが出ます。

これは、当然です。
three.jsのフォルダの下でinstallを実行する際は、three.jsを引数につけてはいけません。
node-three.jsフォルダの下で引数なしで、npm installと実行します。

エラーが発生しました。
これらのエラーはWindowsにGTK+のライブラリ群がインストールされていないために発生します。

http://www.gtk.org/download/win64.phpからGTK+の2.22のAll-in-one bundleであるgtk+-bundle_2.22.1-20101229_win64.zipをダウンロードして展開してC:\GTKとしておきます。

GTK+の最新版はVersion3系ですが、Version2.22を使います。Version3系を使うと以下のエラーが表示されます。

これはC:\GTK\lib\libpng.libが存在しないためですが、GTK+がVersion2系とVersion3系ではファイル名が変更されたようです。Version3系にはC:\GTK\lib\libpng.libは存在しません。
また、GTK+のVersion2系32bit版を使うと以下のエラーが発生します。

32bit版を使うとこのようにリンクに失敗するので、必ずVersion2系の64bit版を使うようにします。
正しくVersion2系の64bit版のGTK+が設定できていると以下の通り、インストールに成功します。

これでnode-three.jsのインストールは完了です。

スポンサードリンク

jsdomを古いバージョンに置き換える

C:\Users\XXXX\git\node-three.js\examples\canvas_particles_randomにサンプルモジュールがあるのでEclipseからデバッグ実行してみます。
Eclipseからindex.jsを選択して「右クリック」→「Debug As」→「Node Application」を実行します。
コンソールに以下のエラーが表示されます。

どうやらjsdomのバージョンがversion1.0.0-pre.7を使っており、バージョンが新しすぎるようです。
jsdomの1.0.0-pre.7をアンインストールしてjsdomの0.11.1をインストールします。

これでjsdomが古いバージョン0.11.1に置き換わりました。

スポンサードリンク

Eclipseでnode-three.jsのサンプルを実行する

再度、デバッグ実行する前に1部index.jsを修正します。

私の環境では、parseIntがNaNを返して、無限ループになってしまうので、maxFrame=10と変更しました。
Eclipseからindex.jsを選択して「右クリック」→「Debug As」→「Node Application」を実行します。

こんな感じで実行されます。

image
こんなPNGファイルが10個生成されます。

node-three.jsのまとめ

node-three.jsのプロジェクトは2013年1月から進捗がないようですが、ちょっと使いこんでみようと思います。
正直なところ、まだ、どの程度使えるのかわかりません。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です