お問い合わせ

Three.js

制作・開発
profile

Export Japan

今日は、Three.jsっていうJavascriptのライブラリを紹介したいと思います!

Three.js」ってなに?

最近、インターネットで3Dコンテンツがだんだん進化してきたから、私はその技術に興味が高まっています。それで「Three.js」見つけました!「Three.js」は従来のJavascript libraryに似てるけど、3DのWebGLコンテンツの表示を可能にしています。WebGLは3Dディスプレイのブラウザ標準です。WebGLの規定のルーチンはちょっと複雑なのですが、「Three.js」のおかげで機能が書きやすく・覚えやすくなります(例えばイメージはJavascriptとJQueryの比較みたいです)。それと、3Dモデリングソフト(例:Blender)からObject/Modelをインポートすることができます。

まとめ Pros/Cons :

○良い点

* プラグインが必要無い(ブラウザのネイティブ)
* Flashと違って、iOSとAndroidの双方で利用できる
* CGのハードウェアアクセラレーションを使う
* 拡張現実のアプリを作れる
* WebGLよりHTML5+Three.jsは書きやすい → “Write less, do more ”

○悪い点

* Internet Explorerの互換性はありません(バージョン10番前)
* 日本語ドキュメンテーションが少ない

下記に、「Three.js」の数例

↓ フランス人がマスターコースの時に作ったプロジェクトです

ソース:http://hexgl.bkcore.com/

やってみたい場合は、こちらへ

↓ 他の面白いプロジェクト:

● http://carvisualizer.plus360degrees.com/threejs/
● http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html
● http://workshop.chromeexperiments.com/stars/

↓ 日本人が作ったプログラム

○ http://yomotsu.github.com/threejs-examples/

 

Three.js」チュートリアル

前述の通り、日本語についての資料が少ないので、このリンクしか見つけられていません。
learningthreejs.com(英語)も勉強するのためには良い場所と思います。

下記は「Three.js」関係ないですが、WebGLについての内容が多いです:

https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/

素晴らしいWebGLアプリをコーデリングができたら、Google Experimentsに結果を送ることができますよ!

以上。