Node.js(5) three.js

前回作ったNode.jsベースのWebアプリで、Raspberry PiをWebサーバにしてデバイスの情報をブラウザに表示する目的はほぼ実現できた。
JavaScriptにはブラウザで各種データをビジュアルに表示するライブラリが豊富にあり、手軽に使えることもわかったので仕上げとしてそのあたりを試してみる。

使用したのは3Dライブラリのthree.js。WebGLをJavaScriptで手軽に使うことができる。

とりあえずテクスチャを貼った立方体を表示させて、Raspberry Piから送られてくる加速度センサの値でそれを動かすようにしてみた。
スクリーンショット 2015-05-30 14.23.50
ブラウザ側でマウスによってカメラを動かせるようにしたので、複数のクライアントから接続した場合、立方体の動きは全く同一になるが、表示される角度や大きさはクライアント側で個別のものとなる。

ソースコード一式はこちら

gitでソースをクローンしたら、以下のようにnpmでモジュールをインストールして動かすことができる。

$ git clone https://github.com/tokoya/node_three.git  
$ cd node_three  
$ npm install  
$ npm start  

ブラウザからは前回と同じように「Raspberry PiのIPアドレス:3000/users」へアクセス。

three.jsは実行時にサイトからダウンロードする事も可能なようだが、ローカルなネットワーク環境下でも動かせるように/public/javascripts/にthree.min.jsとTrackballControls.jsを予め置いてある。

データの3D処理は完全にブラウザ側で行われるので、Raspberry Piの処理能力とは無関係にリッチな表現ができるのは面白い。かなり高度な表現ができるライブラリも各種存在しているので、Raspberry Piとの組み合わせは表現の幅が広がるのではないかと思う。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中