three.js ことはじめ

■はじめに

3D ライブラリの three.js を動かしてみた。

Three.js

■サンプルコードの実行

最初に Github にあがっているサンプルを実行してみた。
https://github.com/mrdoob/three.js/#usage

コードの書き方が乗っているだけでサンプルとして固まっていなかったので、作成して以下にアップしました。

PC での実行例は以下
http://jsfiddle.net/f17Lz5ux/

アプリとしてはコードになかったので上記を参考に作成。

以下にコミットしています。
https://github.com/namaranran/threejs_1st_sample

そのままブラウザで表示すると以下の様にワイヤーフレームの立方体が表示されます。
これがくるくると回転するサンプルとなります。

Firefox OS向けにmanifestも追加しています。

manifest.webapp

{
  "name": "threeJS",
  "description": "threeJS demo",
  "type": "web",
  "launch_path": "/index.html",
  "locales": {
    "en-US": {
      "name": "threejs_demo,
      "description": "Web app three.js demo"
    }
  },
  "icons": {
    "128": "icon128x128.png"
  }
}

Firefox OSでもアプリとして動きます。
Fx0とかFlameをお持ちの方は試してみてください。

意外ですが、Fx0でもヌルヌルと動きます(スクリーンショットだと伝わりませんが・・・)