2014年4月26日 「春のJavascript祭り」で、LTした際のスライド。 Three.jsを使用して作品を作ってみました。 http://ticklecode.com/present/140426_js_spring_festival_threejs/ WebGLという技術分野で、3次元の考え方が必要ということもあり、なかなかに難しかったですが、慣れてしまえば、毎回、同じ手順で、実装できてしまいます。 ブラウザの対応状況ですが、IEは、11.0 から、Safariは、7.0から対応可。 スマホに至っては、全滅・・・。 http://caniuse.com/#search=webgl 物体の動きを考えるには力学の知識が必要になり、そのあたりの理解も必要になります。 Three.jsを使って、JavaScriptで3Dが実装できるので、他のサイトコンテンツと融合させることができて、今後の可能性を感じる分野。 Three.jsの手順は下記のとおり。 1.sence(シーン)で舞台のようなものを作成 →mesh(メッシュ)で、物体の材料や形を指定する。 →light(ライト)で、光源の位置や距離を指定 物体が複数あれば、そのだけ指定必要。 2.camera(カメラ)で撮影位置や撮影方法を指定 →ここで、物体の移動は物体自体をアニメさせる方法と、カメラの位置を変えていく方法がある。 3.render(レンダー)で描画方法 →HTML5のcanvasを使って描画する。 requestAnimationFrameという、タイマー機能があるので、これで1秒間に60回ぐらい描画させてあげる。 ※感想みたいなもの かなり、リアルな3Dが描画できる。 毎回、手順は同じなので、覚えてしまえばかなり高速に制作できる。 物体の動きや、移動、回転などの計算はキモ。 光のあたり具合でかなり、リアルになる。